Folks,
I need help with a simple vertical menu that I want to transform into an ajax-type menu.
Currently, it is a menu with second-level submenus. Clicking a parent menu reloads the
page to reveal the submenus. What I want to do is to have a parent menu slidedown (onclick)
without forcing a page reload. The css for the menu below:
#navcontainer {<br /> width: 150px;<br /> border-right: 1px solid #000;<br /> padding: 0 0 1em 0;<br /> margin-bottom: 1em;<br /> font-family: ’Times New Roman’, Arial, sans-serif;<br /> font-size: 90%;<br /> background-color: #90bade;<br /> color: #333;<br /> }<br /> <br /> #navcontainer ul {<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> border: none;<br /> }<br /> <br />/* turn off level 2 folders (sub menu items) */<br />#navcontainer ul ul {<br /> display: none;<br />}<br /><br />/* show the items in the level 2 folder path when you are there*/<br />#navcontainer li.here ul {<br /> display: block;<br /> margin:0 0 0 20px;<br />}<br /><br /> #navcontainer li {<br /> border-bottom: 1px solid #90bade;<br /> margin: 0;<br /> }<br /> <br /> #navcontainer li a {<br /> display: block;<br /> padding: 5px 5px 5px 0.5em;<br /> border-left: 10px solid #1958b7;<br /> border-right: 10px solid #508fc4;<br /> background-color: #2175bc;<br /> color: #fff;<br /> text-decoration: none;<br /> width: 100%;<br /> }<br /> <br /> html>body #navcontainer li a {<br /> width: auto;<br /> }<br /> <br /> #navcontainer li a:hover {<br /> border-left: 10px solid #1c64d1;<br /> border-right: 10px solid #5ba3e0;<br /> background-color: #2586d7;<br /> color: #fff;<br /> }
TIA
