BreadCrumb Menu-The stylish and simple menu by Css.If you want one bright menu,this will be the best choice for you.As I said , it is very simple , so there is no sub.But anyway, according to me, this is one of the best and beautiful menu in my eyes , I hope you feel that,too.Add this Css code before the </head> tag :
#menus li {
display:inline;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#menus li a {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvL3ty-C_Ngs0x4OBKT4nfgwBeLnlMqndDJZ4rb6jra16NZ3LKcxoVm8578HbCTHqFLE4fgv8RwzpKEQs4I1vHo6J0DlexUA-sRlgWq7S9AIX1b50FXUaU61viBg2onnXjCEApvq3TDMRh/s1600/menu.gif) no-repeat scroll 0 0;
color:#382E1F;
display:block;
float:left;
font-size:11px;
height:31px;
line-height:31px;
margin-left:-10px;
padding:0 20px;
text-decoration:none;
z-index:1;
}
#menus li a:hover, #menus li a.current {
background-position:0 -31px;
}
#menus li.current_page_item a, #menus li.current-cat a {
background-position:0 -62px;
}
#menus li a.home {
background-position:0 -93px;
margin-left:0;
padding:0;
text-indent:-999em;
width:45px;
}
#menus li a.home:hover {
background-position:0 -124px;
}
#menus li.current_page_item a.home {
background-position:0 -155px;
margin-left:-40px;
}
#menus li a.lastmenu:hover {
background-position:0 0;
cursor:default;
}Next just add this code under <body> tag (or paste in a HTML/Javascript by clicking Add A Gadget):
<ul id='menus'>
<li class='current_page_item'><a Title='Home' class='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li class='page_item page-item-2'><a href='#' title='About'>About</a></li>
<li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
<li class='page_item page-item-2'><a href='#' title='Contact'>Contact</a></li>
<li class='page_item page-item-2'><a href='http://zenplate.blogspot.com' title='Zenplate'>Zenplate</a></li>
<li class='page_item page-item-2'><a href='http://twitter.com/zendersto' title='Zen twitter'>Twitter</a></li>
</ul>You are done, Save it and join, tell me how do you feel about this menu by commenting me below.Subscribe me now to get more !
Requirements : CSS
Website: www.zenplate.blogspot.com
Bring to Blogger : Zenplate
1 comments:
Great code for a breadcrumb menu! It's a great idea to do this with CSS and Javascript. I've been looking for a site with great template and HTML tips. This is a good one.
I'm going to try this but I'm wondering if you've checked compatibility with Opera, IE, Firefox. The live demo is great!
It's also probably a good idea to replace the image with one hosted on your local server, for anyone copying this source code. :)
Thanks for the article and I look forward to reading the next one. Bring on the tips!!
Post a Comment
Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen