In the upper correct side of this menu, nosotros convey the contact links in addition to social media icons for Facebook, Twitter, Google Plus in addition to RSS feed. Below these links, at that spot is the drop-down navigation card in addition to on the left side, the search form.
To laissez passer a amend user interface in addition to interaction, the CSS dropdown card features sub categories that seem alongside a squeamish deport upon of CSS3 box-shadow, text-shadow in addition to a cool transition 1 time the nurture link is activated yesteryear a hover selector.
Adding the CSS dropdown navigation card inwards Blogger
Step 1. Access your Blogger Dashboard in addition to instruct to "Template", in addition to then click on the "Edit HTML" button
Step 2. Next, click anywhere within the code expanse in addition to press the CTRL + F keys to opened upward the search box. Type the tag below within the search box in addition to hitting Enter to notice it.
</header>Step 3. Just below </header> add together the HTML construction of the dropdown menu:
<div id='contact-links'>
<div id='my-links'>
<a href='#'>About</a>
<a href='#'>Contact</a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgatIDSDIQFm9o7-4VGRFGnUJCXCyHspreMy60aq1lV-igGuRhO_xmnDumTd4t4BRDDaO_LEU7O0SscJCCQbu5e8zc-38ieC40eSGOHg6jTKwbqWUtQLYIZfsy02H3zTF-ryB_kenrEKCAw/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBnpM0rKxUnrSezCPOizoQ8-2w77LCJbQL1akKHUfOufKZCj6hzAmkVp9NlNfSj2q0AyVIyaOPKt54X74nKUd7m63bhdxangHsPQr6Im2fMD2vajaZyrS4Yn3XOCDUQORUzJAfq_y02Lwt/s1600/twitter.png' title='Twitter' width='18px' /></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQGvPlTXqfnzrT9rB2vn3iMPx8Z1n2HpgNJEP77435AytXxHdhDq1VcWZNPtynPmc__ntBkpm_hbOTvxAj5fQFlHlGF46qPovu4eDxbP_fQrO2SnGZdK1RXjz-Nf54AREOsDtc1ekIvXT/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwdwHkMZPB5W6koGFP-tv4EnEYWMS85Z6TQKIu6g8BL7evzHeitUAJU9XkejnBylWs0EHRQObhj2IP-qYEpY-vKdGCKdn-5eGq_in3pVBYGf80h1a86rdNne4CWuLqVzamAJ_wDyuPuLbE/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='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu chemical cistron 1</a></li>
<li><a href='#'>Menu chemical cistron 2</a></li>
<li><a href='#'>Menu chemical cistron 3</a></li>
<li><a href='#'>Menu chemical cistron 4</a></li>
<li><a href='#'>Menu chemical cistron 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu chemical cistron 1</a></li>
<li><a href='#'>Menu chemical cistron 2</a></li>
<li><a href='#'>Menu chemical cistron 3</a></li>
<li><a href='#'>Menu chemical cistron 4</a></li>
<li><a href='#'>Menu chemical cistron 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu chemical cistron 1</a></li>
<li><a href='#'>Menu chemical cistron 2</a></li>
<li><a href='#'>Menu chemical cistron 3</a></li>
<li><a href='#'>Menu chemical cistron 4</a></li>
<li><a href='#'>Menu chemical cistron 5</a></li>
</ul>
</li>
<li><a href='#'>Single Menu</a></li>
<li><a href='#'>Single Menu</a></li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu chemical cistron 1</a></li>
<li><a href='#'>Menu chemical cistron 2</a></li>
<li><a href='#'>Menu chemical cistron 3</a></li>
<li><a href='#'>Menu chemical cistron 4</a></li>
<li><a href='#'>Menu chemical cistron 5</a></li>
</ul>
</li>
</ul>
</nav>
<!-- menu-search shape -->
<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>
How to Set upward the Dropdown Menu
- Replace the # symbols alongside the URLs of your links in addition to supersede the texts in blue alongside the titles that yous desire to seem inwards the menu.
- To modify the social media icons, add together the links of your icons instead of the ones in blue. For to a greater extent than help, delight come across this tutorial on how to upload in addition to instruct the URL of an image.
- If yous desire to take away the sub categories, take away the code within the tags highlighted inwards yellow, including the ul tags. To take away alone a card element, take away the purpose that starts alongside <li> in addition to ends alongside </li>
]]></b:skin>Step 5. Just higher upward the ]]></b:skin> tag, add together this CSS 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 #FFF}#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 corporation 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:#333;display:block;font-size:14px;height:25px;line-height:25px;padding:11px 15px 10px;text-shadow:0 1px 0 #FFF}#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 corporation #2D81CC;border-top:1px corporation #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;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 corporation rgba(0,0,0,0.1);box-shadow:0 1px 0 #FFF 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 corporation #D1D1D1;box-shadow:0 1px 0 #FFF inset;color:#444;height:24px;line-height:24px;padding:7px 12px;text-shadow:0 1px 0 #FFF}#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 corporation #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;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/AVvXsEg2hZD3A46zoJ5iOrCyr3xHITX_OK7yRReEPmse-5XgguMzbEHUw6UMaEvd0PdHulRbgB7LlWh62scTpjSbmWbGcR1HSeTV0Ee0I2ptvjBCWg33Mk_FsznMvq9psZnN1U4F_JnoZ9pdaBiN/s1600/menu-search.gif) no-repeat scroll 5% 50% transparent;border:1px corporation #CCC;border-radius:3px 3px 3px 3px;box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFF;height:26px;padding:0 25px;position:relative;width:130px}#menu-search form:hover{background-color:#F9F9F9}#menu-search shape input{color:#999;font-size:13px;height:26px;text-shadow:0 1px 0 #FFF;background:none repeat scroll 0 0 transparent;border:medium none;float:left;outline:medium none;padding:0;width:100%}#menu-search shape input.placeholder,#menu-search shape input:-moz-placeholder{color:#C4C4C4}Step 6. Click on the "Save template" push to salve the changes in addition to you're done!
Hope yous similar this CSS3 dropdown card for Blogger in addition to if yous enjoyed the tutorial, delight percentage in addition to subscribe.
Comments