WebsiteBaker Support (2.8.x) > Templates, Menus & Design
3 level horizontal dropdown menu system
gilly:
--- Quote from: Innocence on May 23, 2008, 11:36:53 PM ---Hi gilly !
I need the same you solved, could you tell me how you did ?
I´m using multiflex-3 template based...
Thanks in advance !
Pablo.-
--- End quote ---
have a look at the allcss2 template. Grab the hovers.htc file, and use the navigation css in screen.css. Then grab the sm2 code from the index.php file - put all this into your multiflex style template replacing the old stuff and you should be good to go from there. Obviously you will need to make changes to the css to make it match with your own style.
Innocence:
--- Quote from: gilly on May 25, 2008, 05:26:19 AM ---have a look at the allcss2 template. Grab the hovers.htc file, and use the navigation css in screen.css. Then grab the sm2 code from the index.php file - put all this into your multiflex style template replacing the old stuff and you should be good to go from there. Obviously you will need to make changes to the css to make it match with your own style.
--- End quote ---
It workeeeeed !!!!!!!!!!!!!!!!
Thanks so much ! I go alone from now on ! hehe
Will show you the final result when it´s finished. Thank you again !
Pablo.-
sky writer:
Hello Pablo,
I am using multiflex 3 and would like to implement this three level menu, but I don't understand how it is described here.
Would you be willing to describe in detail how you took code from allcss2 and put it in multiflex 3?
I already have a manipulated show_menu2, so I don't really want to mess that up if possible.
Where did you put the screen.css code? In layout_setup.css? And did you use all the code of just part?
I appreciate any help you can provide.
Cheers!
vasy:
Also really need this. Would be great that somebody that knows the coding could fix a Multiflex-3 template with multiple dropdown system.
If now that i really need some more help. I tried moving the sm2 code, but i'm not sure on how much to copy etc.
Hope somebody could help. Maybe somebody even have a index and css file that that have already edited that they can send to me.
dadio:
I ran to the same problem. I have a 4 level menu that did work propery. I used AllCSS2 showmenu2 call and I took the ALLCSS2 CSS and modified it so the look would be Multiflex-3.
Here is the ShowMenu2 call you need to put in the index.php file
--- Code: ---<?php show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="header_menu" class="menu">'); ?><br />
--- End code ---
Here is the MUltiflex-3 css now in the layout_setup.css for the nav2 navigation level section that controls the dropdowns (BTW, you could also get the css from the website baker site itself http://www.websitebaker2.org/en/home.php by looking at the source file of the web page and looking at the css that controls the dropdowns on the WB site itself.):
--- Code: ---/*Drop-down menu*/
.header-bottom {width: auto;display:block;clear:both;}
/* Remove List Formattings
~~~~~~~~~~~~~~~~~~~~ */
ul.menu, li.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
}
/* Header menu */
//#header_menu {position: absolute; margin-left: 20px;background:#555;}
//#header_menu li {line-height: normal;}
//ul#header_menu {z-index: 10; clear: both;}
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:900px; border:none; background:rgb(225,225,225) url(./img/bg_head_bottom_nav.jpg) no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {
list-style-type:none;
/*
(Disappearing List-Background)
http://www.positioniseverything.net/explorer/ie-listbug.html
*/
position: relative; /* Fix the Stupid IE6 Bug */
}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
/* Root Level Link Formatting */
.nav2 ul li a:hover, .nav2 li a:focus {background-color:rgb(210,210,210); text-decoration:none;}
.nav2 li a:active, .nav2 ul li a.active {background-color:rgb(210,210,210); text-decoration:none;}
/* Current page Customisations*/
.nav2 li.menu-current a {background: #000; color: #fff; border-bottom: 1px solid #000;}
.nav2 li.menu-current a {font-weight: bold;}
/* 2nd Child menu */
.nav2 .menu li ul {position: absolute; width: 10em; margin: 0; display: none; text-transform: none; border: none; font-size: 100%;}
.nav2 .menu li ul li {width: 10.5em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: auto;}
.nav2 .menu li ul a {width: 10em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}
/* 2nd Child link hover */
.nav2 .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}
/* Show and hide */
.nav2 .menu li:hover ul, .nav2 .menu li a:focus ul, .nav2 .menu li.subMenu ul {display: none;}
.nav2 .menu li ul ul { display: block;}
.nav2 .menu li:hover ul ul, .nav2 .menu li.subMenu ul ul {display: none;}
.nav2 .menu li:hover ul, .nav2 .menu li li:hover ul, .nav2 .menu li.subMenu ul, .nav2 .menu li li.subMenu ul {display: block;}
/* 3rd Child Menu Appreances */
.nav2 .menu li ul li ul li a { width: 10em; height:auto; line-height:1.3em; margin-left:0; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);}
/* Positioning the Pop-out Drops */
.nav2 li {position: relative;}
.nav2 ul ul ul {
position: absolute;
top: 1px;
left: 119%;
}
--- End code ---
I hope this helps someone else in the future.
Navigation
[0] Message Index
[#] Next page
[*] Previous page
Go to full version