I am trying to build an accordian menu where the first link can also be a hyperlink and not just a drop down.
Here is an example of what I am after.
The visitor can click on the text to go to a page or they can click on the + - to get to other menu items.
I have searched and have only found where the initial text makes the menu drop down. I havent found one like my example.
Any help would be appreciated because I have been searching for hours.
I was able to get something working but now the ( + - ) are below the text, as seen in the image. I want them to be to the left of the text. Any ways to do that? Another issue I notice that if you click on the + next to the text, it goes to the link as well as drops down the sub menu.
HTML
<ul class="topnav">
<li><a href="#">UNICURE SPRAYBOOTHS</a>
<ul>
<li><a href="#">Automotive Booths</a>
<ul>
<li><a href="#">Heated Spraybooths</a>
<ul>
<li><a href="#">1000 Series</a></li>
<li><a href="#">1003 Series</a></li>
<li><a href="#">1004 Series</a></li>
<li><a href="#">1005 Series</a></li>
<li><a href="#">1006 Series Downdraft Side Exhaust Spraybooth</a></li>
<li><a href="#">1007 Series Downdraft Pit Model Exhaust Spraybooth</a></li>
<li><a href="#">3006 / 3007 Series</a></li>
<li><a href="#">ES300SDD - BUY NOW</a></li>
<li><a href="#">ES300DSE - BUY NOW</a></li>
</ul>
</li>
<li><a href="#">Non-Heated Spraybooths</a>
<ul>
<li><a href="#">UE2489CD</a></li>
<li><a href="#">UE180CD</a></li>
<li><a href="#">UE2489SDD</a></li>
<li><a href="#">UE2489DDDF</a></li>
<li><a href="#">UE2489DSE</a></li>
<li><a href="#">ES100CD - BUY NOW</a></li>
<li><a href="#">ES100SDD - BUY NOW</a></li>
<li><a href="#">ES200SDD - BUY NOW</a></li>
<li><a href="#">ES200DSE - BUY NOW</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Industrial/Truck Spraybooths</a>
<ul>
<li><a href="#">1000T</a></li>
<li><a href="#">UT2498CD</a></li>
<li><a href="#">UT2710SDD</a></li>
<li><a href="#">UE2489DDDF</a></li>
<li><a href="#">UT2410DD</a></li>
</ul>
</li>
<li class="nolink"><a href="#">Ultimate Production Producer</a></li>
<li><a href="#">Paint Mixing Room</a>
<ul>
<li><a href="#">ES8X8MR - BUY NOW</a></li>
<li><a href="#">UMR-456</a></li>
</ul>
</li>
<li><a href="#">Prep Stations / Cut-In Spraybooths</a>
<ul>
<li><a href="#">812 PREP</a></li>
<li><a href="#">1015 PREP</a></li>
<li><a href="#">1520 PREP</a></li>
<li><a href="#">UE180PB</a></li>
<li><a href="#">EX9000</a></li>
<li><a href="#">EX11000</a></li>
</ul>
</li>
<li class="nolink"><a href="#">SpectraTek</a></li>
<li><a href="#">Waterborne Products</a>
<ul>
<li><a href="#">UniCure Twister</a></li>
<li><a href="#">UniCure Twister Plus</a></li>
<li><a href="#">JETAIR Spraybooth Fans</a></li>
<li><a href="#">WaterWin - BUY NOW</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">COLLISION EQUIPMENT</a>
<ul>
<li class="active"><a href="#">Chief Automotive Technologies</a>
<ul>
<li><a href="#">Goliath</a></li>
<li><a href="#">Titan 360</a></li>
<li><a href="#">Impulse E/VHT</a></li>
<li><a href="#">E-Z Express Bench</a></li>
<li><a href="#">Measuring</a></li>
</ul>
</li>
<li><a href="#">CEG</a>
<ul>
<li><a href="#">Touch</a></li>
</ul>
</li>
<li><a href="#">Grabber Frame Racks</a>
<ul>
<li><a href="#">PaceSetter</a></li>
<li><a href="#">Winner</a></li>
<li><a href="#">G-Force</a></li>
<li><a href="#">ProLine</a></li>
</ul>
</li>
<li><a href="#">Spot Welders</a>
<ul>
<li><a href="#">Pro-Spot</a>
<ul>
<li><a href="#">I-4</a></li>
<li><a href="#">PR-2000</a></li>
</ul>
</li>
<li><a href="#">AMH</a></li>
</ul>
</li>
<li class="nolink"><a href="#">Lightning 4 - BUY NOW</a></li>
</ul>
</li>
<li class="nolink"><a href="#">WaterWin - BUY NOW</a></li>
<li class="nolink"><a href="#">E-Spray - BUY NOW</a></li>
<li class="nolink"><a href="#">Lightning 4 - BUY NOW</a></li>
<li class="nolink"><a href="#">Filters - BUY NOW</a></li>
<li class="nolink"><a href="#">Lighting - BUY NOW</a></li>
<li class="nolink"><a href="#">Shop Heaters - BUY NOW</a></li>
<li class="nolink"><a href="#">Ductwork - BUY NOW</a></li>
<li class="nolink"><a href="#">Accessories - BUY NOW</a></li>
<li class="nolink"><a href="#">Miscellaneous - BUY NOW</a></li>
<li class="nolink"><a href="#">Used Equipment - BUY NOW</a></li>
</ul>
CSS
<style>
.topnav {
width: 500px;
padding: 40px 28px 25px 0;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
m
}
ul.topnav {
padding: 0;
margin: 0;
font-size: 1em;
line-height: 0.5em;
list-style: none;
}
ul.topnav li {}
ul.topnav li a {
line-height: 10px;
font-size: 11px;
padding: 5px 5px;
color: #800a31;
display: block;
text-decoration: none;
font-weight: bolder;
}
ul.topnav li a:hover {
color:#800a31;
text-decoration:underline;
}
ul.topnav ul {
margin: 0;
padding: 0;
display: none;
}
ul.topnav ul li {
margin: 0;
padding: 0;
clear: both;
}
ul.topnav ul li a {
padding-left: 10px;
font-size: 12px;
font-weight: normal;
outline:0;
}
ul.topnav ul li a:hover {
color:#800a31;
}
ul.topnav ul ul li a {
color:silver;
padding-left: 30px;
}
ul.topnav ul ul li a:hover {
color:#800a31;
}
ul.topnav span{
float:left;
padding-right:5px;
}
li.nolink {
background: url('menu_tree_node.gif') no-repeat left center;
padding-left: 7px;
}
</style>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scriptbreaker-multiple-accordion-1.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$(".topnav").accordion({
accordion:false,
speed: 500,
closedSign: '[+]',
openedSign: '[-]'
});
});
</script>
Javascript
/*
* jQuery UI Multilevel Accordion v.1
*
* Copyright (c) 2011 Pieter Pareit
*
* http://www.scriptbreaker.com
*
*/
//plugin definition
(function($){
$.fn.extend({
//pass the options variable to the function
accordion: function(options) {
var defaults = {
accordion: 'true',
speed: 300,
closedSign: '[+]',
openedSign: '[-]'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
//Assign current element to variable, in this case is UL element
var $this = $(this);
//add a mark [+] to a multilevel menu
$this.find("li").each(function() {
if($(this).find("ul").size() != 0){
//add the multilevel sign next to the link
$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
//avoid jumping to the top of the page when the href is an #
if($(this).find("a:first").attr('href') == "#"){
$(this).find("a:first").click(function(){return false;});
}
}
});
//open active level
$this.find("li.active").each(function() {
$(this).parents("ul").slideDown(opts.speed);
$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
});
$this.find("li a").click(function() {
if($(this).parent().find("ul").size() != 0){
if(opts.accordion){
//Do nothing when the list is open
if(!$(this).parent().find("ul").is(':visible')){
parents = $(this).parent().parents("ul");
visible = $this.find("ul:visible");
visible.each(function(visibleIndex){
var close = true;
parents.each(function(parentIndex){
if(parents[parentIndex] == visible[visibleIndex]){
close = false;
return false;
}
});
if(close){
if($(this).parent().find("ul") != visible[visibleIndex]){
$(visible[visibleIndex]).slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").html(opts.closedSign);
});
}
}
});
}
}
if($(this).parent().find("ul:first").is(":visible")){
$(this).parent().find("ul:first").slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
});
}else{
$(this).parent().find("ul:first").slideDown(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
});
}
}
});
}
});
})(jQuery);
Image of what I mean