jquery - vertical menu with horizontal -
jquery - vertical menu with horizontal -
i have vertical menu opens sub menu using jquery. there way create submenu open in same line this:
item item subitem1 subitem2 item
this code: css:
#menu-main { margin: 0; padding: 0; position:absolute; top:107px;} #menu-main li{ list-style: none; position:relative; height:25px; margin:0 2px; padding:20px 5px 0 10px; color:#ffffff; font-weight:bold; font-size:36px; text-transform:uppercase; clear: left;} #menu-main li a{ background: #000; text-decoration: none; padding: 1px 1px; z-index:1001;} #menu-main li a:link, #menu-main li a:visited, #menu-main li a:active { text-decoration:none; color:#ffffff; } #menu-main li a:hover {background: #000; color: white; padding: 1px 6px;} #menu-main li ul{list-style: none; none; margin: 0; padding: 0; display:none; float:left; z-index:1002; position:absolute; left:100%; top:0px;} #menu-main li ul li {float:left; display:inline;} #menu-main li ul li a:hover {display:inline-block; background: #000; padding: 0px 0px;} #menu-main li ul li a:link, #menu-main li ul li a:visited, #menu-main li ul li a:active { color:#0cf;} #menu-main li ul li a:hover{ opacity:1;} #menu-main > li{ margin-left:0px;}
javascript:
$(document).ready(function(){ // menu script var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('display', 'inline-block');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('display', 'none');} function jsddm_timer() { closetimer = window.settimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.cleartimeout(closetimer); closetimer = null;}} $('#menu-main > li').bind('mouseover', jsddm_open) $('#menu-main > li').bind('mouseout', jsddm_timer) document.onclick = jsddm_close; });
thanks in advance help
jquery css menu
Comments
Post a Comment