Friday, April 11, 2014
How to Add Neat CSS3 Dropdown Menu in Blogger alphause or alphauseblog
Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
How to Add Neat CSS3 Dropdown Menu in Blogger
5 comments
Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script- tutorials.comto which I have made some slight modifications so that it could easily adapt in our Blogger template.
In the upper right corner of this menu we have the contact links and the social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, we have the drop-down navigation menu and on the left side, the search form.
To achieve better user interface and interaction, the CSS dropdown menu features sub categories that appear with a nice touch of CSS3box-shadow,text-shadowand a cooltransitiononce the parent link is activated by ahover.
Please visit this demo pageto see it in action.
Adding the CSS dropdown navigation menu in BloggerStep 1.Access your Blogger Dashboardand go toTemplate> click on theEdit HTMLbutton
Step 2.Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag below inside the search box and hit Enter to find it.
Step 3.Just belowadd the HTML structure:
Replace the # symbols with the URLs of your links and replace the textsin bluewith the titles that you want to appear. To change the social media icons, add the links of your icons instead of the onesin blue. If you don't know how to upload and get the URL of an image, please read this tutorial.
If you want to remove the sub categories, remove the code within the tags highlighted in yellow, including theultags. To remove only a menu element, remove the part that starts with and ends with
Step 4.And now let's add the CSS styling for the menu. Search for the following piece of code:
]]>Just above]]>add this code:
#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#my-links {
float: right;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#my-links a:first-child {
border-width: 0;
}
#menu-container {
background: -webkit-linear- gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear- gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear- gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 46px;
padding-top: 1px;
}
#neat-menu {
float: left;
}
#neat-menu a {
text-decoration: none;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: left;
padding-bottom: 12px;
}
#neat-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear- gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear- gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear- gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
background: -webkit-linear- gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear- gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear- gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
background: -webkit-linear- gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear- gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear- gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
background: -webkit-linear- gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear- gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear- gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#neat-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear- gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear- gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear- gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
#menu-search {
margin:8px 10px 0 0;
float: right;
}
#menu-search form {
background: url(" http://1.bp.blogspot.com /-NzU9je1udG4/Uw-1tZku4eI /AAAAAAAAGWs/-h4BU1mFTiU /s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height: 26px;
padding: 0 25px;
position: relative;
width: 130px;
}
#menu-search form:hover {
background-color: #F9F9F9;
}
#menu-search form input {
color: #999999;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
outline: medium none;
padding: 0;
width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
color: #C4C4C4;
} Step 5.Click on theSave templatebutton to save the changes... and you're done! ;)
I hope you like this CSS3 dropdown menu and if you enjoyed this tutorial, please share and subscribe.
Like
6
Random Posts
Top three qualities of a successful blogger26/10/2013 - 5 Comments
4 Different Styles For the Popular Posts Widget20/09/2013 - 17 Comments
Add a Cool Style to Blogger Threaded/Nested Comments20/01/2014 - 9 Comments
Related Posts:
jQuery Sliding Panel with Expanding...
How to Add an Admin Control Panel i...
Vertical drop down menu with jQuery
Horizontal menu with sub-tabs in tw...
Create Horizontal Navigation Menu W...
5 comments:
Anonymous 2/28/2014
hi admin. i sent you email through your contact pag. plz reply me. i'm waiting. Reply
Umer Prince 3/01/2014
hmmmm nice work Reply
Nguyet Dinh 3/03/2014
Thanks for the post. It's great. Reply
Kate Kim 3/10/2014
how to change the front? can you teach me? Reply
Replies
Admin 3/10/2014
Hi Kate,
Modify the 14px fromfont-size: 14px;which is just below#neat-menu ul li a {(step 4). If you want to change the font style, add a new line after the semicolon like this:
font-family: arial;
And changearialwith the name of the font.
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,775 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
Joseph V M
Hi, I've added pagination to my blog...
dara king
good
Mel Ancheta
You did it finally, thanks admin (: sorry for my late reply...
Sandra Harriette
It never ceases to amaze just how much we can do with Blogger....
Gabor Sziladi
One question i still have...how can i keep distance between my...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
6
Like
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment