How to Create a “Stay-On-Top” Menu with CSS3 and jQuery

Posted in Tutorials4 years ago • Written by 26 Comments

Create Stay-On-Top Nagging Menu with CSS3 and jQueryIn the project I was working on recently I had a chance to experiment with CSS3 and jQuery. You know CSS3, right? It’s that thing that makes all those beautiful and amazing things on the web and makes Flash want to run away and hide. Yeah, that CSS3. And I’m more than sure you have heard about jQuery. If you haven’t, well, it’s a kind of library where you cannot borrow any books, but it allows you to do other stuff and bring some additional magic to the web.

Anyways, I ended up mixing those two which resulted in this cool effect. I found it really useful and hope you will too, as you can use in on almost every website that has some sort of menu – and let’s face it, most do.

The video below will show you what you’ll be making and how to do that. Unfortunately, since I had only 5 minutes for this, I focused only on the jQuery part. Everything else you need for this you will find in the tutorial below. You can also hit the “Live Demo” button to see the final effect yourself.

NOTE: To fully enjoy all of this extravaganza, you need to see it in a browser based on WebKit engine – Safari and Chrome being the best ones. Current version of Firefox doesn’t fully support it, not to mention Opera, or IE.

Check out Live Demo for Create Stay-On-Top Nagging Menu with CSS3 and jQuery
Check out Live Demo for Create Stay-On-Top Nagging Menu with CSS3 and jQuery

Table of Contents

  1. What’s Needed
  2. All the HTML Stuff
  3. Importing jQuery and Nagging Menu Script
  4. Let’s Make a CSS Soup
  5. CSS3 Extravaganza
  6. jQuery Magic
  7. After Word

What’s Needed

Just four things and we’re good to go:

  • index.html
  • style.css
  • nagging-menu.js
  • you

HTML markup will be just copy-and-paste thing, as it’s not really important here. Instead, we will dig little deeper into CSS3 and jQuery.

All the HTML Stuff

Create index.html and paste all of this in:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Create Stay-On-Top Nagging Menu with CSS3 and jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header"></div>

<div id="navi">
	<div id="menu" class="default">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">CSS</a></li>
			<li><a href="#">Design</a></li>
			<li><a href="#">Development</a></li>
			<li><a href="#">Freebies</a></li>
			<li><a href="#">Inspiration</a></li>
			<li><a href="#">Resources</a></li>
			<li><a href="#">Tutorials</a></li>
			<li><a href="#">WordPress</a></li>
		</ul>
	</div><!-- close menu -->
</div><!-- close navi -->

<div id="content">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</div><!-- content -->
</body>
</html>

Depending on your screen resolution, you will need a lot of text so…

IMPORTANT: Keep adding paragraphs with “lorem ipsum” until the menu disappears from your sight entirely when you scroll down to the very bottom of the page.

Importing jQuery and Nagging Menu Script

In your index.html file, just before the closing </body> tag, paste those two lines:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script>

Bravo ;D!

Let’s Make a CSS Soup

This is just the basic CSS, so create style.css file and paste all of this in:

body {
	background: #efefef;
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;
	font: normal 13px Verdana, sans-serif;
	color: #222;
}

#navi {
	height: 50px;
	margin-top: 50px;
}

#menu {
	line-height: 50px;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#content {
	width: 750px;
	margin: 0 auto;
	margin-bottom: 25px;
	padding: 30px 0;
	text-align: left;
}

ul {
	padding: 0;
}

ul li {
	list-style-type: none;
	display: inline;
	margin-right: 15px;
}

ul li a {
	color: #fff;
	text-decoration: none;
	padding: 3px 7px;
}

ul li a:hover {
	background: #01458e;
	color: #ff0;
}

.default {
	width: 850px;
	height: 50px;
}

.fixed {
	position: fixed;
	top: -5px;
	left: 0;
	width: 100%;
}

The .default and .fixed classes are very important to us. They will change the look and position of our menu; the former is responsible for how the menu looks at the beginning and for its position in the browser window, the latter is responsible for where the menu goes after we kick it out from its original position and how it looks then.

CSS3 Extravaganza

Now for the fun part :)! Let’s go from the top to the bottom through our CSS soupe and add some CSS3 sugar accordingly:

Step 1: Spicing Up #menu

We’ll add a subtle gradient and rounded corners.

The gradient for browsers based onWebKit engine:

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));

Simple as it is. We’re adding linear gradient, going from the top to the bottom vertically. Our gradient consists of three colors, color-stop simply tells the browser where that particular color should stop and the next one begin.

The gradient for browsers based on Gecko engine:

	background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);

The same as above, only we don’t have to be specific about where each color stops, because it looks great as it is already.

Let’s add rounded corners, first for browsers with WebKit engine:

	-webkit-border-radius: 5px;

That’s really self explaining. The syntax for browsers with Gecko engine looks like this:

	-moz-border-radius: 5px;

And at last, the proper syntax:

	border-radius: 5px;

Your CSS3 styles for #menu should look like this right about now:

#menu {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
	background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Step 2: Spicing Up ul li a

Here, let’s add rounded corners, text shadow and some subtle transition. We know the syntax for rounded corners already:

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

Now, the shadow for our links:

	text-shadow: 1px 1px 1px #000;

This will place the shadow 1px to the right and below our link. The shadow will have 1px blur radius and black color.

Now, our smooth transition:

	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;

The transition-property determines which properties fall under the transition, in our case it will be color along with background. The transition-duration determines how long the transition should last, it will be 0.5s for color and 0.5s for background accordingly.

Your CSS3 styles for ul li a should look like this:

ul li a {
	text-shadow: 1px 1px 1px #000;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;
}

Step 3: Spicing Up ul li a:hover

Nothing new here, CSS3-wise:

ul li a:hover {
	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;
}

Step 4: Spicing Up .default

Here we’ll add only box shadow:

	-webkit-box-shadow: 0 5px 20px #888;
	-moz-box-shadow: 0 5px 20px #888;
	box-shadow: 0 5px 20px #888;

Similiar to text-shadow, this will place the shadow 0px to the right and 5px below our menu. The shadow will have 20px blur radius and #888 color.

Step 5: Spicing Up .fixed

The same goes for .fixed, we’ll add only box shadow:

	-webkit-box-shadow: 0 0 40px #222;
	-moz-box-shadow: 0 0 40px #222;
	box-shadow: 0 0 40px #222;

This time it will place the shadow 0px to the right and 0px below our menu, but the shadow will have 40px blur radius and #222 color.

The entire file should look like this right now:

body {
	background: #efefef;
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;
	font: normal 13px Verdana, sans-serif;
	color: #222;
}

#header {
	background: #0F1620 url(bg.jpg) no-repeat top center;
	width: 100%;
	height: 120px;
	border: solid #0F1620;
	border-width: 3px 0 3px 0;
}

#navi {
	height: 50px;
	margin-top: 50px;
}

#menu {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
	background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	line-height: 50px;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#content {
	width: 750px;
	margin: 0 auto;
	margin-bottom: 25px;
	padding: 30px 0;
	text-align: left;
}

ul {
	padding: 0;
}

ul li {
	list-style-type: none;
	display: inline;
	margin-right: 15px;
}

ul li a {
	color: #fff;
	text-decoration: none;
	padding: 3px 7px;

	text-shadow: 1px 1px 1px #000;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;
}

ul li a:hover {
	background: #01458e;
	color: #ff0;

	-webkit-transition-property: color, background;
	-webkit-transition-duration: 0.5s, 0.5s;
}

.default {
	width: 850px;
	height: 50px;

	-webkit-box-shadow: 0 5px 20px #888;
	-moz-box-shadow: 0 5px 20px #888;
	box-shadow: 0 5px 20px #888;
}

.fixed {
	position: fixed;
	top: -5px;
	left: 0;
	width: 100%;

	-webkit-box-shadow: 0 0 40px #222;
	-moz-box-shadow: 0 0 40px #222;
	box-shadow: 0 0 40px #222;
}

Great job, we’re done with CSS. Let’s add some jQuery!

jQuery Magic

All our code should be executed after the DOM is loaded. For that we’ll use this great method jQuery has, called .ready(). You’re probably familiar with the long notation:

$(document).ready(function() {

	// all our code will go here

});

But this time let’s use the short notation, which does exactly the same thing:

$(function(){

	// all our code will go here

});

Now, first thing we should do, is to grab our menu (which is a div with ID “menu”) and assign it to a variable, because we’ll use it several times. The same goes for its position, and for that we’ll use jQuery’s .offset() method which, unlike .position() method, returns the position of the element we use it on relatively to the document, not to the offset parent. Let’s do it:

var menu = $('#menu'),
	pos = menu.offset();

Next, we need to listen for the scroll event, so every time we scroll the page up or down something happens:

		$(window).scroll(function(){
			// code here
		});

Now we need to check if we scrolled down so far that our menu is not visible anymore. This point is exactly the position of our menu from the top + its height. We also need to check if the menu is now in its default position and has the default look:

			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
				// code here
			}

If the result of our if statement is true – we want the menu to fade out, the we need to remove the .default class, give it a class of .fixed and then fade it back in, so we can see it:

				menu.fadeOut('fast', function(){
					$(this).removeClass('default').addClass('fixed').fadeIn('fast');
				});

Right now the effect works only in 50%; it fades out when you scroll down and then it reappears at the top of your browser window – but it doesn’t return to its original position and size when you scroll back up. Let’s fix it now.

For this we need another if statement. This one will be the exact opposite of the first one we made, so:

			else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				// code here
			}

If the result of our statement is true, we want the menu to fade out again, remove the .fixed class and give it a class of .default this time, and then we want it to fade back in, so it’s visible to us:

				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('default').fadeIn('fast');
				});

The script is complete now, this is how it should look:

$(function(){

	var menu = $('#menu'),
		pos = menu.offset();

		$(window).scroll(function(){
			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('default').addClass('fixed').fadeIn('fast');
				});
			} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('default').fadeIn('fast');
				});
			}
		});

});

Well done! Now, go and implement it somewhere and have fun :).

After Word

With a little customization you can easily tweak the whole thing to your liking and/or need, which makes this little effect very useful. Combine it with CSS3 and you’re done :). That’s it guys! If you have any questions, feel free to ask in the comments, I’ll do my best to answer them. Cheers!

3 Written ArticlesWebsite

Web developer and designer, pure breed JavaScript nut. Have unstoppable and never-ending need of learning. Literally inhaling books. You can follow him on Twitter if you'd like, or check out what he's working on on Dribbble.

26 Comments Best Comments First
  • markov

    Monday, September 19th, 2011 14:21

    16

    thanks michal . i’ll be using your menu for my next client .i have used the same exact color along with this CSS 3 Drop Down Menu for one of my clients .
    P.S . RSS Subscribed.

    +1
  • jayaprakash

    Thursday, July 15th, 2010 06:46

    12

    How to make text run bottom-to-top in CSS?

    +1
  • Teddie

    Friday, December 16th, 2011 09:13

    19

    Good script!. it works great in Chrome. But it does not work with IE7, IE8.. Is there anything I can try? Many thanks!

    +1
  • Abhishek

    Thursday, July 1st, 2010 22:16

    4

    Awesome Tutorial!
    But one thing you could do with the bar {when you are scrolling down the page} is maybe use some other lighter color so that it looks even more neat, clean and professional. Just like this guy: http://www.davidwalsh.name/
    Still its a great tutorial, loved to read it ;)

    +1
    • Michal Kozak

      Friday, July 2nd, 2010 17:13

      6

      This is not something you have to use as it is now :). I gave you the idea and showed you how you can achieve it – now it’s yout turn to make it the way you really like it!

      0
  • Michael Pehl

    Thursday, July 1st, 2010 21:51

    3

    I like this one. Good work and thanks for sharing :)

    +1
    • Michal Kozak

      Friday, July 2nd, 2010 17:14

      8

      You’re welcome, glad you like it!

      +1
  • DailyCreative

    Friday, July 2nd, 2010 00:06

    5

    Very interesting!
    But I think, that shadow are dreadful :/

    +1
    • Michal Kozak

      Friday, July 2nd, 2010 17:12

      7

      Not a big problem, adjust it to your liking :).

      -1
  • Federico Totti

    Thursday, July 1st, 2010 16:40

    2

    I’ve some z-index problems in the live example. Text goes over the menu in FF 3.5.5 MacOS.

    I honestly prefer to make this with a simple ‘fixed’navigation div on top.

    Thanks anyway for sharing this, because the code itself has interesting points.

    0
    • Michal Kozak

      Friday, July 2nd, 2010 17:19

      9

      Just update your browser, it works fine on 3.5.6.

      Sure you can do it with CSS ‘fixed’ property, it can be done in several ways actually :).

      That’s a little experiment. Plus, this way you can change the look of your navigation (can be totally different when you’re down the page and different when you’re at the top) so there’s a little of diversity :).

      +1
  • David Hucklesby

    Thursday, July 1st, 2010 20:49

    1

    Nice. Can we have some :focus goodness for us keyboard users, please?
    You may also like to consider this approach to stop forking in CSS3 – http://www.alistapart.com/articles/stop-forking-with-css3/
    Cordially, David

    0
    • Michal Kozak

      Friday, July 2nd, 2010 17:24

      10

      Sure, you can always add that in your project :).

      0
  • Joel

    Wednesday, July 14th, 2010 20:32

    11

    Any idea why this grey horizontal nav isn’t staying at the top correctly? The jquery is being called just fine, but the actual positioning: fixed; isn’t being invoked/changed. Any ideas would be great.

    http://baxtopia.com/dev/hoa/

    Thanks,
    Joel

    -1
  • Billy Girlardo

    Thursday, October 7th, 2010 01:25

    13

    Neat idea (blue disappears in IE9b though).

    -1
  • Byers

    Monday, November 8th, 2010 19:12

    14

    Thanks for the example. It works great except when I use a lightbox on the same page. After the lightbox has run, the menu stays fixed to the top and will not reset unless you reload the page. I’m relatively new to coding, so I’m not sure where to fix the issue, or if it’s just a matter of getting the code to run again after the lightbox is closed. I’m using the prettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/). Anyone have any ideas? Thanks.

    -1
  • Snagy

    Wednesday, March 21st, 2012 23:03

    24

    Is there a way to get the top header to be fixed on page load, instead of transitioning it when you scroll?

    -1
  • Greg Wiley

    Friday, April 6th, 2012 13:57

    25

    It feels a little sluggish. Perhaps it would be best to have the navigation “stick” when you reach the top of the bar instead of pass it.

    -1
  • Murray

    Friday, April 27th, 2012 22:07

    26

    Pretty cool. This feature seems to be popping up more and more on sites.

    -1
  • Gucinho

    Friday, February 24th, 2012 19:32

    22

    Great tutorial. I was looking how to fix navigation links on top when I scroll down and THIS works great.
    Very good work and many thank’s to author, you did very good tutorial.
    Except I have a little problem. It works perfectly but then ligthbox doesn’t work anymore.
    Do you have a solution maybe because i would love to have lightbox working for my photogallery and also have your navigation links.
    Thank’s in advance for any solution you have.
    Keep up with great tutorials. Cheers.

    -1
  • Cody

    Thursday, February 16th, 2012 17:58

    21

    Hi,
    Thank’s for that part of code. But trying to insert it in my joomla! new website ,there was a probleme with an other library.
    So I replace $(function(){ by this
    jQuery(document).ready(function($) {
    and all goes right now.

    -1
  • Alex

    Wednesday, August 31st, 2011 09:46

    15

    Thank you for the tutorial. Very good and handy.

    -1
  • Andrea Belucci

    Thursday, October 13th, 2011 22:30

    17

    Hi guys,

    Nice tutorial! I use it for my website, working great.

    Once question can it be closed ? If user not want to see this fixed menu he can close it.

    Any suggestion ?

    Thanks

    -1
  • Simba

    Wednesday, November 30th, 2011 12:48

    18

    Hello guys,

    I have tried every step in this tutorial but it doesn’t work for me. I even download this tutorial and the navigation menu didnt come up. can anyone direct me to a more recent tutorial on how to do something similar to this.

    Thanks in advance

    -1
  • Jay

    Tuesday, January 24th, 2012 07:05

    20

    HI,
    Thanks to share this. Its very amazing effect. I will add this to my site.

    -1
  • Snagy

    Wednesday, March 21st, 2012 20:22

    23

    Is it possible to have the menu from get go, so, that we do not see the transition. For example: when I first load your example page I see the menu, then when I scroll down a bit (I am assuming 200px) the menu gets fixed. I would like to load the page where the menu is fixed…how do I do that? what changes do I need to make to your code.

    Thanks for sharing this.

    -2
  • Murray

    Friday, April 27th, 2012 22:07

    26

    Pretty cool. This feature seems to be popping up more and more on sites.

    -1
  • Greg Wiley

    Friday, April 6th, 2012 13:57

    25

    It feels a little sluggish. Perhaps it would be best to have the navigation “stick” when you reach the top of the bar instead of pass it.

    -1
  • Snagy

    Wednesday, March 21st, 2012 23:03

    24

    Is there a way to get the top header to be fixed on page load, instead of transitioning it when you scroll?

    -1
  • Snagy

    Wednesday, March 21st, 2012 20:22

    23

    Is it possible to have the menu from get go, so, that we do not see the transition. For example: when I first load your example page I see the menu, then when I scroll down a bit (I am assuming 200px) the menu gets fixed. I would like to load the page where the menu is fixed…how do I do that? what changes do I need to make to your code.

    Thanks for sharing this.

    -2
  • Gucinho

    Friday, February 24th, 2012 19:32

    22

    Great tutorial. I was looking how to fix navigation links on top when I scroll down and THIS works great.
    Very good work and many thank’s to author, you did very good tutorial.
    Except I have a little problem. It works perfectly but then ligthbox doesn’t work anymore.
    Do you have a solution maybe because i would love to have lightbox working for my photogallery and also have your navigation links.
    Thank’s in advance for any solution you have.
    Keep up with great tutorials. Cheers.

    -1
  • Cody

    Thursday, February 16th, 2012 17:58

    21

    Hi,
    Thank’s for that part of code. But trying to insert it in my joomla! new website ,there was a probleme with an other library.
    So I replace $(function(){ by this
    jQuery(document).ready(function($) {
    and all goes right now.

    -1
  • Jay

    Tuesday, January 24th, 2012 07:05

    20

    HI,
    Thanks to share this. Its very amazing effect. I will add this to my site.

    -1
  • Teddie

    Friday, December 16th, 2011 09:13

    19

    Good script!. it works great in Chrome. But it does not work with IE7, IE8.. Is there anything I can try? Many thanks!

    +1
  • Simba

    Wednesday, November 30th, 2011 12:48

    18

    Hello guys,

    I have tried every step in this tutorial but it doesn’t work for me. I even download this tutorial and the navigation menu didnt come up. can anyone direct me to a more recent tutorial on how to do something similar to this.

    Thanks in advance

    -1
  • Andrea Belucci

    Thursday, October 13th, 2011 22:30

    17

    Hi guys,

    Nice tutorial! I use it for my website, working great.

    Once question can it be closed ? If user not want to see this fixed menu he can close it.

    Any suggestion ?

    Thanks

    -1
  • markov

    Monday, September 19th, 2011 14:21

    16

    thanks michal . i’ll be using your menu for my next client .i have used the same exact color along with this CSS 3 Drop Down Menu for one of my clients .
    P.S . RSS Subscribed.

    +1
  • Alex

    Wednesday, August 31st, 2011 09:46

    15

    Thank you for the tutorial. Very good and handy.

    -1
  • Byers

    Monday, November 8th, 2010 19:12

    14

    Thanks for the example. It works great except when I use a lightbox on the same page. After the lightbox has run, the menu stays fixed to the top and will not reset unless you reload the page. I’m relatively new to coding, so I’m not sure where to fix the issue, or if it’s just a matter of getting the code to run again after the lightbox is closed. I’m using the prettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/). Anyone have any ideas? Thanks.

    -1
  • Billy Girlardo

    Thursday, October 7th, 2010 01:25

    13

    Neat idea (blue disappears in IE9b though).

    -1
  • jayaprakash

    Thursday, July 15th, 2010 06:46

    12

    How to make text run bottom-to-top in CSS?

    +1
  • Joel

    Wednesday, July 14th, 2010 20:32

    11

    Any idea why this grey horizontal nav isn’t staying at the top correctly? The jquery is being called just fine, but the actual positioning: fixed; isn’t being invoked/changed. Any ideas would be great.

    http://baxtopia.com/dev/hoa/

    Thanks,
    Joel

    -1
  • DailyCreative

    Friday, July 2nd, 2010 00:06

    5

    Very interesting!
    But I think, that shadow are dreadful :/

    +1
    • Michal Kozak

      Friday, July 2nd, 2010 17:12

      7

      Not a big problem, adjust it to your liking :).

      -1
  • Abhishek

    Thursday, July 1st, 2010 22:16

    4

    Awesome Tutorial!
    But one thing you could do with the bar {when you are scrolling down the page} is maybe use some other lighter color so that it looks even more neat, clean and professional. Just like this guy: http://www.davidwalsh.name/
    Still its a great tutorial, loved to read it ;)

    +1
    • Michal Kozak

      Friday, July 2nd, 2010 17:13

      6

      This is not something you have to use as it is now :). I gave you the idea and showed you how you can achieve it – now it’s yout turn to make it the way you really like it!

      0
  • Michael Pehl

    Thursday, July 1st, 2010 21:51

    3

    I like this one. Good work and thanks for sharing :)

    +1
    • Michal Kozak

      Friday, July 2nd, 2010 17:14

      8

      You’re welcome, glad you like it!

      +1
  • Federico Totti

    Thursday, July 1st, 2010 16:40

    2

    I’ve some z-index problems in the live example. Text goes over the menu in FF 3.5.5 MacOS.

    I honestly prefer to make this with a simple ‘fixed’navigation div on top.

    Thanks anyway for sharing this, because the code itself has interesting points.

    0
    • Michal Kozak

      Friday, July 2nd, 2010 17:19

      9

      Just update your browser, it works fine on 3.5.6.

      Sure you can do it with CSS ‘fixed’ property, it can be done in several ways actually :).

      That’s a little experiment. Plus, this way you can change the look of your navigation (can be totally different when you’re down the page and different when you’re at the top) so there’s a little of diversity :).

      +1
  • David Hucklesby

    Thursday, July 1st, 2010 20:49

    1

    Nice. Can we have some :focus goodness for us keyboard users, please?
    You may also like to consider this approach to stop forking in CSS3 – http://www.alistapart.com/articles/stop-forking-with-css3/
    Cordially, David

    0
    • Michal Kozak

      Friday, July 2nd, 2010 17:24

      10

      Sure, you can always add that in your project :).

      0

Comments are closed.

54.196.197.153 - unknown - unknown - US