html - My CSS fails my javascript dropdown-menu slide effect -
so if want see menu go here.
since know you'll want source, here's css:
* { margin: 0px; } #menu-container ul, #menu-container li, #menu-container span, #menu-container { margin: 0; padding: 0; position: relative; } #menu-container { text-align:center; height: 49px; border-radius: 0px 0px 0 0; -moz-border-radius: 0px 0px 0 0; -webkit-border-radius: 0px 0px 0 0; background: #141414; background:url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaxcaiaaacudvrzaaaaa3ncsvqicajb4u/gaaaaleleqvqimwmwmrji+v//pxmdw3+m//8zopr/qbgdehuxgloeyswhxg8r5gaadvpfoj3db5oaaaaasuvork5cyii=) 100% 100%; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); border-bottom: 2px solid #0fa1e0; } #menu-container:after, #menu-container ul:after { content: ''; display: block; clear: both; } #menu-container { background: #141414; background:url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaxcaiaaacudvrzaaaaa3ncsvqicajb4u/gaaaaleleqvqimwmwmrji+v//pxmdw3+m//8zopr/qbgdehuxgloeyswhxg8r5gaadvpfoj3db5oaaaaasuvork5cyii=) 100% 100%; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); color: #ffffff; display: inline-block; margin-right: -4px; font-family: helvetica, arial, verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none; } #menu-container ul { list-style: none; } #menu-container > ul > li { display: inline-block; margin-right: -4px; } #menu-container > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0fa1e0; margin-left: -10px; } #menu-container > ul > li:first-child > { border-radius: 0px 0 0 0; -moz-border-radius: 0px 0 0 0; -webkit-border-radius: 0px 0 0 0; } #menu-container > ul > li:last-child > { border-radius: 0 0px 0 0; -moz-border-radius: 0 0px 0 0; -webkit-border-radius: 0 0px 0 0; } #menu-container > ul > li.active > { box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; background: #070707; background:url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaxcaiaaacudvrzaaaaa3ncsvqicajb4u/gaaaalkleqvqimwnqu9nh+v//pxmdw3+m//8zknj/mrgyihxy5f//z0bsi18e2tws5qg4mgb54hl+maaaaabjru5erkjggg==) 100% 100%; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); } #menu-container > ul > li:hover > { background: #070707; background:url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaxcaiaaacudvrzaaaaa3ncsvqicajb4u/gaaaalkleqvqimwnqu9nh+v//pxmdw3+m//8zknj/mrgyihxy5f//z0bsi18e2tws5qg4mgb54hl+maaaaabjru5erkjggg==) 100% 100%; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; } #menu-container .has-sub { z-index: 1; } #menu-container .has-sub:hover > ul { display: block; } #menu-container .has-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; } #menu-container .has-sub ul li { *margin-bottom: -1px; } #menu-container .has-sub ul li { background: #0fa1e0; border-bottom: 1px dotted #6fc7ec; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; } #menu-container .has-sub ul li:hover { background: #0c7fb0; } #menu-container .has-sub .has-sub:hover > ul { display: block; } #menu-container .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #menu-container .has-sub .has-sub ul li { background: #0c7fb0; border-bottom: 1px dotted #6db2d0; } #menu-container .has-sub .has-sub ul li a:hover { background: #095c80; } #menu-container { -moz-box-shadow: 0 0 10px #888; -webkit-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; } li { font-size: 0 } and javascript:
var menu=function(){ var t=15,z=50,s=6,a; function dd(n){this.n=n; this.h=[]; this.c=[]} dd.prototype.init=function(p,c){ a=c; var w=document.getelementbyid(p), s=w.getelementsbytagname('ul'), l=s.length, i=0; for(i;i<l;i++){ var h=s[i].parentnode; this.h[i]=h; this.c[i]=s[i]; h.onmouseover=new function(this.n+'.st('+i+',true)'); h.onmouseout=new function(this.n+'.st('+i+')'); } } dd.prototype.st=function(x,f){ var c=this.c[x], h=this.h[x], p=h.getelementsbytagname('a')[0]; clearinterval(c.t); c.style.overflow='hidden'; if(f){ p.classname+=' '+a; if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetheight; c.style.height=0} if(c.mh==c.offsetheight){c.style.overflow='visible'} else{c.style.zindex=z; z++; c.t=setinterval(function(){sl(c,1)},t)} }else{p.classname=p.classname.replace(a,''); c.t=setinterval(function(){sl(c,-1)},t)} } function sl(c,f){ var h=c.offsetheight; if((h<=0&&f!=1)||(h>=c.mh&&f==1)){ if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'} clearinterval(c.t); return } var d=(f==1)?math.ceil((c.mh-h)/s):math.ceil(h/s), o=h/c.mh; c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')'; c.style.height=h+(d*f)+'px' } return{dd:dd} }(); and html:
<div id='menu-container'> <ul id='menu' class="menu"> <li class='active'><a href='/'><span>home</span></a></li> <li class='has-sub'><a href='/games/'><span>games</span></a> <ul> <li><a href='/games/dota-2/'><span>dota 2</span></a></li> <li><a href='/games/cs-go/'><span>cs: go</span></a></li> <li><a href='/games/css/'><span>cs: source</span></a></li> <li><a href='/games/terraria/'><span>terraria</span></a></li> <li class='last'><a href='/games/minecraft/'><span>minecraft</span></a></li> </ul> </li> <li class='has-sub'><a href='/about.html'><span>about us</span></a> <ul> <li><a href='http://www.youtube.com/user/'><span>our youtube channel</span></a></li> <li><a href='/faq-list.html'><span>our faqs/q&a list</span></a></li> <li><a href='/feed-news.rss'><span>our rss feed</span></a></li> <li><a href='/wiki/'><span>our wiki</span></a></li> <li><a href='#'><span>our blog</span></a></li> <li class='last'><a href='/privacy.html'><span>privacy policy</span></a></li> </ul> </li> <li class='has-sub last'><a href='/contact.html'><span>contact us</span></a> <ul> <li class='last'><a href='/forums/'><span>forums</span></a></li> </ul> </li> </ul> </div> <script type="text/javascript"> var menu=new menu.dd("menu"); menu.init("menu","menuhover"); </script> after added "text-align:center;" css, when hover menu slide animation goes in down direction, goes right too. how make go down only? want when hover on menu slide bottom not right.
you have negative margin being inherited links in menu [#menu-container a]. menu items end 4 pixels wider menu. can reset margin 0 adding more specific selector this:
#menu-container .has-sub ul li { margin-right: 0 } 
Comments
Post a Comment