Download Flickr Menu Design

Jquery Examples, Menu Samples Add comments | 3,273 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.