On 26 janv. 07, at 6:14, Gerry Danen wrote:
Looked at the tabbed menus but that's not what I'm looking for. I like
a vertical set of menus, that when clicked, shows sub-menus. I've seen
it, want it, but can't find it again... :(
Hello Gerry,
I've implemented something that looks like what you want. I needed a
basic structure, so used a simple nested list :
<ul id="liens">
<li><a href="#"><img src="images/liens.gif" alt="Liens" width="154"
height="15" title="click here to open the links menu" /></a>
<ul class="deroulant">
<li><a href="#" class="pliant">Header1</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#" class="pliant">Header 2</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#" class="pliant">Header 3</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#" class="pliant">Header 4</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#" class="pliant">Header 5</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
The menu is hidden, with only a trigger image visible (a short tab, in
my case). When clicked, the tab will be replaced by the whole menu,
appearing a a hole in the normal content of the page. CSS is:
#liens {
position: absolute;
right: 0;
top: 0;
width: 154px;
height: 118px;
text-align: left;
padding: 27px 0 0 46px;
background: url(../images/fondhaut.gif) 0 0 repeat-x;
}
.deroulant {
display: none;
width: 154px;
padding: 5px 0;
margin: -2px 0 0;
background: url(../images/liens_bg.gif) 0 0 repeat-y;
font-weight: bold;
font-size: 1.1em;
}
.deroulant li {
margin: 4px 0;
text-align: left;
}
.bas { margin-top: -1px; }
.deroulant li ul {
margin: 2px 0 10px;
padding: 2px 2px 2px 0;
color: #484848;
background: url(../images/sous_menu_bg.png) 0 0 repeat;
border-top: 1px solid #c1c2c5;
border-bottom: 1px solid #c1c2c5;
font-size: .9em;
}
.deroulant a, .deroulant a:visited {
text-decoration: none;
color: #484848;
display: block;
margin: 1px 0 0 5px;
}
.deroulant a:hover {
font-style: italic;
color: #000;
padding-left: 5px;
border-left: 1px solid #c1c2c5;
}
As for jquery stuff, i'm using the accordion plugin
<script src="js/accordion.js" type="text/javascript"></script>
And the relevant jquery calls are:
// Needs to be moved on top of the content
$("#liens").css("z-index","50");
// showing the menu when trigger image is clicked
$("#liens img").click(function() {
// Change the trigger image
$(this).attr("src","images/liens_over.gif");
// Add a rounded-corner image below the menu on the fly, just for
fanciness
$(".deroulant").after("<li class='bas'><img src='images/
liens_bas.png' alt='' width='154' height='10' /></
li>").css("display","block").slideDown("fast");
});
// hiding the menu when mouse leaves it
$(".deroulant").hover(function() {}, function() {
// Remove the bottom image
$("#liens .bas").remove();
// roll the menu back up slowly
$(".deroulant").slideUp("slow",function(){
// Hide it
$(this).css("display","none");
// Restore the trigger image
$("#liens img").attr("src","images/liens.gif");
});
});
// initiate the aaccordion behavior
$(".deroulant").Accordion({
header: 'a.pliant',
active: 'false'
});
This works quite beautifully, although i admit i haven't tested on IE
(!), which is fortunately not a target browser in the context of the
project i'm working on.
Also, keep in mind that i'm new to this (too), and there may be plenty
of infinitely more elegant ways to do this. Yet it does work; here are
a couple of images out of context (i'm hoping it's not bad practice to
post images to the list?)
Best,
--
sholby
courriel : [EMAIL PROTECTED]
web : http://www.sholby.net/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
