Breaking News

Home / Công nghệ / Thiết kế menu Navigation 2 (Drop Down menu) cho Blog/ Web

Thiết kế menu Navigation 2 (Drop Down menu) cho Blog/ Web

August 11, 2017

Đặt dưới thẻ </header>

<nav class='pi-navigation' id='main-nav'> 
<div class='main-menu'>
<ul class='menu' id='menu-main' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
<li itemprop='name'><a class='active' expr:href='data:blog.homepageUrl' itemprop='url'>Home</a></li>
<li><a href='#'>Business</a>
<ul class='sub-menu'>
 <li itemprop='name'><a href='#' itemprop='url'>Featured Image</a></li>
 <li itemprop='name'><a href='#' itemprop='url'>Slider</a></li>
 <li itemprop='name'><a href='#' itemprop='url'>SoundCloud</a></li>
 <li itemprop='name'><a href='#' itemprop='url'>Video</a></li>
</ul>
</li>
 <li itemprop='name'><a href='#' itemprop='url'>Fashion</a>
</li>
 <li><a href='#'>Sports</a>
<ul class='sub-menu'>
 <li itemprop='name'><a href='#' itemprop='url'>Full Width</a></li>
 <li itemprop='name'><a href='#' itemprop='url'>Right Sidebar</a></li>
 <li itemprop='name'><a href='#' itemprop='url'>Left SIdebar</a></li>
</ul>
</li>
<li itemprop='name'><a href='#' itemprop='url'>Games</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Technology</a></li>
<li itemprop='name'><a href='http://www.soratemplates.com/2016/01/mag-zilla-blogger-templates.html' itemprop='url'>Download This Template</a></li>       
</ul>
        <div id='searchformfix'>
          <form action='/search' id='searchform'>
            <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search for games, music, movies...&quot;;}' onfocus='if (this.value == &quot;Search for games, music, movies...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search for games, music, movies...'/>
            <input type='submit' value=''><i class='fa fa-search'/></input>
          </form>
        </div>
</div> 
</nav> 
<div class='clear'/> 
      <!-- secondary navigation menu end -->
Đặt trong thẻ </b:skin>

/*----navi-----*/
#nav {
font: normal bold 12px Arial, sans-serif;
text-transform: uppercase;
height: 59px;
line-height: 50px;
padding: 0 28px;
background: #F4F4F4;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
#main-nav {
margin: 0 auto;
width: 100%;
height: 60px;
background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 2px solid #5aa628;
}
#main-nav .menu-alert{
float:left;
padding:18px 0 0 10px ;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#main-nav ul li {
text-transform: uppercase;
font-family: 'Droid Sans', sans-serif;
font-size:16px;
position: relative;
display: inline-block;
float: left;
height:60px;
}
#main-nav ul li:last-child a{border-right:0 none;}
#main-nav ul li a {
display: inline-block;
height: 60px;
line-height: 60px;
padding: 0 16px;
text-decoration: none;
color: #b6b5b5;
font-family: Oswald,sans-serif;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
font-weight: 400;
line-height: 60px;
margin: 0;
padding: 0 .9em;
}
#main-nav ul li a.active {
color:#000;
}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding: 0;
position: absolute;
top: 60px;
width: 180px;
z-index: 99999;
float: left;
background: #2c2c2c;
}
#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border: 0 none;
font-size: 15px;
height: auto;
margin: 0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border: 0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-right: 0 !important;
z-index: 99999;
color: #fff !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { color:#000;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {background: #20C1DD !important; padding-left:15px !important;padding-right:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-left:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{

text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-left:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{
background: #222;
width: 710px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 0 0 10px;
}
#top-menu-mob{
width: 350px;
margin:2px 0 0 0;
}
#main-nav.fixed-nav{
position:fixed;
top:0;
left:0;
width:100% !important;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}
}
Đặt trên thẻ </head>

<script type='text/javascript'>
//<![CDATA[ 
jQuery(document).ready(function($){
  $(window).load(function(){
    $('.flexslider').flexslider({
        animation: "fade",
        slideshow: true,
        directionNav:true,
        slideshowSpeed: 5000,controlNav: true,
        smoothHeight: true,
        slideDirection: 'horizontal'
        });
   jQuery('.slides').addClass('loaded');
  }); 
 var aboveHeight = $('#leader-wrapper').outerHeight();
        $(window).scroll(function(){
                if ($(window).scrollTop() > 200){
                $('#main-nav').addClass('fixed-nav').css('top','0').next()
                .css('padding-top','0px');
                } else {
                $('#main-nav').removeClass('fixed-nav').next()
                .css('padding-top','0');
                }
        });
});
//]]>
</script>
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
Đặt trên đoạn code: <b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>
 @media only screen and (max-width:1024px){
        #selectnav1 {
          background: none repeat scroll 0 0 #333;
          border: 1px solid #232323;
          color: #FFF;
          width: 418px;
          margin: 8px 0px;
          float: left;
        }
.selectnav {
          display:block;
          width:50%;
          margin:0;
          padding:7px;
        }
}
      @media only screen and (max-width:768px){
        #selectnav1 {
          background: none repeat scroll 0 0 #333;
          border: 1px solid #232323;
          color: #FFF;
          width: 410px;
          margin: 8px 0px;
          float: left;
        }
        .selectnav {
          display:block;
          width:50%;
          margin:0;
          padding:7px;
        }
      }
      /* MEDIA QUERY */
      @media only screen and (max-width:1220px){
        #outer-wrapper {
          margin:0 auto;
width: 1000px;
        }
        #post-wrapper {
          width: 670px;
          max-width: 670px;
        }
                div#mywrapper {
          float: left;
          width: 670px;
        } 
.blog_featured_post.third, .blog_featured_post.fourth {
    width: 33.9%;
    height: 163px;
}
#sidebar-wrapper { 
max-width: 259px;
} 
#main-nav {
margin: 0 auto;
width: 1000px;
}
#sidebar-narrow { 
display: none;
}

.main-menu {
width: 940px;
margin: 0 auto;
}
}
@media only screen and (max-width:1024px){
.header {
    width: 100%;
    max-width: 100%;
    text-align: center;
}
.header img {
margin: 0 auto;
max-width: 100%;       
}
.header-right {
margin: 15px 0 20px 0;
width: 100%;
max-width: 100%;        
}

#menu-main {
    display: none;
}
.main-menu {
width: 680px;
margin: 0 auto;
}
#searchform input[type=text]:hover,#searchform input[type=text]:focus {width:150px;}
#my-slider {
    margin-left: 15px;
}
div#mywrapper {
    width: 100%;
}
#post-wrapper {
    width: 100%;
    max-width: 100%;
}
#sidebar-wrapper {
width:100%;
max-width:100%;
padding-left: 0;
border-left: 0;        
}

div#main {
    width: auto;
}
.blog_featured_post.second,.blog_featured_post.first,.blog_featured_post.third,.blog_featured_post.fourth {width: 100%;height:300px;margin-bottom: 9px;}
.blog_featured_post a .blog_contents{left:15px;right:15px;bottom:10px;}
.blog_featured_post.first a .blog_contents h3,.blog_featured_post a .blog_contents h3 {font-size: 20px;}
.blog_contents span{font-size:10px;padding:3px 10px;}
.blog_contents span:before{border-width: 17px 7px 0px;}
.blog_contents span:after{border-width: 0px 7px 16px;}
.main-menu {
padding: 5px 20px;
}
#searchformfix {
margin-top: 8px;
    width: 215px;
}
#searchform input[type=&quot;text&quot;] {
          width: 144px;}
#main-nav,#outer-wrapper {
width: 720px;
}
#slider {
overflow: hidden;
width: 100%;
}
#bottombar .center,#bottombar .center1,#bottombar .right, #bottombar .left{width:50%}
#related-posts a {
    width: 213px;
}
.breadcrumbs {
margin-left: 0;        
}
}
@media only screen and (max-width:767px){
#beakingnews {
width: 100%;
}      
#main-nav, #outer-wrapper {
width: 440px;
}
div#singlepage {
    width: 100%;
}
#menu-main {
    display: none;
}
.main-menu {
padding: 5px 20px;
width: 100%;
box-sizing: border-box;
}
#main-nav.fixed-nav {
position: relative;
opacity: 1;        
}
#selectnav1 { 
width: 100%;        
}
#my-slider {
margin-left: -6px;
}
div.conty {
width: 400px;
margin: 0 auto;
}
#searchformfix {
display: none;
}
.slider-navigator-outer {
display: none;
}
        #post-wrapper, #sidebar-wrapper { 
          width:100%;
          max-width:100%
        }
        .active {
          display: block;
        }
        .post-body img {
          max-width:100%;
        }
.img-thumbnail {
    margin: 0 0 15px 0;
    width: 100%;
    height: 220px;
}
.img-thumbnail img {
    width: 100%;
    height: 220px;
}
        .stylebox .widget {
          padding:0 0 10px 0;
        }
        #stylebox-1 .widget, #stylebox-3 .widget, #stylebox-5 .widget {
          padding:0 0 10px 0;
        }
        #stylebox-2 .widget, #stylebox-4 .widget, #stylebox-6 .widget ;stylebox-7 .widget{
          padding:0 0 10px 0;
        }
        .sidebar-container, .post-container {
          padding:15px 0 0px;
        }
        .widget li, .BlogArchive #ArchiveList ul.flat li {padding:0;}
ul.xpose_thumbs1 {
width: 100%;
}
.large-thumb {
width: 100%;
box-sizing: border-box;        
}
ul.xpose_thumbs22 {
width: 100%;        
}
ul.xpose_thumbs22 li, ul.xpose_thumbs2 li {
overflow: hidden;        
}
.stylebox {
width: 100%;        
}
.gallery-posts .def_wgr:first-child {
width: 100%;
margin: 0 0 20px 0;        
}
.gallery-posts .def_wgr:first-child img {
    width: 100%;
}
.gallery-posts .def_wgr {
    min-width: 76px;
    width: 76px;
    margin: 0 0 0px 0px;
}
.gallery-posts .def_wgr img {
    width: 76px;
    height: 76px;
}
#bottombar .center, #bottombar .center1, #bottombar .right, #bottombar .left {
    width: 100%;
}
#bottombar .left .widget, #bottombar .center .widget, #bottombar .center1 .widget {
    margin: 0 0 15px 0;
}
.footer-left {
    float: left;
    margin: 20px 0;
    color: #949494;
    width: 100%;
    text-align: center;
}
.footer-right {
display: none;        
}
.back-to-top {
display: none;        
}
.breadcrumbs {
display: none;        
}
.item .blog_featured_posts, .static_page .blog_featured_posts {
display: none;        
}
.item .post-container, .static_page .post-container {
padding: 0;        
}
h1.post-title a, h1.post-title {
    font-size: 24px !important;
}
#related-posts a {
    width: 183px;
}
}
      

@media only screen and (max-width:479px){
#outer-wrapper, #main-nav {
width: 300px;
}

ul.xpose_thumbs .xpose_thumb img {
    height: inherit;
        }
.top-menu {
padding: 0 10px 0 0;        
}

div#singlepage {
    width: 100%;
}
div.conty {
width: 254px;
margin: 0 auto;
}
#header-wrapper {
min-height: auto;        
}
.header {
margin: 0;        
}
.main-menu {
    padding: 5px 10px;
}
#searchformfix, .header-right {
display: none;
}
#content-wrapper {
padding: 0px 10px 0;        
}
        ul.xpose_thumbs1,ul.xpose_thumbs22{width:100%}
        #menu-main {
          display: none;
        }
        #sidebar-narrow{display:none}
        .header, .header-right, .stylebox,.stylebox1  {
    
          width:100%;
          max-width:100%
        }
        .header img {
          margin: 20px auto 0;
        }
        .largebanner .widget, #bottombar {
          padding:8px;
        }
        .stylebox .widget-content,.stylebox1  .widget-content {
          padding:0px;
        }
        h2.post-title, h1.post-title {
          font-size:16px;
        }
        #stylebox-1 .widget, #stylebox-3 .widget, #stylebox-2 .widget, #stylebox-4 .widget, #stylebox-5 .widget, #stylebox-6 .widget ,#stylebox-7 .widget{
          padding:0 0 8px 0;
        }
        .comments .comment-block, .comments .comments-content .inline-thread {
          padding:10px !important;
        }
        .comment .comment-thread.inline-thread .comment {
          margin: 0 0 0 0 !important;
        }
        .footer-left, .footer-right {
          text-align:center;
        }
.blog_featured_post.second, .blog_featured_post.first, .blog_featured_post.third, .blog_featured_post.fourth {height: 200px;}
ul.xpose_thumbs1 .xpose_thumb img {
    height: 200px;
}
ul.xpose_thumbs1 .xpose_thumb {
line-height: 1.5;        
}
h1.post-title a, h1.post-title {
    font-size: 20px !important;
}  
.item .post-container, .static_page .post-container {
    padding: 10px 0 0;
} 
div#author-box, .comment-info {
display: none;        
}
#related-posts a {
    width: 100%;
    margin-right: 0;
} 
#sidebar .widget-content {
overflow: hidden;    
}
h2.post-title {
clear: both;
}
.img-thumbnail, .img-thumbnail img {
height: 180px;        
} 
.index .post {
padding: 0 0 15px;        
}
}
      
@media screen and (max-width:319px){
#outer-wrapper, #main-nav {
width:220px;
}
#menu-main {
display: none;
}
.blog_featured_post.second, .blog_featured_post.first, .blog_featured_post.third, .blog_featured_post.fourth {
    height: 160px;
}
.blog_featured_post.first a .blog_contents h3, .blog_featured_post a .blog_contents h3 {
    font-size: 17px;
}
.blog_featured_post.first a .blog_contents h3 {
    font-size: 17px !important;
}
.blog_featured_posts {
margin-bottom: 5px        
}
.post-container {
    padding: 0;
}
div#mywrapper {
width: 100%;        
}
.img-thumbnail, .img-thumbnail img {
    height: 130px;
}
#sidebar-narrow, #sidebar-wrapper, .xpose_meta_comment, .more_meta{display:none !important}   
ul.xpose_thumbs22 .xpose_thumb2, ul.xpose_thumbs2 .xpose_thumb2 {display: none;}
ul.xpose_thumbs22 li, ul.xpose_thumbs2 li {min-height: auto;}
.gallery-posts .def_wgr:first-child {
min-width: 100%;        
height: 180px;
}
.gallery-posts .def_wgr {
    min-width: 50%;
    width: 50%;
}
.gallery-posts .def_wgr img {
    width: 100%;
    height: 90px;
}
.gallery-posts .def_wgr a.first_A {
    height: 90px;
}
h1.post-title a, h1.post-title {
    font-size: 19px !important;
}
}   
</style>
Nếu bạn muốn cho menu Navi đặt lên trên Banner, và thu gọn title trên Banner về bên trái, bạn đặt Code dưới đây phía trên mã code vừa đặt vào thẻ </b:skin>

/* HEADER WRAPPER */
#header-wrapper {
margin:0 auto;
overflow:hidden;
padding: 0 30px;
min-height: 154px;
    max-width: 1160px;
}
.header {
float:left;
width:45.7%;
max-width:457px;
margin: 27px 0;
}
.header h1.title,.header p.title {
font:normal bold 40px Fjalla One, Arial, Helvetica, sans-serif;
margin:0 0 0 0;
text-transform:uppercase;
}
.header .description {
color:#555555;
}
.header a {
color:#333333;
}
.header a:hover {
color:#ffd966;
}
.header img {
display:block;
}
.header-right {
float: right;
padding: 0;
overflow: hidden;
margin: 32px 0px 32px 0;
width: 70%;
max-width: 728px;
max-height: 90px;
}
.header-right img {
display:block;
}
.ngay-gio{font-size:11px;font-style:italic;float:right;color:#454545;font-weight:400;margin:0;padding:0}
Chúc các bạn thành công.
Người viết: Nguyễn Đạt Khánh


Popular Posts