[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

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

[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.
If a post contains illegal content, please click on its [Report] button and follow the instructions.
This is a 4chan archive - all of the content originated from them. If you need information for a Poster - you need to contact them.
This website shows only archived content and is not affiliated with 4chan in any way.
If you like this website please support us by donating with Bitcoin at 1XVgDnu36zCj97gLdeSwHMdiJaBkqhtMK