How to make a menubar fixed on the top while scrolling
Demo: You can look at the menu of my blog top.
1. Insert the below code before ]]></b:skin> tag
#topmenu-outer{z-index:30; height:20px;width:100%;2. Add the below code affter <body> tagbackground:#545454; color:#fff; text-shadow:1px 1px 1px #000; top:0px;right:0px; position:fixed;padding:5px;}
#topmenu{width:990px;margin:auto;}
#topmenu1{width:790px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px; text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu { list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center;position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text- shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto; position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none; padding:10px 5px; }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px; line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0; float:none;text-align:left; width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}
<div id='topmenu-outer'>3. Save template and then come back to blog layout, you will see a new HTML widget on top of the blog layout. Then you insert the below code into that HTML:
<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML31' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == "") {this.value = "Tìm kiếm thủ thuật ...";}' onfocus='if (this.value == "Tìm kiếm thủ thuật ...") {this.value = ""}' tabindex='7' type='text' value='Tìm kiếm thủ thuật ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='www.voquocan.com'/>
</form></div>
<div style='clear:both'/>
</div>
</div>
<ul class="menu">Save land you done.
<li class="drop0"><a href="http://www.voquocan.com">Trang Chủ</a></li>
<li class="drop0"><a href="http://www.voquocan.com/p/sitemap.html">Sơ Đồ Blog</a></li>
<li class="drop0"><a href="http://www.voquocan.com/p/voquocan.html">About Me</a></li>
<li><a href="http://www.voquocan.com/p/sitemap.html" class="drop">Danh sách Label</a>
<div class="drop1">
<ul>
<li><a href="http://www.voquocan.com/search/label/Thủ thuật blog?max-results=5">Tất cả thủ thuật</a></li>
<li><a href="http://www.voquocan.com/search/label/Blogger?max- results=5">Blogger</a></li>
<li><a href="http://www.voquocan.com/search/label/Comments?max- results=5">Comments</a></li>
<li><a href="http://www.voquocan.com/search/label/Emoticons?max- results=5">Emoticons (Icons)</a></li>
<li><a href="http://www.voquocan.com/search/label/Bookmark?max- results=5">Bookmark</a></li>
</ul>
</div></li>
<li><a href="http://www.voquocan.com/p/sitemap.html" class="drop">Bài Viết Xem Nhiều</a>
<div class="drop2">
<div class="col">
<h3>Menu</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/03/top-menu.html">Float Menu</a></li>
<li><a href="http://www.voquocan.com/2012/02/drop-menu.html">Drop Menu 1</a></li>
<li><a href="http://www.voquocan.com/2012/03/top-menu.html">Drop Menu 2</a></li>
</ul>
</div>
<div class="col">
<h3>Template</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/share-template-01.html ">Template 01</a></li>
<li><a href="http://www.voquocan.com/2012/03/template.html">HTML</ a></li>
<li><a href="http://www.voquocan.com/2012/03/css01.html">CSS</a></ li>
</ul>
</div>
<div class="col">
<h3>Comments</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/threaded-comment.html" >Comments 6 cấp</a></li>
<li><a href="http://www.voquocan.com/2012/01/mot-giao-dien-khac- cho-threaded.html">Comments 2 cấp</a></li>
<li><a href="http://www.voquocan.com/2011/12/tao-khung-quick- comments-cho-blog-cbox.html"> Quick Comments</a></li>
</ul>
</div>
<div class="col">
<h3>Blogger</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/link.html">Liên kết blog</a></li>
<li><a href="http://www.voquocan.com/2011/01/ask.html">Hỏi - Đáp</a></li>
<li><a href="http://www.voquocan.com/2011/12/nhung-ieu-can-luu-y- khi-design-blog.html">Bí Quyết</a></li>
</ul>
</div></div></li></ul>
4. Customizing:
You can customize css in your own way.
In the second step: you change www.voquocan.com into your onw blog address
In the third step you can see 3 big classes:
» drop0: Main menus
» drop1: menu drop 1 colunm.
» drop2: menu drop 2 colunms
Change your own links as you want.
Source: http://thuthuat.voquocan.com/2012/03/fix-drop-menu.html
Đăng nhận xét