Search jQuery

jQuery Forum

Using jQuery UI

yangwulon..

looking for a jquery horizontal menu bar

in Using jQuery UI • 4 months ago

I am looking for a jquery horizontal menu bar， could anyone recommend some good one to me?

Replies(1)

oleg.net

Re: looking for a jquery horizontal menu bar

4 months ago

I create horizontal menu bar from list of modified jQuery UI's Accordions. Each Accordion contains only one section. The Menu inserted into the Accordion section. From Accordion removes some styles, i.e. corners and borders. Initials Accordion`s parametrs are collapsible: true, active: false

<div style="float:left;">
<accordion id="accUprav" class="accUpr">
<h3><a href="#">Menu 1</a></h3>
<div>
<ul id="mnuUpr">
<li><a href="#">Tools</a>
<ul>
<li><a href="#">3.1jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
<li><a href="#">Special</a></li>
</ul>
</div>
</accordion>
</div>
<div style="float:left;">
<accordion id="accOptions" class="accOpt">
<h3><a href="#">Menu 2</a></h3>
<div>
<ul id="mnuOpt">
<li><a href="#">Tools</a>
<ul>
<li><a href="#">3.1jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
<li><a href="#">Special</a></li>
</ul>
</div>
</accordion>
</div>
<script>
$("accordion ul").css({width:"145px"});
$("accordion").accordion({ collapsible: true, active: false });
$("accordion div").removeClass("ui-accordion-content ui-corner-all ui-corner-bottom ui-widget-content");
$("#mnuUpr").menu({position: { my: "left top", at: "right+3 top" }});
$("#mnuUpr").hover(function(){},function(){$("#accUprav").accordion( "option", "active", "none");});
</script>

Top Reply

Response title

Attachments

jQuery Forum

looking for a jquery horizontal menu bar

Replies(1)

Re: looking for a jquery horizontal menu bar

Statistics

Tags

Actions

Related Posts