Responsive jQuery Dropdown Menus

Editing mobile compliant CSS drop menus

Support for Allwebco mobile responsive drop menu templates. If your template has this menu style you'll see a "HORIZONTAL RESPONSIVE DROP MENUS" note at the top of your "menu-drop.css" and "menu.js" files.

See the help.html included with your template for the correct support link.



Menu modes
Responsive drop menus have 2 modes, or "views". Desktop and mobile view. In the desktop view the menu displays as a normal click type drop menu. In mobile view the drop menus are stacked.


Editing menu names and links
Open the "menu.js" in any plain text editor like Notepad in Windows or TextEdit on Mac. Click the visual link below to see editing notes.


Adding a new sub menu link
To add a new item to the popout area of the drop menu, open the "menu.js" in Notepad or any plain text editor. Check the visual link below.


Adding a top level button
To add a new top level menu item, or "button" on the menu, open the "menu.js" in Notepad or any plain text editor. Check the visual link below.


Top level menu widths
Top menu buttons in desktop view are determined by the length of the text. In mobile view they become 100% in width.


Desktop view menu popout widths
Sub menus must all have the same width when the menu shows in desktop view (they show as 100% width in mobile view). You can edit this width. Edit the "menu-drop.css" and find the note "SUB MENU WIDTH". Just below this note, edit the following code to change the menu width in pixels:

#rwdmenu ul ul { width: 200px; }


Menu colors and fonts
All the colors used on the menu area can be edited in your "menu-drop.css" css file. A "menu.png", located in your "picts" folder, may be used for the menu gradient background.

For the menu font size, search for "font-size" in the "menu-drop.css". There are a total of 5 font sizes you can edit.

All fonts, font sizes, menu colors, padding, margins, hover and active colors are edited in the "menu-drop.css". Notes are included in each section of this file.


Adding a button with no dropdown menu
Copy and paste the line in your "menu.js" as shown in the visual below. The last and/or first buttons may have no drop menu.


Solid color menu tabs with no images
Locate and remove the following line in the "menu-drop.css".

background-image: url("picts/menu.png");

...or change to...

background-image: none;


Adding a button that opens in a new window:
New window links have the following extra code highlighted in red below to open in a new browser window:

<li><a href="PDFgallery.htm" target="_blank">PDF Downloads</a></li>


Menus wrapping:
If the menus are wrapping on desktop, you can edit the "min-width" for the "#rwdmenu" class in the "menu-drop.css" on about line #12.


Menus arrows:
Newer version templates (V1.11 see top of menu-drop.css) will include arrows in the drop menus in both mobile and full view. The arrow images are in the "picts" folder. To have a menu with no arrow, add class="nodrop" like the following:

document.write('<li class="nodrop"><a href="contact.htm">Contact</a></li>');


Setting a fixed width for the top level buttons:
If you want all your buttons to be the same width, edit the "menu-drop.css" and change the following highlighted in red. Some of these css classes may already be set to these values.

Make a backup of the "menu-drop.css" before you start!

On about line #12 set the overall width (match width with the breakpoint width below):

min-width: 640px; /* INCREASE TO STOP DESKTOP MENUS WRAPPING */

On about line #142 set the width and text alignment for each non-mobile button:

/* FULL & MOBILE - TOP LEVEL FONT COLOR & HEIGHT */

#rwdmenu > ul > li > a  {
                        width: 75px;
                        text-align: center;
                        font-size: 13px;
                        color: #FFFFFF;
                        line-height: 40px; /* DEFINES TOP LEVEL MENU HEIGHT */
                        margin: 0px 0px 0px 0px;
                        padding: 0px 10px 0px 10px;
                        display: block;
                        }

On about line #296 set the width and text alignment for each mobile button:

/* MOBILE - 2nd LEVEL FONT SIZE & PADDING */

#rwdmenu > ul > li > a	{
                        width: auto;
                        text-align: left;
                        font-size: 13px;
                        line-height: 18px; /* DEFINES HEIGHT */
                        color: #FFFFFF;
                        padding: 6px 6px 5px 6px;
                        }

On about line #251 set the breakpoint width in 4 places (matching the overall width above):

/***************
START Media Queries - FOR THE MOBILE MENU - 640 WIDTH WHEN MOBILE MENU APPEARS
***************/
@media handheld and (max-width: 640px),
   screen and (max-device-width: 640px),
   screen and (max-width: 640px) 
	{

Multi-Level drop menus:
At this time the responsive menu can not have more than one level of drop downs.




Related Topics:
Links Not Working After an Edit
Adding and Removing Pages
Editing .js Files
Horizontal CSS Drop Menu Help