Chương mục lựa chọn

  • Trang chủ
  • Kỹ thuật tin học
  • Mạng Xã hội
  • Tiện ích
  • Truyện hay
  • Site Map
  • Print Friendly and PDF

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

    Views:

    Đặ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


    Author image
    About Me :
    Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :
    Bút danh: Khanh Nguyên, sinh năm: 1964.
    Nghề nghiệp: IT Computer Networking
    Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.

    Find us on Socail Media

    Show Comments: OR

    Không có nhận xét nào:

    Đăng nhận xét

    Mã Hóa Code

    BACK TO TOP