CSS3 Shadow Style Vertical Menu for Blogger

In this post i going to give you a  CSS3 Shadow Style Vertical Navigation Menu for Blogger which will attract your visitors to keep their mouse point on it for a while. Css3 Shadow Style Vertical MenuThis widget suites best for Blogger sidebars. It might be left or right sidebar the option is left to you because where ever you add this widget i am sure that it looks good there.


View Demo Button

How to Add CSS3 Shadow Style Vertical Menu

<style>
.btrix_blockmenu{
font: bold 14px Germand;
width: 190px; /* width of menu */
}
.btrix_blockmenu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.btrix_blockmenu ul li{
margin:0;
padding:0;
}
.btrix_blockmenu ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btrix_blockmenu ul li a:hover, .btrix_blockmenu ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}
</style>

<div class="btrix_blockmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</div>
 
If you like this then please subscribe to Our feeds and Like us on Facebook for Future Updates. Thank you. 
Follow :
Facebook
Twitter
Google+
Like the post? Never miss another. Get all our posts directly to your e-mail. Subscribe to our newsteller today

2 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1) Do not include links in comments as they will not be published after moderation !
2) Make sure that you "subscribe by mail" to get notified to reply to your comments.
3) Please do not Spam... Spam comments will be deleted immediately upon our review.

Proudly powered by Blogger