Download Flickr Menu Design

Jquery Examples, Menu Samples Add comments | 4,567 views |

Description:

This tutorial I’ll explain a simple step-by-step way to implement an Flickr Horizontal Menu Demo in Jquery and CSS.
The result is something like this:

Script Code

Step 1: Insert the below into the <HEAD> section of your page: (Select to copy)
 <script type="text/javascript" src="js/jquery.js"></script> <link href="css/style.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function(){ $("#nicemenu img.arrow").click(function(){ $("span.head_menu").removeClass('active'); submenu = $(this).parent().parent().find("div.sub_menu"); if(submenu.css('display')=="block"){ $(this).parent().removeClass("active"); submenu.hide(); $(this).attr('src','arrow_hover.png'); }else{ $(this).parent().addClass("active"); submenu.fadeIn(); $(this).attr('src','arrow_select.png'); } $("div.sub_menu:visible").not(submenu).hide(); $("#nicemenu img.arrow").not(this).attr('src','arrow.png'); }) .mouseover(function(){ $(this).attr('src','arrow_hover.png'); }) .mouseout(function(){ if($(this).parent().parent().find("div.sub_menu").css('display')!="block"){ $(this).attr('src','arrow.png'); }else{ $(this).attr('src','arrow_select.png'); } }); $("#nicemenu span.head_menu").mouseover(function(){ $(this).addClass('over')}) .mouseout(function(){ $(this).removeClass('over') }); $("#nicemenu div.sub_menu").mouseover(function(){ $(this).fadeIn(); }) .blur(function(){ $(this).hide(); $("span.head_menu").removeClass('active'); }); $(document).click(function(event){ var target = $(event.target); if (target.parents("#nicemenu").length == 0) { $("#nicemenu span.head_menu").removeClass('active'); $("#nicemenu div.sub_menu").hide(); $("#nicemenu img.arrow").attr('src','arrow.png'); } }); }); </script>

The above references an jquery.js file. Download (by right clicking, and selecting “Save As”),

and upload to your webpage directory. Within the above code

CSS Code:

Step 2: Insert the below into the <HEAD> section of your page: (Select to copy)
@charset “utf-8″; /* CSS Document http://www.csscody.com/demo */ body{font-family:Arial, Helvetica, sans-serif; font-size:13px; background:#fff;} ul, li{margin:0; border:0; list-style:none; padding:0;} ul{height:21px;} h1 { font-size:18px; } p { line-height:18px; } #info { margin:auto; width:600px; color:#333333; padding:10px; background:#e8ffbf; } #nicemenu { margin:0 auto; width:600px; margin-top:30px; border-bottom:dotted 1px #E5E5E5; } #nicemenu a { color:#0066CC; text-decoration:none; } #nicemenu a:hover { text-decoration:underline; } #nicemenu li { display:inline; position:relative; } #nicemenu li span { position:relative; z-index:10; padding:4px 4px 4px 6px; border-bottom:none; line-height:18px; } #nicemenu li span a { font-weight:bold; padding:0 6px 0px 2px; } #nicemenu li span.over { padding:4px 3px 4px 5px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #fff; } *+html #nicemenu li span.over { border-top:solid 2px #E5E5E5; padding-bottom:3px; } /* IE6 */ #nicemenu li span.over a { } #nicemenu li span.over a:hover { text-decoration:none; } #nicemenu li span.active { padding:4px 3px 4px 5px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #fff; } *+html #nicemenu li span.active { border-top:solid 2px #E5E5E5; padding-bottom:3px; } #nicemenu li span.active a { } #nicemenu li span.active a:hover { text-decoration:none; } #nicemenu img.arrow { /*margin-left:4px;*/ cursor:pointer; } #nicemenu div.sub_menu { display:none; position:absolute; left:0; top:0px; margin-top:18px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #999999; padding:4px; top:2px; width:160px; background:#FFFFFF; } * html #nicemenu div.sub_menu { margin-top:23px; } /* IE6 */ *+html #nicemenu div.sub_menu { margin-top:23px; } /* IE7 */ #nicemenu div.sub_menu a:link, #nicemenu div.sub_menu a:visited, #nicemenu div.sub_menu a:hover{ display:block; font-size:11px; padding:4px;} #nicemenu a.item_line { border-top:solid 1px #E5E5E5; padding-top:6px !important; margin-top:3px; }

HTML Code:

Step 3: Insert the below into the <BODY> section of your page: (Select to copy)
 <div id="nicemenu"> <ul> <li><a href="http://www.csshook.com">Home</a> <li><a href="http://www.csscody.com/demo">You</a><img src="arrow.png" width="18" height="15" align="top" class="arrow" /> <div class="sub_menu"> <a href="http://www.csshook.com">Your Photos</a> <a href="http://www.csshook.com">Your Sets</a> <a href="http://www.csshook.com">Your Archives</a> <a href="http://www.csshook.com">Your Tags</a> <a href="http://www.csshook.com">Your Map</a> <a href="http://www.csshook.com">Your Favorites</a> <a href="http://www.csshook.com">Your Stats</a> <a href="http://www.csshook.com" class="item_line">Recent Activity</a> <a href="http://www.csshook.com">Comments You’ve Made</a> <a href="http://www.csshook.com" class="item_line">Upload Photos</a> <a href="http://www.csshook.com" class="item_line">Your Account</a> <a href="http://www.csshook.com">Your Profile</a> <a href="http://www.csshook.com" class="item_line">FlickrMail</a> </div> </li> <li><a href="http://www.csshook.com">Organize</a><img src="arrow.png" width="18" height="15" align="top" class="arrow" /> <div class="sub_menu"> <a href="http://www.csscody.com/demo">All your photos</a> <a href="http://www.csscody.com/demo">Most recently uploaded photos</a> <a href="http://www.csscody.com/demo">Your Sets</a> <a href="http://www.csscody.com/demo">Your Map</a> </div> </li> <li><a href="index.html">Contacts</a><img src="arrow.png" width="18" height="15" align="top" class="arrow" /> <div class="sub_menu"> <a href="http://www.csscody.com/demo">Latest Photos</a> <a href="http://www.csscody.com/demo">Contact List</a> <a href="http://www.csscody.com/demo">People Search</a> <a href="http://www.csscody.com/demo" class="item_line">Invite your Friends</a> <a href="http://www.csscody.com/demo">Invite History</a> <a href="http://www.csscody.com/demo">Guest Pass History</a> <a href="http://www.csscody.com/demo" class="item_line">Give the gift of Flickr</a> </div> </li> <li><a href="http://www.csscody.com/demo">Groups</a><img src="arrow.png" width="18" height="15" align="top" class="arrow" /> <div class="sub_menu"> <a href="http://www.csscody.com/demo">Your Groups</a> <a href="index.html">Recent Changes</a> <a href="http://www.csscody.com/demo" class="item_line">Search for a Group</a> <a href="ihttp://www.csscody.com/demo" class="item_line">Create a New Group</a> </div> </li> <li><a href="http://www.csscody.com/demo">Explore</a><img src="arrow.png" width="18" height="15" align="top" class="arrow" /> <div class="sub_menu"> <a href="http://www.csscody.com/demo">Explore Page</a> <a href="http://www.csscody.com/demo">Last 7 Days Interesting</a> <a href="http://www.csscody.com/demo">Calendar</a> <a href="index.html">A Year Ago Today</a> <a href="http://www.csscody.com/demo" class="item_line">World Map</a> <a href="index.html">Places</a> <a href="index.html">Camera Finder</a> <a href="http://www.csscody.com/demo" class="item_line">Popular Tags</a> <a href="index.html">Most Recent Photos</a> <a href="index.html">Creative Commons</a> <a href="index.html" class="item_line">FlickrBlog</a> <a href="index.html" class="item_line">Do More with Your Photos</a> <a href="http://www.csscody.com/demo">Flickr Services</a> </div> </li> </ul> </div> <div id="info" style="margin-top:50px"> <h3>Flickr Horizontal Menu Demo in Jquery</h3> This tutorial I’ll explain a simple step-by-step way to implement an Flickr Menu demo with cool sliding, using Jquery and CSS. See More Jquery examples: <a href="http://www.csscody.com">www.csscody.com</a> | <a href="http://www.csshook.com">www.csshook.com</a> </div>

Got a question or need help customizing this Jquery code? Post it in the help me. If you have a comment or suggestion instead, post it in the comments section below.

No Related Post

10 Responses to “Download Flickr Menu Design”

1. 25 Powerful and Useful jQuery Tutorials for Developers and Designers : Speckyboy Design Magazine Says:
March 11th, 2009 at 11:18 am
[...] Flickr Menu Design Demo URL : View Demo. Description : This tutorial willl explain how to use jQuery and CSS and createa simple step-by-step way to implement a Flickr Horizontal Menu. [...]
2. 25 Powerful and Useful jQuery Tutorials for Developers and Designers | guidesigner.com Says:
March 12th, 2009 at 11:11 am
[...] Flickr Menu Design Demo URL : View Demo. Description : This tutorial willl explain how to use jQuery and CSS and createa simple step-by-step way to implement a Flickr Horizontal Menu. [...]
3. Jon Says:
March 14th, 2009 at 6:32 pm
great menu design. thanks
4. 25 Powerful and Useful jQuery Tutorials for Developers and Designers | designersmantra.com Says:
April 5th, 2009 at 7:05 am
[...] Flickr Menu Design Demo URL : View Demo. Description : This tutorial willl explain how to use jQuery and CSS and createa simple step-by-step way to implement a Flickr Horizontal Menu. [...]
5. 25 Awesome jQuery Tutorials | Search-End Says:
May 2nd, 2009 at 3:03 am
[...] Flickr Menu Design Demo URL : View Demo. Description : This tutorial willl explain how to use jQuery and CSS and createa simple step-by-step way to implement a Flickr Horizontal Menu. [...]
6. sohbet Says:
July 6th, 2009 at 2:41 pm
thanks admin good post
7. 15 jQuery Tutorials For More Interactive Navigation Says:
July 7th, 2009 at 1:23 pm
[...] Tutorial [...]
8. Best jQuery Interactive Navigation Tutorials for Creative designs. | guidesigner.net Says:
July 8th, 2009 at 10:57 am
[...] Tutorial [...]
9. Colin Says:
July 23rd, 2009 at 9:01 pm
Your demo looks broken
10. jQuery Navigation Examples Says:
April 9th, 2010 at 9:18 am
[...] Flickr Menu Design | Demo This is a simple step-by-step tutorial that shows you how to implement a Flickr-style menu with cool sliding effects using jQuery and CSS. [...]