tweenpath Wrote:This is very ineresting with the Sub-menu!Would you please share with us- how did you do it using JQuery? I'd appreciate if you help me out with a step by step procedure.Thanks in advance.
Hi..
I for a submenu used plugin " Zegnat’s multi-level navigation. ":
http://get-simple.info/forum/viewtopic.php?id=721, but it creates only structure of the menu.
Work CSS is required further. I have made it so:
CSS.
Code:
.menu {
list-style: none;
width: 680px;
height: 24px;
margin: 0;
padding: 0 20px 0 20px;
font: 13px/24px Complex, Georgia, Times New Roman, Times, serif;
}
.menu li {
float: left;
display: block;
position: relative;
z-index: 500;
margin: 0;
}
.menu li a {
display:block;
height:24px;
text-decoration:none;
display: block;
width: 110px;
padding: 0 13px;
color: #585858;
text-align: center;
}
.menu li a:hover {
color: #AC4B49;
}
.menu li.active a {
color: #AC4B49;
}
.menu ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
.menu ul li {
width:110px;
font: 12px/22px Complex, Georgia, Times New Roman, Times, serif;
float:left;
}
.menu ul a {
display:block;
height:24px;
padding: 0 13px;
color: #585858;
background: #E2E2E2;
border-top: 1px solid #FDFDFC;
}
But. It not correctly works in IE7 and IE6. IE7 the property <z-index> does not understand and the menu was hidden under the image. IE6 understands property <hover> only for <a> and there menu did not work.
Therefore I used JQuery. Has connected library:
Code:
< script type = "text/javascript" src = " <? php get_theme_url ();? > /js/jquery-1.4.2.min.js " > </script>
( Plugin jquery-1.4.2.min.js has put in a folder js in a subject) and between <head> has inserted the script:
Code:
< script type = "text/javascript" >
$ (document) .ready (function () {
$ ('.menu li ') .hover (
function () {
// show its submenu
$ ('ul', this) .slideDown (100);
},
function () {
// hide its submenu
$ ('ul', this) .slideUp (100);
}
);
});
</script>
That's all cunnings.
Sorry. I could not answer quickly.