[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y ] [Home]
4chanarchives logo
JavaScript Navbar
Images are sometimes not shown due to bandwidth/network limitations. Refreshing the page usually helps.

You are currently reading a thread in /g/ - Technology

Thread replies: 6
Thread images: 1
File: learn-javascript.png (17 KB, 344x390) Image search: [Google]
learn-javascript.png
17 KB, 344x390
So I'm coding this website and I've made the navbar disappear as I scroll down and appear again as I scroll up, but I also want it to appear as the mouse pointer approaches. You can take Mark's Newson website as an example.
I know it has to do with mouseenter() and mouseleave() but I can't get it to work.
>>
Post the code
>>
This is the HTML of the menu

<ul id="menu" class="header" >
<li id="TUAMAMMA"><strong>TUA MAMMA</strong></li>
<li><a href="#sfondo"><strong>Home</strong></a></li>
<li><a href="#projects"><strong>Projects</strong></a>
<ul>
<li><a href="pages/product.html">Product</a></li>
<li><a href="pages/visual.html">Visual</a></li>
<li><a href="pages/web.html">Web</a></li>
</ul>
</li>
<li><a href="#aboutme"><strong>About</strong></a></li>
<li><a href="#contact"><strong>Contact</strong></a></li>
</ul>
>>
CSS of the menu

#menu{
display:block;
padding:0 25px;
color:#fff;
text-align:right;
position:fixed;
z-index:6;
background-color:rgba(146,0,127,0.72);
height:100px;
width:100%;
font-family:"Gotham", Helvetica Neue, Helvetica, Arial, sans-serif;
min-width:1200px;
transition:all 0.5s ease;
>>
the rest of the CSS for the menu

#menu a{
color:#fff;
padding:40px 60px;
display:block;
white-space:nowrap;
/*z-index:2;*/
}

#menu a:hover{
color:#000000;
font-size:16px;
text-align:center;
transition-duration:0.2s;
}

#menu ul{
padding:0;
margin:0;
}


#menu a:link, #menu a:visited{
transition:0.3 s;
}


#menu ul, #menu li{
position:relative;
display:inline-block;
}

#menu li{
display:inline-block;
vertical-align:top;
height:150%;
}

#menu li ul li a{
padding:10px 10px;
background-color:#000000;
color:#fff;
display:block;
transition-duration:0.3s;
}

#menu li ul li a:hover{
color:#be23c4;
display:block;
}

#menu li ul{
display:none;
position:absolute;
z-index:1;
top:100px;
left:0;
width:100%;
text-align:center;
white-space:nowrap;
}

#menu li:hover ul{
display:block;
/*position:absolute;*/
}

#menu li ul li{
display:block;
/*position:absolute; noooooooooooooooooooooooooooooon lo devo fare mai piĆ¹*/
text-align:center;
}
>>
JS for the menu

function coordinates (){
var pagePosition = $("html,body").scrollTop();
$("#coordinates").html(pagePosition);
var pageH = $(window).height();
if (pagePosition <= pageH){
$("#menu").fadeIn(200);
} else {
$("#menu").fadeOut(200);
}

}

$(window).scroll(
{
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
$(".sidebar em").text("Up"); /* optional for demo */
$(".header").show();
} else {
$(".sidebar em").text("Down");
$(".header").hide();
}
this.previousTop = currentTop;
});
Thread replies: 6
Thread images: 1

banner
banner
[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y] [Home]

All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.
If a post contains personal/copyrighted/illegal content you can contact me at [email protected] with that post and thread number and it will be removed as soon as possible.
DMCA Content Takedown via dmca.com
All images are hosted on imgur.com, send takedown notices to them.
This is a 4chan archive - all of the content originated from them. If you need IP information for a Poster - you need to contact them. This website shows only archived content.