How To create DHTML Menu for responsive(Mobile) view in drupal ?

  0 comments

Follow the simple steps to setup DHTML Menu for mobile device:--

Step 1: Download DHTML Menu module and enable it.

Step 2: Configure the DHTML Menu

Go to '/admin/config/user-interface/dhtml_menu' on your site.

Responsive menu admin config

Admin config user interface image

admin_config_user-interface_dhtml_menu_3_0

Admin config user interface image

Step 3: Configure Block into the region where you want to show it.

Go to '/admin/structure/block' on your site.

Admin structure block

Step 4: Put this code in your theme's

You can put this code into your "page.tpl.php and page--front.tpl.php".

HTML :

<div id="menu-area"> <div id="mobile_menu" style="display:none;"> <div class="nav-collapse collapse"> <nav role="navigation"> <div id="menu-area"><?php print render($page['menu-area']);?></div> </nav> </div> </div> <div id="all_menu"> <div id="menu-area"><?php print render($page['menu-area']);?></div> </div> </div>

Step 5: Add below code into your css's file.

Put this code under the media query section @media only screen and (min-width: 0px) and (max-width: 400px) { }

CSS :

#menu-area #block-system-main-menu { display:block; } #menu-area #block-system-main-menu h2.block-title { display:none; } #menu-area #block-superfish-1 { display:none; } #mobile_menu { display:block !important; } #all_menu { display:none; } #menu-area { background:none; } #mobile_menu #menu-area ul { margin:0px; padding:0px; list-style:none; list-style-image:none; } #mobile_menu #menu-area ul li { margin:0px; padding:0px; list-style:none; list-style-image:none; width:100%; margin-bottom:1px; text-align:center; padding-top:1px; padding-bottom:1px; background:#1c4281; background-size:100%; } #mobile_menu #menu-area .dropdown-toggle .caret { border-bottom-color: #e4e1e9; border-top-color: #e4e1e9; } #mobile_menu #menu-area ul li ul { margin-top:5px ; } #mobile_menu #menu-area ul li ul li.last { margin-bottom:0px ; } #mobile_menu #menu-area ul li:hover { background:#00a9d3; background-size:100%; } #mobile_menu #menu-area ul.dropdown-menu li { background:#00a9d3; background-size:100%; border-top:1px solid #FFFFFF; color:#1c4281; } #mobile_menu #menu-area ul.dropdown-menu li:hover { background:#1c4281; background-size:100%; } #mobile_menu #menu-area ul li a { padding:0px; margin:0px; color:#ffffff; font-size:12px; text-transform:uppercase; font-weight:lighter; background:none; border-radius:0px; } #mobile_menu #menu-area ul li a:hover { background:none; border-radius:0px; } #mobile_menu #menu-area ul li.menuparent a.menuparent { background:pink; background-size:100%; } #mobile_menu #menu-area ul li.menuparent ul { display:block ; background:none; } #mobile_menu #menu-area ul li.menuparent ul li { width:100% ; } .nav-collapse, .nav-collapse.collapse { height:auto; overflow:hidden; }

Add new comment