Xin chào mừng bạn đến với thủ thuật blogger, hôm nay mình sẽ giới thiệu cho các bạn một trong số những bài viết hay dành cho blogger, hiện nay có nhiều người đang tìm kiếm những menu ngang đẹp cho blogger nhưng điều đáng nói ở đây là menu thế nào là hợp lý với giao diện của bạn, vì thế để cải thiện những ý muốn đó tôi sẽ chia sẽ cho các bạn.
Sau đây là những menu ngang dành cho blogger các bạn có thể tham khảo:
Menu 1:
code
Sau đây là những menu ngang dành cho blogger các bạn có thể tham khảo:
Menu 1:
code
.menu li{
position:relative;list-style:none;
float:left;display:block;height:40px
}
.menu li a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwlo9YlPFytviyUzz__taLgxJ7Gtjx4nqT-32cF-TagQgB62o6PaWW_fUE11xVnzsJT5HWbD1uLjMmzruC-mchAPEXzPIShOU9YktQDNVocGh3Ktcai_SyHjpZZem9v0CrgF2oLLwCh3g/s1600/bagi.gif) no-repeat top right;
display:block;
text-decoration:none;font-
family:Arial;font-weight:700;
font-size:14px;color:#ddd;
text-shadow:1px 1px 1px #000;
-webkit-transition:color .2s ease-in-out;
-moz-transition:color .2s ease-in-out;
-o-transition:color .
2s ease-in-out;-ms-transition:color
.2s ease-in-out;transition:color .
2s ease-in-out;margin:0;
padding:12px 14px 12px
}
.menu li:first-child a{
padding:10px 10px 7px
}
.menu li:hover > a{color:#48d}
.menu ul{
position:absolute;top:41px;
left:0;opacity:0;
background:#fdfdfd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6o25UmxYX_T9tnLEFa99Awuvtmc_eZAkrGV3gIjhVh6MPPSLvazw8kNLJxuegr6jzqwfNuMWQv5Jv-bJFlfon5vsn1P50_3sisI8wlNlvek5mIwiuDk45uYxObRtFkaSgphUi6eOy3cM/s1600/menuhover.png)
repeat-x top;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
border:1px solid #666;
border-top:none;
-webkit-transition:opacity .25s ease .1s;
-moz-transition:opacity .25s ease .1s;
-o-transition:opacity .25s ease .1s;
-ms-transition:opacity .25s ease .1s;
transition:opacity .25s ease .1s
}
.menu li:hover > ul{opacity:1}
.menu ul li{
height:0;overflow:hidden;
-webkit-transition:height .25s ease .1s;
-moz-transition:height .25s ease .1s;
-o-transition:height .25s ease .1s;
-ms-transition:height .25s ease .1s;
transition:height .25s ease .1s;padding:0
}
.menu li:hover > ul li{
height:36px;
overflow:visible;
padding:0
}
.menu ul li a{
color:#111;font-weight:400;
width:100px;margin:0;
padding:10px 0 10px 30px;
text-shadow:none
}
.menu ul li:first-child a{
padding:10px 14px 10px 30px
}
.menu ul li:last-child a{
border:none
}
.menu a.trigger{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4SU6Gzr82UtBFi65bZbyr8skYrJmxzkj2c5soOm8bpt_mcW2i_XFo-Payo4aLIIjSirpfZyBHqgcj9oyg_JLhOZfdOz5aOxjVSk7B6m8tGifIogOhyphenhyphenc2jvJb9ZltJbBZe32CDWWmAGQ/s1600/arrow.png)
no-repeat 6px center
}
</style>
<div id='kenthir-wrapper'>
<ul class='menu' style="font-family:arial">
<li>
<a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTNgSABoum7qtafJdmCwsllAurjVTX9JwDHmWLOCbw2_GXrf89HhnUk65kKrcPllq-7McX5u6SinfeY_OI8KzO1R8BYX64nkmPacsSxcw3BdRGKnKY5xl_Pz5IaWjRzqKAcQOxDRNpco/s1600/home.gif' style='padding:0px;' /></a>
</li>
<li><a href='#'>About Me</a></li>
<li><a href='#'>Linh Tinh</a>
<ul>
<li><a class='trigger' href='#'>Sub Menu 1</a></li>
<li><a class='trigger' href='#'>Sub Menu 2</a></li>
<li><a class='trigger' href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Label</a>
<ul>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Thủ thuật'>Thủ Thuật</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Trangtrí'>TrangTrí</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Phần Mềm'>PhầnMềm</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Thiết kế'>Thiết Kế</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Widget'>Widget</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Hiệu ứng'>Hiệu Ứng</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Mẫu'>Khung Chứa</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Mẫu'>Mẫu</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Mẫu'>Mẫu Thư</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Web'>Web</a></li>
<li><a class='trigger' href='http://www.insurancefinances.com/search/label/Khéo tay'>Khéo Tay</a></li>
</ul>
</li>
<li><a href='http://www.insurancefinances.com/p/blog-page_4994.html'>Mã Hóa</a></li>
<li><a href='http://www.insurancefinances.com/p/blog-page_24.html?zx=b3c3ea75124923c4'>HEX Code</a></li>
</ul>
</div>
<!-- end .menu -->
Preview:
Dạng menu 2:
code:
<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li>
<a href="http://www.testtemplatekhoi.blogspot.com/">Home</a>
</li>
<li>
<a href="#">Categories</a>
<ul>
<li>
<a href="#">CSS</a>
<ul>
<li>
<a href="#">Item 11</a>
</li>
<li>
<a href="#">Item 12</a>
</li>
<li>
<a href="#">Item 13</a>
</li>
<li>
<a href="#">Item 14</a>
</li>
</ul>
</li>
<li>
<a href="#">Graphic design</a>
<ul>
<li>
<a href="#">Item 21</a>
</li>
<li>
<a href="#">Item 22</a>
</li>
<li>
<a href="#">Item 23</a>
</li>
<li>
<a href="#">Item 24</a>
</li>
</ul>
</li>
<li>
<a href="#">Development tools</a>
<ul>
<li>
<a href="#">Item 31</a>
</li>
<li>
<a href="#">Item 32</a>
</li>
<li>
<a href="#">Item 33</a>
</li>
<li>
<a href="#">Item 34</a>
</li>
</ul>
</li>
<li>
<a href="#">Web design</a>
<ul>
<li>
<a href="#">Item 41</a>
</li>
<li>
<a href="#">Item 42</a>
</li>
<li>
<a href="#">Item 43</a>
</li>
<li>
<a href="#">Item 44</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work</a>
<ul>
<li>
<a href="#">Work 1</a>
<ul>
<li>
<a href="#">Work 11</a>
<ul>
<li>
<a href="#">Work 111</a>
</li>
<li>
<a href="#">Work 112</a>
</li>
<li>
<a href="#">Work 113</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 12</a>
<ul>
<li>
<a href="#">Work 121</a>
</li>
<li>
<a href="#">Work 122</a>
</li>
<li>
<a href="#">Work 123</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 13</a>
<ul>
<li>
<a href="#">Work 131</a>
</li>
<li>
<a href="#">Work 132</a>
</li>
<li>
<a href="#">Work 133</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 2</a>
<ul>
<li>
<a href="#">Work 21</a>
<ul>
<li>
<a href="#">Work 211</a>
</li>
<li>
<a href="#">Work 212</a>
</li>
<li>
<a href="#">Work 213</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 22</a>
<ul>
<li>
<a href="#">Work 221</a>
</li>
<li>
<a href="#">Work 222</a>
</li>
<li>
<a href="#">Work 223</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 23</a>
<ul>
<li>
<a href="#">Work 231</a>
</li>
<li>
<a href="#">Work 232</a>
</li>
<li>
<a href="#">Work 233</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 3</a>
<ul>
<li>
<a href="#">Work 31</a>
<ul>
<li>
<a href="#">Work 311</a>
</li>
<li>
<a href="#">Work 312</a>
</li>
<li>
<a href="#">Work 313</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 32</a>
<ul>
<li>
<a href="#">Work 321</a>
</li>
<li>
<a href="#">Work 322</a>
</li>
<li>
<a href="#">Work 323</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 33</a>
<ul>
<li>
<a href="#">Work 331</a>
</li>
<li>
<a href="#">Work 332</a>
</li>
<li>
<a href="#">Work 333</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
Preview:
Post a Comment
Post a Comment