KntL

Web.Design.Tech.Life 
« Back to blog
Viewed 15814 times
Favorited 0 times
Filed under
November 8, 2009
Bookmark and Share

CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip

Your review, sharing and suggestions are so important for me. Please leave a comment and ReTweet this article.

i have coded this pager only css based navigation / pagination bar. no javascript or jquery is required.

you can visit demo page here.

there is tooltip on hover the previous or next page's bullets that makes navigation easier.

the code is repeating some list items. the popup tooltip, bullets and triangles all written by css. you can easily change the colors in the CSS file and use it for free.

available in:
  • ie 6 or higher
  • firefox 1 or higher
  • chrome
  • opera
  • safari

Click here to download:
KntL-Pager.zip (1 KB)

Comments (10)

Nov 09, 2009
toolman said...
Nice, but points off on usability; you can't see the navigation options till you hover over, so it will take longer to find the one you want. Pretty though, and kudos for all-CSS (no-JS) work :)
Nov 10, 2009
John Whitley said...
@toolman: True, this isn't necessarily great for site-navigation; it seems better suited as a compact presentation for navigating a sequence. E.g. forum pages, presentation slides, tutorial steps, and so on. It's certainly far easier to hit the targets in this design than in the traditional lousy forum page lists. The next/prev links are also conventional to suggest that type of usage.
Nov 10, 2009
Travis said...
Great work, brilliantly done.

I would suggest though that you promote this work as a pagination pattern rather than strictly navigation - I think that @toolman is right in that context. As a pagination pattern though, you're design is appropriate.

Nov 10, 2009
Luke said...
wow no javascript and no jQuery!! jQuery is javascript.
Nov 11, 2009
Steve said...
Hi John, very neat. I agree great option for navigating a sequence and pagination. Isn't Luke a smart one!
Dec 10, 2009
web design dubai said...
nice css Navigation, lovely...
Dec 22, 2009
Berny said...
I pretty like this approach. It can be used for a search engine, a gallery preview or, with some changes, for a step-by-step form. Thanks and kudos!
Jan 12, 2010
arlen Nielsen said...
Sorry mate, doesn't work for me... Mac OS 10.6 w/Safari 4, get the 'dot' rollovers, but not the interaction. Even the download doesn't work.
Jan 18, 2010
Ignou said...
nice css Navigation, lovely...
Feb 19, 2010
brtiy said...
hi, could you for example explain the script explicitly without giving it for download? i mean, why should i download something which i don't know WHAT it is. in particular a script?

Leave a comment...

 
Got an account with one of these? Login here, or just enter your comment below.
Posterous-login    twitter