PDA

View Full Version : Spry menu bar drop down not working


JenS
11-19-2014, 11:08 AM
Hello, I am a novice and just created my first spry menu bar. Initially the drop down menus appeared fine but then I added a graphic to appear between the main menu items and now the menu bar looks perfect but the drop downs don't work. The code looks like this:

<li><a class="MenuBarItemSubmenu" href="kids.html">Kids</a></li>
<li class="navBarDivider"></li>

<ul>
<li><a class="MenuBarItemSubmenu" href="#">How we help</a></li>
</ul>

I've spent hours trying to work this out and would really appreciate any advice.

Many thanks and kind regards,

edbr
11-20-2014, 02:13 AM
i would have to guess from that but dropdowns are in a list so something like

<ul><li>Home</li>
<li>About</li>
<li>
Items
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</li>
<li>Blah</li>
<li>Contact</li>
</ul>
thats just for demo as there are no classes added but really i would look at using css rather than javascript personally if its just for a drop down

edbr
11-20-2014, 02:18 AM
in fact heres the above in a page using just css
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style>body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}

ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;

-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}</style>
</head>

<body>
<ul><li>Home</li>
<li>About</li>
<li>
Items
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</li>
<li>Blah</li>
<li>Contact</li>
</ul>

</body>
</html>

edbr
11-20-2014, 03:25 AM
or another one with comments for you
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style> #navbar{float:left; position:relative; color:#FFF; font-size:1em; width:960px; }

#navbar ul{text-align:center; }
#navbar ul li{font-weight:bold; width:120px; height:25px;
text-decoration:none; list-style-type:none;position:relative;float:left; background-color:#3F221B; }
#navbar ul { background-color:#3F221B;}
#navbar ul ul li{background-color:#3F221B;}

#navbar a:visited {color:#FFF;}
#navbar ul ul li {width:120px; text-align:left }

/* top level */
#navbar a, #navbar a:visited {display:block;text-decoration:none;color:#fff; }

/* hide the sub levels */
#navbar ul ul {visibility:hidden; position:absolute;top:25px; background-color:#3F221B; width:120px;}

/* second level links */
#navbar ul ul a, #navbar ul ul a:visited {background-color:#3F221B; color:#fff; width:120px;}
#navbar ul ul li a:hover {background-color:#3F221B; width:120px;}

/* top level hover */
#navbar a:hover, #navbar ul ul a:hover{color:#fff; }
/* second level */
#navbar ul li:hover ul,#navbar ul a:hover ul{visibility:visible;}</style>
</head>

<div id="navbar">
<ul>
<li ><a href="#">Home</a></li>


<li > <a href="#">link2</a>

<!-- -------------- this is the drop down --------------->
<ul>
<li ><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
<li ><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
</ul> <!-- -------------- end of the drop down --------------->

</li>


<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> </ul> </div> <!-- end navbar-->

<body>
</body>
</html>