This is exactly what I did on my site: n0wq.com
The base code that I used was from:
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm
Modified the CSS to do what I need it to do, and added the Ajaxify plugin
to load the main content section.
NOTE: make sure in the submenuheader class, you keep the href="" ...
otherwise
the menu won't open properly.
HTML:
<div class="glossymenu">
<a class="menuitem" href="#">Link</a>
<a class="menuitem ajaxify" href="#">Link</a>
<a class="menuitem submenuheader" href="">Header</a>
<div class="submenu">
<ul>
<li><a class="ajaxify" href="#">Link</a></li>
<li><a class="ajaxify" href="#">Link</a></li>
<li><a class="ajaxify" href="#">Link</a></li>
</ul>
</div> <!-- submenu -->
<a class="menuitem submenuheader" href="">Header</a>
<div class="submenu">
<ul>
<li><a class="ajaxify" href="#">Link</a></li>
<li><a class="ajaxify" href="#">Link</a></li>
</ul>
</div> <!-- submenu -->
<a class="menuitem submenuheader" href="">Validation</a>
<div class="submenu">
<ul>
<li><a href="#" rel="external"></a></li>
<li><a href="#" rel="external"></a></li>
</ul>
</div> <!-- glossymenu -->
CSS:
.glossymenu {
border-bottom: 1px solid gray;
border-right: 1px solid gray;
border-top: 1px solid white;
color: #000;
font-family: tahoma, sans-serif;
font-variant: small-caps;
width: 125px;
}
.glossymenu a.menuitem {
color: #888;
cursor: pointer;
display: block;
font-weight: normal;
padding-left: 2px;
width: 123px;
position: relative;
text-decoration: none;
}
.glossymenu a.menuitem:hover {
color: #000;
font-weight: bold;
}
.glossymenu a.menuitem .statusicon {
position: absolute;
top: 4px;
right: 0;
border: none;
}
.glossymenu div.submenu ul li a {
color: gray;
display: block;
font-size: 12px;
padding-left: 8px;
text-decoration: none;
}
.glossymenu div.submenu ul li a:hover {
color: black;
text-decoration: underline;
width: auto;
}
iceangel89 wrote:
> what can i do to allow users to click on the accordion header to
> navigate to a page?
>
> the reason is, i am using accordions for my navigation. for some of
> the pages, there are subpages so an accordian is used. but for others,
> there are no subpages and i want users to be able to click the
> "header" of the pane to navigate to some page
> ------------------------------------------------------------------------
>
>
> No virus found in this incoming message.
> Checked by AVG - www.avg.com
> Version: 8.0.238 / Virus Database: 270.11.26/2020 - Release Date: 03/24/09
> 09:19:00
>
>
