Tag Archives: CSS Tab Menu

RedBrown Drop Down Menu-Using jQuery and CSS

RedBrown Drop Down Menu- Using jQuery and CSS
As part of my project I have to build a drop down menu with animation. Actually its need some fade in animation effects when user clicks on the main tab and some more effects for sub navigation too. There are lot of navigation menu scripts available over the internet (I had listed some of them in my past blog) but I would like to create my own and would like to share with you. Here I’m using some simple jQuery scripts for animating the menu.

Step 1

We are going to build the list first.

<ul id="menu">
<li><a href="#">Categories</a>
<ul class="submenu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul class="submenu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li><a href="#">Categories</a></li>
</ul>

Step 2

Now we have to apply a skin to the list. Add some styles.

body {
background:url(images/m_bg.gif) repeat-x #b29668;
margin:70px;
}
.red {
color:red;
}
.brown {
color:brown;
}

h2 {
font-family:"Courier New", Courier, monospace;
font-size:19px;
font-weight:normal;
margin-left:39px;
color:#333333;
}
#menu {
background:url(images/menu_bg.gif) no-repeat 0 -1px;
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:1000px;
padding:0;
}
#menu li {
background:url(images/menu_bg.gif) no-repeat 0 -1px;
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:40px;
background:url(images/menu_bg.gif) no-repeat left bottom;
display:block;
float:left;
}
#menu li  span{
background:url(images/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(images/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;

}
#menu li ul li{
background:none;

width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(images/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;

}

I have explained about some css rules above. Just take a look on it.

Step 3

Now the final step, we are going to add some animation effects for the menu with jQuery. First we need to call the jquery.js. It should be like this.

<script src="js/jquery.js" type="text/javascript"></script>

Now the animation jquery code which you have to put inside the head tag.

<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})

</script>

RedBrown Drop Down Menu-Using jQuery and CSS (2037)
Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Amazing Photoshop Tab Designs for Web & Applications

Amazing Photoshop Tab Designs for Web and Applications
Amazing Photoshop Tab Designs for Web and Applications

Pixlys has comes with a lot of Photoshop designs for Tab Menus. Available styles are Pinned Active Tab, Semi Flat Gradient Dropdown Menu, Rounded Gradient Dropline Tabs, Soft Gradient Dropdown Menu, Glossy Vista Style Dropdown Menus, Glossy Dropdown Menu with 3d Paper Effect etc… All of the tab designs are free for personal use. Can be used with your website, blog or applications. You should register for the free download.

website url

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

How to Build Mega Drop Down Menus with CSS & JQuery

Mega Drop Down Menus
Mega Drop Down Menus

Do you remember I have published a post of CSS Tab-Based Navigation Scripts? Some JQuery menus are. Here Im posting about a new drop down menu more efficient for large scale websites. The solution has come up from SohTanaka – Mega Drop Down Menus. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.

Demo

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

How to build a Previous and Next buttons with List and Css scripts.

Here I’m explaining how to build a previous and next buttons with list and css scripts. Please follow the steps mentioned below.

1) We need a container div. So write a div tag first and give an ID for it. I gave for my div “prevNextContainer”.
2) Write the previous and next lists inside the container div. Give an ID “prev” for previous list and “next” for next list.
<div id="prevNextContainer">
   <li id="prev"><a href="#">Previous<a/></li>
   <li id="prev"><a href="#">Next<a/></li>
</div>

3) Add some styles to the container div.
<style>
#prevNextContainer{
   padding:0px;
   font-family:Tahoma;
   font-size:11px;
   border-bottom:3px solid #dadada;
   height:35px;
}
</style>
4) Set margin and padding to zero for ul and li tags.

#prevNextContainer ul, #prevNextContainer li{
   padding:0px;
   margin:0px;
}

5) Now we need to push previous list to left, next list to right and remove the list style. Set float to left for previous list and float to right for next list. Set the list-style-type to none for both.

#prevNextContainer #prev{
   float:left;
   list-style-type:none;
}
#prevNextContainer #next{
   float:right;
   list-style-type:none;
}

6) Now we are going to makeup the buttons. Give some style to the both anchors tags.

#prev a{
   text-decoration:none;
   border:1px solid #cacaca;
   padding:5px 7px;
   width:100px;
   display:block;
   text-align:center;
}
#prev a:hover{
   background:#dadada;
   border:1px solid #aaaaaa;
   color:black;
}
#next a{
   text-decoration:none;
   border:1px solid #cacaca;
   padding:5px 7px;
   width:100px;
   display:block;
   text-align:center;
}
#next a:hover{
   background:#dadada;
   border:1px solid #aaaaaa;
   color:black;
}

7) See the sample below.

Thats it…. Enjoy.

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

CSS Tab-Based Navigation Scripts

Css Tab Menu
Css Tab Menus

Tab navigation has been one of the most important element in web layouts. Visitors can properly navigate through the website with a tabbed navigation. A tab navigation should help visitors to easily understand where they should be clicking. Here I have compiled a mass list of nice and sleek CSS Tab based navigation samples you can integrate on your site.

Continue reading CSS Tab-Based Navigation Scripts

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]