Download Flickr Menu Design

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:

Demo Flicker Menu

Download menu source code

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.

Love this story?

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Jon says:

March 14, 2009 at 6:32 pm

great menu design. thanks

sohbet says:

July 6, 2009 at 2:41 pm

thanks admin good post

Colin says:

July 23, 2009 at 9:01 pm

Your demo looks broken

Wilkinson35Gertrude says:

June 14, 2010 at 6:04 pm

One knows that humen’s life seems to be not very cheap, but we require money for various stuff and not every man gets enough money. Thence to get some loan or just sba loan would be a right way out.

Download Flickr Menu Design

Description:

Demo Flicker Menu

Script Code

CSS Code:

HTML Code:

Love this story?

37 Responses to “Download Flickr Menu Design”

Trackbacks/Pingbacks

Leave a Reply

Recent Posts

Categories

Friends

Recent Comments

Latest Topics

Recent Comments

Download Flickr Menu Design

Description:

Demo Flicker Menu

Script Code

CSS Code:

HTML Code:

Love this story?

37 Responses to “Download Flickr Menu Design”

Trackbacks/Pingbacks

Leave a Reply

Search Related Topics

Facebook Like

Related Articles From This Category

Flickr style photo gallery demo in jQuery

Custom Alert Boxes using Jquery

Apple Style Tab Accordion in Jquery

Create a Accordion Effect

jQuery Animation Menu Demo

Recent Posts

Categories

Friends

Popular Tags

Recent Comments

Popular Tags

Latest Topics

Recent Comments