Inside the navigation we have some links, a search input and top & bottom buttons making it easier for the user to navigate to the top or bottom of the page.
If you want to add this horizontal menu with CSS/jQuery to a Blogger blog, follow the steps below:
1. Log into your Blogger account and select your blog, then go to "Template" and press the "Edit HTML" button.
2. Click anywhere inside the code area and search using CTRL + F keys, this tag:
</head>3. Just above/before the </head> tag, add the following scripts and CSS code for the jQuery menu:
<style type="text/css">#nav{height:35px;border-bottom:1px solid #ddd;position:fixed;top:0;left:0;right:0;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFDhOx2RcKlni2GVnFTWdWcMS2LMVma3WCFdUoGyBk-YKh5Xigvs1EbfJ9tSHzst02ck-1NtbqsYEACUtS1k7nA9ne9ODINzlZaovteiZP_XETuTazVtgR6f82Ldw1DwF2ddJh6PJuGxf/s1600/navbar.png) repeat-x center left;z-index:999999}#nav ul{height:25px;list-style:none;margin:6px auto 0;width:600px}#nav ul li{display:inline;float:left;margin:0 2px}#nav a{font-size:11px;font-weight:700;float:left;padding:2px 4px;color:#999;text-decoration:none;border:1px solid #ccc;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVxhyQ-kANrjHts7xvvbnekgl_LMGYYwUaX1aDBU8QSqKNYNcMxd0xOCe3qjEQhduz0W9C_YgyhoF3TqgTX-YPnh8LhyphenhyphenQh61kafTxutMnn4CIuyjZqGwBjWNgd5-KvlD80OiUBVUg0q2N/s1600/overlay.png) repeat-x center left;height:16px;line-height:16px}#nav a:hover{background-color:#D9D9DA;color:#fff}#nav a.top span,#nav a.bottom span{float:left;width:16px;height:16px}#nav a.top span{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIlXs3Rgei_tt0q_YEBtgiTYXcqyTq9gAJYpxi4XNVys3doBo1buYYXZwuvOwfYnV0AOcHsB7cIF1AK4ARC6Y51DpuratEDTH4Ml7kkBUBzx7lyUPL_qmrKJuOWRpNosxGwvy0VGrpiuL3/s1600/top.png) no-repeat center center}#nav a.bottom span{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8h62B-MI7CTSYd0WcrvcH_2ps3HlGR9tCUtFAAhwTa2YlXPA5od3qDrl9H-6W8nJce8gJsewwG3evBD8UVSPMSjFvn49BfDQClcNx7Fny5Y2hR0t946Nu8tOYseDPbpkqrU5isAQeg_a/s1600/bottom.png) no-repeat center center}#nav ul li.search{float:right}#nav input[type="text"]{float:left;border:1px solid #ccc;margin:0 1px 0 50px;padding:2px;line-height:16px}input.searchbutton{border:1px solid #ccc;padding:1px;cursor:pointer;width:26px;line-height:16px;background:#E8E9EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxnlEZJgOxkCqf5YfgUfEmW3Mp9hyphenhyphenc8wxlkZEE-otRVwacVTCLj_rpnhMGaKXydAldK_BgLqo2969GrfdESYjlw07Ilsato10Po9z_kduSQhMAyMzvM0x2Nir8IXmwB2YavFJeqvEATb5/s1600/search.png) no-repeat center center}input.searchbutton:hover{background-color:#D9D9DA}</style>4. Next, search for this tag:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript">//<![CDATA[
$(function(){$(window).scroll(function(){var a=$(window).scrollTop();0!=a?$("#nav").stop().animate({opacity:"0.2"},400):$("#nav").stop().animate({opacity:"1"},400)}),$("#nav").hover(function(a){var b=$(window).scrollTop();0!=b&&$("#nav").stop().animate({opacity:"1"},400)},function(a){var b=$(window).scrollTop();0!=b&&$("#nav").stop().animate({opacity:"0.2"},400)})});//]]></script>
<body>If you can't find it, search for this one:
<body expr:class='"loading" + data:blog.mobileClass'>5. Just below/after this code, copy and paste the HTML structure of the menu:
<div id="nav">Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the link title that will show in the menu.
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li>
<li class="search">
<form method="get" action="/search">
<input name="q" type="text" placeholder="Search..."/><input type="submit" value="" class="searchbutton"/>
</form>
</li>
</ul>
</div>
<div id="top"></div>
6. Finally, search for the following tag:
</body>Just above the </body> tag, add the following HTML code:
<div id="bottom"></div>7. Click the "Save Template" button and you're done adding the menu. Enjoy!
Credit: Tympanus. This menu was inspired by David Walsh's top navigation bar.
