Navigation Bar

[Jammy_Stuff]

My site is finally beginning to come together but I don't think much of the nav bar (a frame to the left of the main page full of images). I was thinking of doing one where for example you could have

HomeNewsReviewsForum

When you click one of these, it goes to the page it is linked to. However if for example you hover the mouse over news, another vertical bar pops out to the right of news saying December 05, January 06 etc.What I want to know is can this be done in javascript, is it a good choice and how do I do it?

[Chocolate570]

You can only do it with javascript, from what I know. Well, there are some readymade scripts for it---check the menu section of Dynamic Drive. Basically, most of them use CSS and javascript in collaboration, meaning dHTML.

[Jonas]

Pure CSS dropdown menuVery cool.

[Jammy_Stuff]

Actually, I like that CSS one. Can someone help me seperate out the menu affiliated code on that page from the general other stuff?

[Jonas]

<style type="text/css">body {color:#fff;}#wrapper {color:#000;}.red {color:#c00;}#info {margin-top:20px;}#info h1 {font-size:3em; text-align:center; font-family: georgia, "times new roman", serif;}#head {height:145px; border:0;}#positioner {clear:both; position:relative; left:1px; z-index:100;}#ads {position:relative; z-index:10;}.menu {display:none;}#noniemenu {position:absolute;}#noniemenu .holder ul {padding:0; margin:0;}#noniemenu .holder ul li {list-style-type: none;}#noniemenu .holder li {}#noniemenu .holder li ul {display: none;} #noniemenu .holder li:hover > ul#a3 {display:block; position:absolute; left:105px; margin-top:-20px; border:1px solid #000;}#noniemenu .holder .bold {font-weight:bold;}#noniemenu .holder {  color:#fff;   width:104px;   height:18px;   display:block;   overflow:hidden;  float:left;  border:1px solid #000;  margin-right:1px;  font-size:10px;  }#noniemenu .holder:hover {  height:auto;   }#noniemenu a.outer, #noniemenu a.outer:visited {   color:#fff;    width:104px;    line-height:18px;   display:block;    background:#e09222;    text-align:center;    text-decoration:none;    font-family: verdana, arial, sans-serif;   }#noniemenu a.outer:hover {  background:#697210;   overflow:visible;  }#noniemenu div.open {display:none;}#noniemenu a.inner, #noniemenu a.inner:visited {  display:block;   width:104px;   height:18px;  line-height:18px;  border-bottom:1px solid #000;   text-decoration:none;   color:#000;   background:#eee;  text-align:center;  }#noniemenu a.second {font-weight:bold;}#noniemenu a.inner:hover {  background:#add;  }</style><!--[if lte IE 6]><style type="text/css">body {margin-top:12px;}#head {height:147px;}#noniemenu {display:none;}.menu {display:block; position:absolute;}.menu a.outer, .menu a.outer:visited {   color:#fff;    width:104px;    height:18px;    display:block;    background:#e09222;    border:1px solid #000;    margin-right:1px;    text-align:center;    float:left;    text-decoration:none;    font-family: verdana, arial, sans-serif;    font-size:10px;    line-height:18px;    overflow:hidden;   }.menu a.outer:hover {  background:#697210;   overflow:visible;  }.menu a.outer:hover table.first {  display:block;   background:#eee;   border-collapse:collapse;  }.menu a.inner, .menu a.inner:visited {  display:block;   width:102px;   height:18px;   border-bottom:1px solid #000;   text-decoration:none;   color:#000;  font-family: verdana, arial, sans-serif;   font-size:10px;   text-align:center;  }.menu a.inner:hover {  background:#add;  }.menu a.outer table.first a.second {  height:18px;   line-height:18px;   overflow:hidden;   font-weight:bold;  }.menu a.outer table.first a.second:hover {  position:relative;   overflow:visible;  }.menu a.outer table.first a.second:hover table {  position:absolute;   top:-2px;   left:102px;   border-collapse:collapse;   background:#eee;   border:1px solid #000;   font-weight:normal}</style><![endif]-->

<div id="wrapper"><div id="head"><div id="positioner"><div class="menu"><a class="outer" href="../menu/index.html">DEMOS<table class="first"><tr><td><a class="inner" href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a><a class="inner" href="../menu/embed.html" title="Wrapping text around images">wrapping text</a><a class="inner" href="../menu/form.html" title="Styling forms">styled form</a><a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a><a class="inner second" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ><table><tr><td><a class="inner" href="../menu/form.html" title="Styling forms">styled form</a><a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a><a class="inner" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></td></tr></table></a><a class="inner" href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a><a class="inner" href="../menu/old_master.html" title="Image Map for detailed information">image map</a><a class="inner" href="../menu/bodies.html" title="fun with background images">fun backgrounds</a><a class="inner" href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a><a class="inner" href="../menu/em_images.html" title="em size images compared">em sized images</a></td></tr></table></a><a class="outer" href="index.html">MENUS<table class="first"><tr><td><a class="inner" href="spies.html" title="a coded list of spies">spies menu</a><a class="inner" href="vertical.html" title="a horizontal vertical menu">vertical menu</a><a class="inner" href="expand.html" title="an enlarging unordered list">enlarging list</a><a class="inner" href="enlarge.html" title="an unordered list with link images">link images</a><a class="inner" href="cross.html" title="non-rectangular links">non-rectangular</a><a class="inner" href="jigsaw.html" title="jigsaw links">jigsaw links</a><a class="inner" href="circles.html" title="circular links">circular links</a></td></tr></table></a><a class="outer" href="../layouts/index.html">LAYOUTS<table class="first"><tr><td><a class="inner" href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a><a class="inner" href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a><a class="inner" href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a><a class="inner" href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a><a class="inner" href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></td></tr></table></a><a class="outer" href="../boxes/index.html">BOXES<table class="first"><tr><td><a class="inner" href="../boxes/scrollbars.html" title="Left scroll bars">left scroll</a><a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">IE6 3px fix</a><a class="inner" href="../boxes/snazzy.html" title="Snazzy borders">snazzy borders</a><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a><a class="inner" href="../boxes/outside.html" title="Percentage PLUS pixels">% PLUS pixels</a><a class="inner" href="../boxes/minwidth.html" title="min-width for IE">IE min-width</a><a class="inner" href="../boxes/minheight.html" title="min-height for IE">IE min-height</a></td></tr></table></a><a class="outer" href="../mozilla/index.html">MOZILLA<table class="first"><tr><td><a class="inner" href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a><a class="inner" href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a><a class="inner" href="../mozilla/content.html" title="Using content:">content:</a><a class="inner" href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a><a class="inner" href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a><a class="inner" href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a><a class="inner" href="../mozilla/target.html" title="Target Practise">target practise</a><a class="inner" href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a><a class="inner" href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></td></tr></table></a><a class="outer" href="../ie/index.html">EXPLORER<table class="first"><tr><td><a class="inner" href="../ie/exampleone.html" title="Example one">example one</a><a class="inner" href="../ie/weft.html" title="Weft fonts">weft fonts</a><a class="inner" href="../ie/exampletwo.html" title="Vertical align">vertical align</a></td></tr></table></a><a class="outer" href="../opacty/index.html">OPACITY<table class="first"><tr><td><a class="inner" href="../opacty/colours.html" title="colour wheel">opaque colours</a><a class="inner" href="../opacty/picturemenu.html" title="a menu using opacity">opaque menu</a><a class="inner" href="../opacty/png.html" title="partial opacity">partial opacity</a><a class="inner" href="../opacty/png2.html" title="partial opacity II">partial opacity II</a></td></tr></table></a></div><div id="noniemenu"><div class="holder"><ul><li><a class="outer" href="../menu/index.html">DEMOS</a></li><li><a class="inner" href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li><li><a class="inner" href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li><li><a class="inner" href="../menu/form.html" title="Styling forms">styled form</a></li><li><a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><li><a class="inner second" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a><ul id="a3"><li><a class="inner" href="../menu/form.html" title="Styling forms">styled form</a></li><li><a class="inner" href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><li><a class="inner" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li></ul></li><li><a class="inner" href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li><li><a class="inner" href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li><li><a class="inner" href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li><li><a class="inner" href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li><li><a class="inner" href="../menu/em_images.html" title="em size images compared">em sized images</a></li></ul></div><div class="holder"><ul><li><a class="outer" href="index.html">MENUS</a></li><li><a class="inner" href="spies.html" title="a coded list of spies">spies menu</a></li><li><a class="inner" href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><li><a class="inner" href="expand.html" title="an enlarging unordered list">enlarging list</a></li><li><a class="inner" href="enlarge.html" title="an unordered list with link images">link images</a></li><li><a class="inner" href="cross.html" title="non-rectangular links">non-rectangular</a></li><li><a class="inner" href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><li><a class="inner" href="circles.html" title="circular links">circular links</a></li></ul></div><div class="holder"><ul><li><a class="outer" href="../layouts/index.html">LAYOUTS</a></li><li><a class="inner" href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li><li><a class="inner" href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li><li><a class="inner" href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li><li><a class="inner" href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li><li><a class="inner" href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li></ul></div><div class="holder"><ul><li><a class="outer" href="../boxes/index.html">BOXES</a></li><li><a class="inner" href="../boxes/scrollbars.html" title="Left scroll bars">left scroll</a></li><li><a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">IE6 3px fix</a></li><li><a class="inner" href="../boxes/snazzy.html" title="Snazzy borders">snazzy borders</a></li><li><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a></li><li><a class="inner" href="../boxes/outside.html" title="Percentage PLUS pixels">% PLUS pixels</a></li><li><a class="inner" href="../boxes/minwidth.html" title="min-width for IE">IE min-width</a></li><li><a class="inner" href="../boxes/minheight.html" title="min-height for IE">IE min-height</a></li></ul></div><div class="holder"><ul><li><a class="outer" href="../mozilla/index.html">MOZILLA</a></li><li><a class="inner" href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li><li><a class="inner" href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li><li><a class="inner" href="../mozilla/content.html" title="Using content:">content:</a></li><li><a class="inner" href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li><li><a class="inner" href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li><li><a class="inner" href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li><li><a class="inner" href="../mozilla/target.html" title="Target Practise">target practise</a></li><li><a class="inner" href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li><li><a class="inner" href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li></ul></div><div class="holder"><ul><li><a class="outer" href="../ie/index.html">EXPLORER</a></li><li><a class="inner" href="../ie/exampleone.html" title="Example one">example one</a></li><li><a class="inner" href="../ie/weft.html" title="Weft fonts">weft fonts</a></li><li><a class="inner" href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li></ul></div><div class="holder"><ul><li><a class="outer" href="../opacty/index.html">OPACITY</a></li><li><a class="inner" href="../opacty/colours.html" title="colour wheel">opaque colours</a></li><li><a class="inner" href="../opacty/picturemenu.html" title="a menu using opacity">opaque menu</a></li><li><a class="inner" href="../opacty/png.html" title="partial opacity">partial opacity</a></li><li><a class="inner" href="../opacty/png2.html" title="partial opacity II">partial opacity II</a></li></ul></div></div></div></div> <!-- end of head -->

Lots of code for such a small menu...

[scott100]

That's a neat trick, didn't know this could be done with pure css What's this <!--[if lte IE 6]> <![endif]--> Does css support conditionals

[Jonas]

They're actually not css conditionals, they're html comments with IF sentences that IE react to. If you'll notice, they're placed before and after <style></style> tags. Only IE will read the CSS between those <!--[if lte IE 6]> <![endif]-->. Advanced IE hacks I guess you could say beyond the usual * and _ hacks.

[Jammy_Stuff]

I've implimented this code into my website now as I thought it looked quite cool. Just a quick question though. How do I get it to the left of the site with the site on the right?

[scott100]

Is this what you mean? the menu was already on the left hand side for me

<head><style><!-- Paste this code into the CSS section of your HTML document  -->ul#menu {  width: 100px;  list-style-type: none;  border-top: solid 1px #b9a894;  margin: 0;  padding: 0;}ul#menu ol {  display: none;  text-align: right;  list-style-type: none;  margin: 0;  padding: 5px;}ul#menu li,   ul#menu a {  font-family: verdana, sans-serif;  font-size: 11px;  color: #785a3c;}ul#menu li {  border-bottom: solid 1px #b9a894;  line-height: 15px;}ul#menu ol li {  border-bottom: none;}ul#menu ol li:before {  content: "- ";}ul#menu a {  text-decoration: none;  outline: none;}ul#menu a:hover {  color: #539dbc;}ul#menu a.active {  color: #be5028;}</style><script><!-- Paste this code into an external JavaScript file named: expandingMenu.js  -->/* This script and many more are available free online atThe JavaScript Source :: [url="http://javascript.internet.com"]http://javascript.internet.com[/url]Created by: Travis Beckham :: [url="http://www.squidfingers.com"]http://www.squidfingers.com[/url] | [url="http://www.podlob.com"]http://www.podlob.com[/url]version date: 06/02/03 :: If want to use this code, feel free to do so,but please leave this message intact. (Travis Beckham) */// Node Functionsif(!window.Node){  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};}function checkNode(node, filter){  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());}function getChildren(node, filter){  var result = new Array();  var children = node.childNodes;  for(var i = 0; i < children.length; i++){    if(checkNode(children[i], filter)) result[result.length] = children[i];  }  return result;}function getChildrenByElement(node){  return getChildren(node, "ELEMENT_NODE");}function getFirstChild(node, filter){  var child;  var children = node.childNodes;  for(var i = 0; i < children.length; i++){    child = children[i];    if(checkNode(child, filter)) return child;  }  return null;}function getFirstChildByText(node){  return getFirstChild(node, "TEXT_NODE");}function getNextSibling(node, filter){  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){    if(checkNode(sibling, filter)) return sibling;  }  return null;}function getNextSiblingByElement(node){        return getNextSibling(node, "ELEMENT_NODE");}// Menu Functions & Propertiesvar activeMenu = null;function showMenu() {  if(activeMenu){    activeMenu.className = "";    getNextSiblingByElement(activeMenu).style.display = "none";  }  if(this == activeMenu){    activeMenu = null;  } else {    this.className = "active";    getNextSiblingByElement(this).style.display = "block";    activeMenu = this;  }  return false;}function initMenu(){  var menus, menu, text, a, i;  menus = getChildrenByElement(document.getElementById("menu"));  for(i = 0; i < menus.length; i++){    menu = menus[i];    text = getFirstChildByText(menu);    a = document.createElement("a");    menu.replaceChild(a, text);    a.appendChild(text);    a.href = "#";    a.onclick = showMenu;    a.onfocus = function(){this.blur()};  }}if(document.createElement) window.onload = initMenu;<!-- Paste this code into the HEAD section of your HTML document.     You may need to change the path of the file.  --></script></head><body<!-- Paste this code into the BODY section of your HTML document  --><ul id="menu">  <li>Menu Item 1    <ol>      <li><a href="#">Sub Item 1.1</a></li>      <li><a href="#">Sub Item 1.2</a></li>      <li><a href="#">Sub Item 1.3</a></li>    </ol>  </li>  <li>Menu Item 2    <ol>      <li><a href="#">Sub Item 2.1</a></li>      <li><a href="#">Sub Item 2.2</a></li>      <li><a href="#">Sub Item 2.3</a></li>    </ol>  </li>  <li>Menu Item 3    <ol>      <li><a href="#">Sub Item 3.1</a></li>      <li><a href="#">Sub Item 3.2</a></li>      <li><a href="#">Sub Item 3.3</a></li>    </ol>  </li>  <li>Menu Item 4    <ol>      <li><a href="#">Sub Item 4.1</a></li>      <li><a href="#">Sub Item 4.2</a></li>      <li><a href="#">Sub Item 4.3</a></li>    </ol>  </li>  <li>Menu Item 5    <ol>      <li><a href="#">Sub Item 5.1</a></li>      <li><a href="#">Sub Item 5.2</a></li>      <li><a href="#">Sub Item 5.3</a></li>    </ol>  </li></ul><div style="position:absolute;left:150px;top:0px">I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website I am the text of the website </div></body>

[Jammy_Stuff]

Is this what you mean? the menu was already on the left hand side for me

It is that code yes. What I mean is that I want to have the bar on the left and the page directly to the right.For example, it shows up like this:navnavnavnavpage page pagepage page pagepage page pagepage page pagepage page pageI want it to show up like this:nav page page pagenav page page pagenav page page pagenav page page page-----page page pageIs there a way to do it?