WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: daydreamer on April 26, 2012, 02:10:16 PM

Title: Show Menu 2 Difficult to use
Post by: daydreamer on April 26, 2012, 02:10:16 PM

Maybe just me but I find it very hard to add custom drop down menus with show menu 2.
I'm not a coder but have tried and tried to add a menu for this

Code: [Select]

#main_menu {float:right;}
#menu {
float:right;
}
#main_menu ul li {padding:0px 9px; display:block; float:left; position:relative; background:url(../images/line_menu.png) no-repeat; z-index:200;}
#main_menu ul li .lb {width:5px; height:5px; display:none; overflow:hidden; position:absolute; left:0px; bottom:1px; background:url(../images/bg_menu_l_b.jpg) no-repeat; z-index:1000;}
#main_menu ul li .rb {width:5px; height:5px; display:none; overflow:hidden; position:absolute; right:0px; bottom:1px; background:url(../images/bg_menu_r_b.jpg) no-repeat;}
#main_menu ul li:first-child {padding-left:0px; background:none;}
#main_menu ul li a {display:block;}
#main_menu ul li a:hover {text-decoration:none;}
#main_menu ul li a span {display:block; cursor:pointer;}
#main_menu ul li a span span {height:30px; line-height:30px; padding:0px 16px; position:relative; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#828181;}
#main_menu ul li:hover {z-index:201;}
#main_menu ul li:hover a {background:url(../images/bg_menu_active_m.png) repeat-x;}
#main_menu ul li:hover a span {background:url(../images/bg_menu_active_l.jpg) no-repeat;}
#main_menu ul li:hover a span span {background:url(../images/bg_menu_active_r.jpg) no-repeat right; color:#ffffff;}
#main_menu ul li:hover ul {display:block;}
#main_menu ul li:hover .lb {display:block;}
#main_menu ul li:hover .rb {display:block;}
#main_menu ul li.active a {background:url(../images/bg_menu_active_m.png) repeat-x}
#main_menu ul li.active a span {background:url(../images/bg_menu_active_l.jpg) no-repeat;}
#main_menu ul li.active a span span {background:url(../images/bg_menu_active_r.jpg) no-repeat right; color:#ffffff;}

#main_menu ul li ul {width:177px; padding-bottom:9px; display:none; position:absolute; left:9px; top:28px; z-index:201; background:url(../images/bg_submenu_bottom.png) no-repeat left bottom;}
#main_menu ul li:first-child ul {left:0px;}
#main_menu ul li ul li {width:177px; padding:0px; padding-top:8px; display:block; background:url(../images/bg_submenu_mid.gif) repeat-y;}
#main_menu ul li ul li.top {height:4px; padding:0px; background:url(../images/bg_submenu_top.jpg) no-repeat;}
#main_menu ul li ul li a {margin:0px 5px; padding-left:18px; padding-top:7px; background:url(../images/arrow_submenu.gif) no-repeat 8px 12px !important; border-top:1px solid #f0f0f0; font-family:Arial, Helvetica, sans-serif; color:#737373;}
#main_menu ul li ul li a:hover {background:url(../images/arrow_submenu_on.blue.gif) no-repeat 8px 12px !important; color:#1191b0;}
#main_menu ul li ul li.first {padding-top:0px;}
#main_menu ul li ul li.first a {border-top:none;}

Title: Re: Show Menu 2 Difficult to use
Post by: Ruud on April 26, 2012, 02:21:00 PM

This is the css for a menu with a lot of extra classes and span stuff in the html.

If you have working (demo) html with this css it would be helpfull.
It is more easy to work backwards from the output than trying to read the css and reverse engineer the browser behavour.

Title: Re: Show Menu 2 Difficult to use
Post by: daydreamer on April 28, 2012, 10:08:49 AM

Thanks for the reply this is the html for the menu

Code: [Select]

<div id="main_menu">
                <ul>
                    <li class="active"><a href="/index.php"><span><span>Home</span></span></a>
                     
                         
                        </li>
                      <li><a href="#"><span><span>About Us</span></span></a></li>
                 
                       
                        <li><a href="#"><span><span>Services</span></span></a>
          <ul>
                            <li class="top"></li>
                            <li class="first"><a href="#">Child One</a></li>
                                <li><a href="#">Child Two</a></li>
                            </ul>
                        </li>
                     
                      <li><a href="#"><span><span>Blog</span></span></a></li>
                      <li><a href="#"><span><span>Contact Us</span></span></a></li>
                  </ul>
                   
                </div>