Thứ Năm, 2 tháng 6, 2016

XEM BÀI VIÊT
TOÀN MÀN HÌNH

Menu ngang đẹp cho blogspot


CODE MENU:
<div class='top-navigation' id='primary-navigation' role='navigation'>
<div class='navigation-item'>
<ul class='top-menu-items top-menu' id='top-menu-items'>
<li><a href='/'><i class='fa fa-home'></i> Home</a></li>
<li><a href='#contact'><i class='fa fa-envelope'></i> Contact</a></li>
<li><a href='#sitemap'><i class='fa fa-list'></i> Sitemap</a></li>
<li><a href='#disclaimer'><i class='fa fa-check-circle'></i> Disclaimer</a></li>
<li><a href='#'>Menu</a>
<ul class='sub-menu'>
<li><a href='#'>Bangsa Indonesia</a></li>
<li><a href='#'>Indonesia Maju</a></li>
<li><a href='#'>Indonesia Merdeka</a></li>
</ul>
</li>
<li><a href='#'>Menu</a>
<ul class='sub-menu'>
<li><a href='#'>Menu 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
</ul>
</li>
</ul>
<form action='/search' class='searchform' id='searchform' method='get' role='search'>
<div>
<div class='hamburger hamburger-search'></div>
<input class='field' id='s' name='q' placeholder='Search' type='text'/>
</div>
</form>
</div>
</div>
<a class='mobile-menu' href='#primary-navigation'>
<div class='hamburger hamburger-menu'></div></a>
CSS:
/* CSS Indominus Phantom Top Navigation */
.top-navigation{font-family:Arial;background-color:rgba(255,255,255,.98);margin:auto;padding:0;border-bottom:1px solid #eaeaea}.top-menu,.top-menu *{margin:0;padding:0;list-style:none}.top-menu>li{float:left}.top-menu li{position:relative}.top-menu ul{position:absolute;display:none;top:100%;left:0;z-index:99}.top-menu li:hover>ul,.top-menu li.top-menuhover>ul{display:block}.top-menu a{display:block;position:relative;text-decoration:none;}.top-menu-items a{font-size:12px;padding:18px;color:#333;letter-spacing:.5px}.top-menu-items a:hover,.top-menu-items a:visited:hover{background-color:#fff;color:#07ACEC}.top-menu-items .sub-menu a:hover{background-color:rgba(7, 172, 236, 0.98);color:#fff}.hamburger-menu:before{content:"\f0c9";font-family:FontAwesome}.top-menu ul ul{top:0;left:100%}.top-menu-arrow>li>.top-menu-inner:focus:after,.top-menu-arrow>li:hover>.top-menu-inner:after{border-top-color:#07ACEC}.top-menu-arrow>.top-menuhover>.top-menu-inner:after,.top-menu-items .sub-menu .top-menu-arrow>a>.top-menu-inner:after{border-top-color:#fff}.top-menu-arrow .top-menu-inner{padding-right:2.5em}.sub-menu a{padding:15px;color:#fff}.top-menu-arrow .top-menu-inner:after{content:'';position:absolute;top:50%;right:1em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:rgba(0,0,0,.5)}.top-menu-arrow ul .top-menu-inner:after{margin-top:-5px;margin-right:-3px;border-color:transparent;border-left-color:rgba(255,255,255,.7)}.top-menu-arrow ul li>.top-menu-inner:focus:after,.top-menu-arrow ul li:hover>.top-menu-inner:after,.top-menu-arrow ul .top-menuhover>.top-menu-inner:after,.top-menu-arrow ul .top-menu-items .sub-menu a>.top-menu-inner:after,.top-menu-items .sub-menu .top-menu-arrow ul a>.top-menu-inner:after{border-left-color:#fff}.top-menu-items{width:74.57627%;float:left;margin-right:1.69492%}.top-menu-items .top-menuhover,.top-menu-items .sub-menu a{background-color:rgba(25,25,25,.9)}.widget-master .widget_nav_menu div{padding:0}.sider-page,.sider-fixed-top,.sider-fixed-bottom,.sider-menu.sider-horizontal>.sider-panel{transition:none .4s ease;transition-property:top,right,bottom,left,border}html.sider-opened .sider-page,html.sider-opened #sider-blocker{left:0;top:0;margin:0;border:0 solid transparent}html.sider-opening .sider-page,html.sider-opening #sider-blocker{border:0 solid rgba(100,100,100,0)}.sider-menu .sider-hidden{display:none}.sider-fixed-top,.sider-fixed-bottom{position:fixed;left:0}.sider-fixed-top{top:0}.sider-fixed-bottom{bottom:0}html.sider-opened .sider-page,.sider-menu>.sider-panel{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}html.sider-opened{overflow-x:hidden;position:relative}html.sider-opened .sider-page{position:relative}html.sider-background .sider-page{background:inherit}#sider-blocker{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)transparent;display:none;width:100%;height:100%;position:fixed;z-index:999}html.sider-opened #sider-blocker,html.sider-blocking #sider-blocker{display:block}.sider-menu.sider-current{display:block}.sider-menu a:hover{color:#fff}.sider-menu{background:inherit;display:none;overflow:hidden;height:100%;padding:0;position:fixed;left:0;top:0;z-index:0}.sider-menu>.sider-panel{background:inherit;-webkit-overflow-scrolling:touch;overflow:scroll;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;padding:0;position:absolute;top:0;left:100%;z-index:0}.sider-menu>.sider-panel.sider-opened{left:0;padding:0}.sider-menu>.sider-panel.sider-subopened{left:-40%}.sider-menu>.sider-panel.sider-highest{z-index:1}.sider-menu>.sider-panel.sider-hidden{display:block;visibility:hidden}.sider-menu .sider-list{padding:0}.sider-menu>.sider-list{padding:20px 0 40px}.sider-panel>.sider-list{margin-left:0;margin-right:0;width:100%;float:none}.sider-panel>.sider-list:first-child{padding-top:0}.sider-list,.sider-list>li{list-style:none;display:block;padding:0;margin:0}.sider-list{font:inherit;font-size:14px}.sider-list a,.sider-list a:hover{text-decoration:none;font-size:14px}.sider-list>li{position:relative}.sider-list>li>a,.sider-list>li>span{font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:inherit;line-height:20px;display:block;padding:10px 10px 10px 20px;margin:0}.sider-list>li:not(.sider-subtitle):not(.sider-label):not(.sider-noresults):after{content:'';border-bottom-width:1px;border-bottom-style:solid;display:block;width:100%;position:absolute;bottom:0;left:0}.sider-list>li:not(.sider-subtitle):not(.sider-label):not(.sider-noresults):after{width:auto;margin-left:20px;position:relative;left:auto}.sider-list a.sider-subopen{background:#292929;width:40px;height:100%;padding:0;position:absolute;right:0;top:0;z-index:2}.sider-list a.sider-subopen:hover{background:#07ACEC}.sider-list a.sider-subopen:before{content:'';border-left-width:1px;border-left-style:solid;display:block;height:100%;position:absolute;left:0;top:0}.sider-list a.sider-subopen.sider-fullsubopen{width:100%}.sider-list a.sider-subopen.sider-fullsubopen:before{border-left:none}.sider-list a.sider-subopen+a,.sider-list a.sider-subopen+span{padding-right:5px;margin-right:40px}.sider-list>li.sider-selected>a.sider-subopen{background:transparent}.sider-list>li.sider-selected>a.sider-fullsubopen+a,.sider-list>li.sider-selected>a.sider-fullsubopen+span{padding-right:45px;margin-right:0}.sider-list a.sider-subclose{text-indent:20px;padding-top:30px;margin-top:-20px}.sider-list>li.sider-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:10px;text-transform:uppercase;text-indent:20px;line-height:25px;padding-right:5px}.sider-list>li.sider-spacer{padding-top:40px}.sider-list>li.sider-spacer.sider-label{padding-top:25px}.sider-list a.sider-subopen:after,.sider-list a.sider-subclose:before{content:'';border:2px solid transparent;display:block;width:7px;height:7px;margin-bottom:-5px;position:absolute;bottom:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.sider-list a.sider-subopen:after{border-top:none;border-left:none;right:18px}.sider-list a.sider-subclose:before{border-right:none;border-bottom:none;margin-bottom:-15px;left:22px}.sider-menu.sider-vertical .sider-list .sider-panel{display:none;padding:10px 0 10px 10px}.sider-menu.sider-vertical .sider-list .sider-panel li:last-child:after{border-color:transparent}.sider-menu.sider-vertical .sider-list li.sider-opened>.sider-panel{display:block}.sider-menu.sider-vertical .sider-list>li.sider-opened>a.sider-subopen{height:40px}.sider-menu.sider-vertical .sider-list>li.sider-opened>a.sider-subopen:after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:16px;right:16px}html.sider-opened .sider-page{box-shadow:0 0 10px rgba(0,0,0,.2)}.sider-ismenu{background:#363636;color:rgba(255,255,255,.7)}.sider-menu .sider-list>li:after{border-color:rgba(0,0,0,.15)}.sider-menu .sider-list>li>a.sider-subclose{background:rgba(0,0,0,.1);color:rgba(255,255,255,.3)}.sider-menu .sider-list>li>a.sider-subopen:after,.sider-menu .sider-list>li>a.sider-subclose:before{border-color:rgba(255,255,255,.5)}.sider-menu .sider-list>li>a.sider-subopen:hover:after,.sider-menu .sider-list>li>a.sider-subclose:hover:before{border-color:rgba(255,255,255,1)}.sider-menu .sider-list>li>a.sider-subopen:before{border-color:rgba(0,0,0,.15)}.sider-menu .sider-list>li.sider-selected>a:not(.sider-subopen),.sider-menu .sider-list>li.sider-selected>span{background:rgba(0,0,0,.1)}.sider-menu .sider-list>li.sider-label{background:rgba(255,255,255,.05)}.sider-menu.sider-vertical .sider-list li.sider-opened>a.sider-subopen,.sider-menu.sider-vertical .sider-list li.sider-opened>ul{background:rgba(255,255,255,.05)}html.sider-opening .sider-page,html.sider-opening #sider-blocker,html.sider-opening .sider-fixed-top,html.sider-opening .sider-fixed-bottom{left:80%}.sider-menu{width:80%}.flex-direction-nav{padding:5px 0;overflow:hidden}.flex-direction-nav .flex-prev{float:left}.flex-direction-nav .flex-next{float:right}.searchform{width:0;float:right;margin-right:20px;position:relative;color:#ddd;}.searchform div{position:relative;float:right}.searchform .hamburger{display:inline-block;color:#999;right:8px;top:20px;width:18px;height:18px;line-height:18px;font-size:15px;position:absolute}.hamburger-search:before{content:"\f002";font-family:FontAwesome}.searchform .field{padding:10px;background-color:transparent;margin-top:9px;border:1px solid #eaeaea;padding-left:8px;width:210px;transition:all 400ms ease-in-out 0s}.searchform .field:focus{border-color:#dadada}@media screen and (min-width:641px){#menu-utama{display:block;position:fixed;z-index:99;width:100%;margin:auto;max-width:100%;-webkit-transform:translateZ(0)}.mobile-menu,.tinynav{display:none}.searchform,.main-navigation-items{display:block}}@media screen and (max-width:640px){.top-menu-items a:hover,.top-menu-items a:visited:hover,.top-menu-items .top-menuhover,.top-menu-items .sub-menu a{background-color:#07ACEC;color:#fff}.mobile-menu{display:block;position:fixed;width:100%;background:#fff;z-index:50;-webkit-transform:translateZ(0);opacity:.96;border-bottom:1px solid #e9e9e9}.mobile-menu .hamburger{display:inline-block;background:#07ACEC;font-size:25px;padding:10px;color:#fff;cursor:pointer}.mobile-menu .hamburger:hover{display:inline-block;background:#292929;color:#fff}#menu-utama,.searchform,.main-navigation-items{display:none}.tinynav{display:block}}@media all and (min-width:550px){.sider-menu{width:440px}html.sider-opening .sider-page,html.sider-opening #sider-blocker,html.sider-opening .sider-fixed-top,html.sider-opening .sider-fixed-bottom{left:440px}}@media all and (max-width:175px){.sider-menu{width:140px}html.sider-opening .sider-page,html.sider-opening #sider-blocker,html.sider-opening .sider-fixed-top,html.sider-opening .sider-fixed-bottom{left:140px}}
Chèn code dưới vào trước </body>
<script src='https://cdn.rawgit.com/Arlina-Design/phantom/master/masternav.js'></script>
<script type='text/javascript'>
//<![CDATA[
// Menu
var $=jQuery.noConflict();$(document).ready(function(){$("#primary-navigation").clone().attr("id","menu-utama").insertBefore("#primary-navigation"),$("#primary-navigation ul").removeClass("top-menu"),$("#primary-navigation").mmenu(),$("ul.top-menu").supersubs({minWidth:12,maxWidth:27,extraWidth:1}).superfish({delay:50,animation:{opacity:"show",height:"show"},speed:"fast"}),$("#main-navigation .main-navigation-items").tinyNav({active:"current-menu-item"})}),$(window).load(function(){$(document).imagesLoaded(function(){$("#carousel").flexslider({animation:"slide",controlNav:!1,directionNav:1,prevText: "&laquo; Previous",nextText: "Next &raquo;",animationLoop:1,slideshow:!1,itemWidth:109.5,minItems:4,asNavFor:"#slider"}),$("#slider").flexslider({animation:"slide",controlNav:!1,directionNav:1,prevText: "&laquo; Previous",nextText: "Next &raquo;",animationLoop:1,slideshowSpeed:5e3,sync:"#carousel"})})});
//]]>
</script>
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh

0 nhận xét:

Ads by Google