PDA

View Full Version : Better Navigation Menu


dellis87
12-31-2009, 03:43 PM
I'm new to this forum and not a novice in dreamweaver or css, but definetely not an expert.

Could anyone help me figure out how to make a navigation menu, similar to this website's www.kidde.com (http://www.kidde.com/) ?

I don't want it to be exactly the same, but I like how when you click on it, the link it takes you to has the navigation bar open with the appropriate submenu shown.

Any help would be greatly appreciated, even if you could just tell me what kind of navigation this is called and how I could better search for it.

DWcourse
12-31-2009, 04:44 PM
Search for "accordion menu"m That should get you started (you might also want to search for "accordion menu jquery")m

sitewidecf
01-01-2010, 03:24 PM
I have used this jquery plugin and it works great.

http://www.i-marco.nl/weblog/jquery-accordion-menu/

also check out this list of menus for jquery:
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html


(http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html)

dellis87
01-04-2010, 05:30 PM
Thanks so much. I think I figured out the menu I want.

Now I'm stuck on how to change the bullet style for my ul tags when they have been clicked.

I have an image set as the bullet for only the li tags of the menu (not submenu). When the viewer click on the link, to expand the menu and show the submenu options, I want the original bullets of the main menu tags to change to a different image.

I realize this is over my head, I'm pretty ignorant about the js.

Any help would be awesome, here's my code:



For my HTML:

<div id="masterdiv">
<ul class="menutitle"><li><div class="menutitle" onclick="SwitchMenu('sub1')">Commercial Products</div>
<span class="submenu" id="sub1">
<ul id="submenuID">
<li><a href="new.htm">Fire<i>Stop</i> Detection</a></li>
<li><a href="hot.htm">Machinery Space (Engine Room) Suppression</a></li>
<li><a href="revised.htm">Galley Suppression</a></li></ul>
</span></li>
<li><div class="menutitle" onclick="SwitchMenu('sub2')">Request for Quote</div>
<span class="submenu" id="sub2">
<ul id="submenuID">
<li><a href="notice.htm">Fire<i>Stop</i> Design Guide</a></li>
<li><a href="faqs.htm">H Engineered Design Guide</a></li></ul>
</span></li>

</ul>
<!-- end nav menu --></div>







Javascript (which is freeware from Dynamicdrive.com)

<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(off set, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display ="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>






And my CSS for my MenuTitle & SubMenu


<style type="text/css">
.menutitle{
cursor:pointer;
color:#000000;
width:225px;
text-align:left;
font-weight:bold;/* */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-image: url(images/bullet.jpg);
}
.submenu{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
width: 250px;
list-style-type: none;
}
</style>