Web design | Front-end | Quality from Budapest
Back to the Index page | Write your own comment
I have updated the code - the script now works correctly and the links are clickable!
In the past few weeks I have gotten lots of emails in connection with the navigation menu of my blog. They wanted to find out how I had made it. So I have compiled a tutorial so that anybody can use it for his/her project. In this way they won’t have to steal it from the source of my blog.
The creator of menu is a 17-year-old Argentinian web-developer, Guillermo Rauch. Maximum respect to him.
So, the navigation is based on a simple Xhtml ul list which uses a mootols javascript framework.
<div id="fancymenu"><ul><li class="current" id="menu_home"><a class="border_bonus" href="#" title="Home">Home</a></li><li id="menu_about"><a href="#" title="About">About</a></li><li id="menu_portfolio"><a href="#" title="Portfolio">Portfolio</a></li><li id="menu_services"><a href="#" title="Services">Services</a></li><li id="menu_resources"><a href="#" title="Links">Links</a></li><li id="menu_contact"><a href="#" title="Contact">Contact</a></li></ul></div>
To activate the navigation the following lines have to be inserted into the header of the HTML file:
<link rel="stylesheet" href="css/fancy.css" type="text/css" media="screen" /><script type="text/javascript" src="js/mootools.js"></script><script type="text/javascript" src="js/fancy.js"></script>
All of the Li elements have an „Id” attribute so the width of the buttons can be easily configured from the css file.
If you are plannig to use transparent image for the background of the buttons you will need to include the following line in the header of the xhtml.
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" /><![endif]-->
If you are using Jquery javascript framework you will find one more similar navigation menu here:
Lavalamp menu
Related links:
I have made a Zip file that contains all of the important data.
new{concept} navigation menu
Thats very cool that you would release that. I don’t know if I would every use it or not, depends on projects I might have coming up, but its nice to know I can reference it..
2008 July 303:23:46
Playing with Fancy Menu ... The implementation you have on this site works perfect BUT the version in the zip file does not navigate when an item is clicked on. I am a newbie so maybe I am missing something. Hoping you can point me in the right direction.
Cheers
2008 August 043:36:47
I’m having trouble with the gifs in IE - basically they look really horrible and distorted if I have a transparent background. I’ve tried changing the ‘save for web’ settings in photoshop but I get the same crappy results. Any idea’s what’s up?
John:
The “current” class is the key!
You need to put that to other li.
Craig:
You need to define the backgorund color.
I love how this looks but I’m also having trouble getting the links to work. I know you said that i need to add that to the other li, but could anyone be more specific. Also, i don’t even see the “current” class in the css list.
totally clueless,
k
Similar to above, I am having problems with actually making the menu navigate. Changed colors, etc. but since my javascript is very rusty cannot seem to adjust in the final lines. When i mess with the final lines in fancy.js I can get it to navigate, but not do the cool mouseover. Help please!
Elgato:
The “current” class is not css class! You can define the menu hover starting position with this class.
Nick:
I checked out your menu here:
http://hadfields.ca/met/eportfolio/home.html
I think the main problem is: your “Projects” and “Courses” links are not defined in the css file.
You need to set width, height, and backgorund image for this two class : menu_projects, menu_courses.
Still having trouble getting it to navigate - I can either get the animated part working, or the navigation; not both.
I downloaded the zip and ran the .html file without changing anything and I get the animation but no navigation. I’ve gotten the navigation to work by updating the mootools.js file.
There seems to be a few people with this problem but no solution (that I have seen). Please help!
I make templates with an included list-based menu in each which can have any number of links and I would like a way to dynamically style the link to show that you’re on the current page for that link.
I have updated the code - the script now works correctly.
Glad to see that lots of people share my same interests and thoughts on gaming.Great Blog. I will continue reading it in the future. Nice layout too.
Thanks a lot for the post. Jquery is really great, especially for those of us who aren’t fans of flash, yet want to spice up navigation of a site.
Your blog is impressive there is no doubt. The reason i am here is that, i am learning web designing, and HTML. But don’t have any knowledge of Css. How to use it ? What are it’s effects ?
I see that you updated the scripts and I am very grateful. I have one problem though: It works great on my hard drive but when i upload it, it no longer works. I noticed that when it uploaded it said something about not having permission on the script files. Anyway, i would be eternally grateful if you looked at my site. Maybe i missed something simple.
http://www.brandlingo.com/about.html
New to your site but it’s really attractive! The AJAX (probably ^^) for the scrolling up and down is cool. Thanks for the tutorial and I’m gonna try it out.
Good news. i figured out my problem and now it works great. I’m getting lots of positive feedback and i really appreciate you sharing your hard work.
2009 February 253:21:29
The main problem to get a grip on a new concept or stuff is good direction or manual. Jquery has very good step-by-step documentation. The documentation is maintained and up to date. Tutorials section are provided to guide newcomers and even ordinary people to leverage the power of jquery.
http://explorearizonatours.com/grandcanyon.php
When I first saw it, I thought that it’s flash.
hm… I like nice effects on CSS, thanks, really interesting.
It is very interesting that you did.I thinked that it made on flash at first.Great work.
2009 May 123:19:38
Very nice, looks like flash but it’s waaay better :P
Love Javascript (and so jQuery) even if we didn’t use it so much in web “1.0”
2009 June 037:20:29
I keep seeing the same question I have, but no simply put solution.
I have the menu working on this site, except every page, the background image is on “home”...it doesn’t stay on the navigation item the actual page is on.
If I read the responses correctly, assuming I have the navigation code on all pages, I have to put assign the “current” class to the <li> for each page? Is that what I have to do?
I am using the navigation as an include, how do I achieve this?
Thanks!
Dan
Wow…that very nice menu. I like it very much. Thank for sharing this code. it’s great!
If I want to add another button After contacts, how do I do this.
Any ideas
Categories
Archive
Popular posts
- The javascript navigation menu of my blog
2009 November 07 - 33 comment - Top 18 Self-Promotion Tips for Web Designers
2010 January 24 - 21 comment - My favorite top ten web 2.0 fonts
2009 July 01 - 19 comment - Ultimate Web 2.0 layout and design tips
2010 January 29 - 19 comment - Ultimate tips to make a good web designer
2010 February 15 - 15 comment - Rebranding the Web designer 2009
2009 November 26 - 12 comment
About this blog
© All Content is Copyrighted newconcept.hu © 2008 | Created by Szabolcs Bakos, web 2.0 designer
2008 July 202:25:02
Darn it! I spent ages trying to figure out how to recreate your menu and ended up giving up and opting for a new navigation design!!!
Thanks a lot though, it’s nice to know how to do it for future.