How to Add Neat CSS3 Dropdown Menu in Blogger
Για να εφαρμόσετε το menu στο blog σας αντιγράφουμε τον παρακάτω κώδικα:
<style>
/* foulscode.blogspot.gr */
#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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0bDkOQmG97X_F1Gw4ZsqJgJDOi6BVO3q9utQiFZwYQ-YHf-BdYouVIqY5MZvRqL-zysNsTvuZOCwgJmnl9yHc7_J2NSiBaXpZerwxGbjSyMQVhTw3ORuIYjWsgdcBmv6TvUvpAwiTIXyQ/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;
}
/* foulscode.blogspot.gr */
</style>
<div id='contact-links'>
<div id='my-links'>
<a href='URL'>About</a>
<a href='URL'>Contact</a>
<a href='URLFacebook'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPfwOzYXfmSXnep0ANFxH_BG7sD1_f-YHZrI_RUNrMxw_xME7UD53zh1OENXgwi6RIJxQqLcEO0tPEv3AsvU0xIdgV2veFC-qrRGKo5W6yJP682ygZ8tAVuXDaII3DaJlGnzM4m48g7-18/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='URLTwitter'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3RQhZ9vcx0cx0uIni-42FD1ruF90KqnPyWq9QThMnoIfd7KpZrOogSum8bR3foS1Lg4PCalV0ZDbPrWUjfh8yMTzptpf_ZW5MAUNhuTM2fSYq16_fHVbk4AI8prnNAjN4gRrOEBP4lEyw/s1600/twitter.png' title='Twitter' width='18px' /></a>
<a href='URLGoogle'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigmA2qAjPTc0gjDXtampoUbWSAHxaodHqniyKr9Zs3rEWFXjXaYSSGd4UqBHeUR8RPaneCTXoVZbEMV3jXVEFFXB-iv2h89kK_s_TpKxqSQwc_YwQhcV2F2q6Pk_WqGUPME8nCxupP2B3I/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='URLRSS Feed'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQy8uyIkw_vWSLxYsR5Jyepik4fsz0kj47bVuYOGtrzbqsQ-k-jow8llRArh3evmog4gyTFRWbGflTfdTN_kCCQphuq1If68aF5lqXafhAhHSB_J_Mc6PWMIp83XedGaXLVyYkkVpCJmvA/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
</div>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='URL'>Dropdown</a>
<ul>
<li><a href='URL'>Menu element 1</a></li>
<li><a href='URL'>Menu element 2</a></li>
<li><a href='URL'>Menu element 3</a></li>
<li><a href=''URL'>Menu element 4</a></li>
<li><a href=''URL'>Menu element 5</a></li>
</ul>
</li>
<li><a href='URL'>Dropdown</a>
<ul>
<li><a href='URL'>Menu element 1</a></li>
<li><a href='URL'>Menu element 3</a></li>
<li><a href='URL'>Menu element 4</a></li>
<li><a href='URL'>Menu element 3</a></li>
<li><a href='URL'>Menu element 5</a></li>
</ul>
</li>
<li><a href='URL'>Dropdown</a>
<ul>
<li><a href='URL'>Menu element 1</a></li>
<li><a href='URL'>Menu element 2</a></li>
<li><a href='URL'>Menu element 3</a></li>
<li><a href='URL'>Menu element 4</a></li>
<li><a href='URL'>Menu element 5</a></li>
</ul>
</li>
<li><a href='URL'>Single Menu</a></li>
<li><a href='URL'>Single Menu</a></li>
<li><a href='URL'>Dropdown</a>
<ul>
<li><a href='URL'>Menu element 1</a></li>
<li><a href='URL'>Menu element 2</a></li>
<li><a href='URL'>Menu element 3</a></li>
<li><a href='URL'>Menu element 4</a></li>
<li><a href='URL'>Menu element 5</a></li>
</ul>
</li>
</ul>
</nav>
<!-- menu-search form -->
<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>
Αφού αντικαταστήσετε τους τίτλους και τα link είστε έτοιμη!
DEMO
Σχόλια