【コピペおk】はてなブログでかっちょいいグローバルナビゲーション（メニュー）作りたくね？〜その１〜

「上司には２種類のアホがいる。ムカつくアホか可愛いアホ」

はい〜カマスです

今日は「かっちょいいグローバルナビゲーション（メニュー）作りたくね？」

略してカチョナビその第１弾でございます！

コンセプトはタイトル通り、かっこいいメニューを作れるようになりたいねっていう企画です。

 

今回は私のブログでも使っているメニュー。といっても、もしかしたら変わってるかも〜〜

まあカッコイイと思ったらコピペしてみてね！

まずはHTML

まずはHTMLの部分を下に載せます。これをヘッダの「HTMLを記述できます」っていう欄にコピペするだけ！

<div class="header-bottom clearfix"> 
 <nav class="site-main-nav clearfix" data-container="#masthead .header-bottom">
     <ul id="menu-primary-navigation" class="main-menu mega-menu">
         <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children mm-item mm-item-has-sub active mm-popup-narrow mm-item-level-0 menu-item-1077">
             <a href="">
                 <span class="mm-text">Home</span>
             </a>
         </li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children mm-item mm-item-has-sub active mm-popup-narrow mm-item-level-0 menu-item-1077">
             <a href="">
                 <span class="mm-text">Web</span>
             </a>
             <div class="popup">
                 <div class="inner" style="">
                     <ul class="sub-menu">
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1075" data-column="1">
                             <a href="">
                                 <span class="mm-text">プログラム</span>
                             </a>
                         </li>
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1076" data-column="1">
                             <a href="">
                                 <span class="mm-text">デザイン</span>
                             </a>
                         </li>
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1078" data-column="1">
                             <a href="">
                                 <span class="mm-text">サーバー</span>
                             </a>
                         </li>
                     </ul>
                 </div>
             </div>
         </li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children mm-item mm-item-has-sub active mm-popup-narrow mm-item-level-0 menu-item-1077">
             <a href="">
                 <span class="mm-text">アソビ</span>
             </a>
             <div class="popup">
                 <div class="inner" style="">
                     <ul class="sub-menu">
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1075" data-column="1">
                             <a href="">
                                 <span class="mm-text">ゲーム</span>
                             </a>
                         </li>
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1076" data-column="1">
                             <a href="">
                                 <span class="mm-text">アウトドア</span>
                             </a>
                         </li>
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1078" data-column="1">
                             <a href="">
                                 <span class="mm-text">ギャグ</span>
                             </a>
                         </li>
                     </ul>
                 </div>
             </div>
         </li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children mm-item mm-item-has-sub active mm-popup-narrow mm-item-level-0 menu-item-1077">
             <a href="">
                 <span class="mm-text">生活</span>
             </a>
             <div class="popup">
                 <div class="inner" style="">
                     <ul class="sub-menu">
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1075" data-column="1">
                             <a href="">
                                 <span class="mm-text">便利グッズ</span>
                             </a>
                         </li>
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1076" data-column="1">
                             <a href="">
                                 <span class="mm-text">ライフハック</span>
                             </a>
                         </li>
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1078" data-column="1">
                             <a href="">
                                 <span class="mm-text">政治</span>
                             </a>
                         </li>
                     </ul>
                 </div>
             </div>
         </li>
         <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children mm-item mm-item-has-sub active mm-popup-narrow mm-item-level-0 menu-item-1077">
             <a href="">
                 <span class="mm-text">ヒトリゴト</span>
             </a>
             <div class="popup">
                 <div class="inner" style="">
                     <ul class="sub-menu">
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1075" data-column="1">
                             <a href="">
                                 <span class="mm-text">エンジョウ</span>
                             </a>
                         </li>
                         <li class="menu-item menu-item-type-post_type menu-item-object-page mm-item mm-item-level-1 menu-item-1076" data-column="1">
                             <a href="">
                                 <span class="mm-text">モンク</span>
                             </a>
                         </li>

                     </ul>
                 </div>
             </div>
         </li> 
         
         
        </ul> 
     </nav>
</div>

CSS

CSSは「デザインCSS」っていう欄にコピペ、出来れば一番下に貼り付けよう。

/* menu */
.header-bottom {
    border-top-color: #ddd;
    border-bottom-color: #ddd;
}
.header-bottom {
    border-top: 1px solid rgba(169, 174, 189, 0.3);
    border-bottom: 1px solid rgba(169, 174, 189, 0.3);
    text-align: center;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

.mega-menu > li > a {
    display: block;
    text-transform: uppercase;
    line-height: 30px;
    padding: 7px 25px;
}

.header-bottom .mega-menu > li {
    display: inline-block;
    float: none;
}

.mega-menu, .mega-menu ul.sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-menu > li {
    float: left;
    padding: 3px 0;
    position: relative;
}

.button, button, html input[type="button"], input[type="reset"], input[type="submit"], .btn, .la-overlay-global, .la-global-message .close-message i, #lastudio-reveal .close-button i, .header-toggle-cart .header_shopping_cart, .mega-menu .mm-popup-wide li li > ul, .mega-menu .mm-popup-narrow li > ul, .mega-menu > li, .accordion-menu li > .narrow i, .accordion-menu li > .narrow i:before, .sidebar-product-filters, .vc_btn3-container .vc_btn3.vc_btn3-color-la-primary:after, .loop--normal .team-member-item .item--info, .loop-style-4 .team-member-item .item--social, .la-banner-box .banner--info, .item--overlay {
    transition: all 250ms ease-out;
    -webkit-transition: all 250ms ease-out;
}

.header-bottom .mega-menu > li > a {
    font-weight: 600;
}

.mega-menu li > a {
    display: block;
    position: relative;
}

a {
    color: inherit;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mega-menu .popup {
    position: absolute;
    text-align: left;
    top: 100%;
    margin-top: 20px;
    z-index: 111;
    visibility: hidden;
    left: 0;
    -webkit-transition: margin .1s linear .3s,visibility .1s linear .3s,opacity .1s linear .3s;
    -moz-transition: margin .1s linear .3s,visibility .1s linear .3s,opacity .1s linear .3s;
    transition: margin .1s linear .3s,visibility .1s linear .3s,opacity .1s linear .3s;
    opacity: 0;
}

.mega-menu > li:hover > .popup {
    opacity: 0.97;
    visibility: visible;
    margin-top: 0;
}

.mega-menu .popup>.inner, .mega-menu .mm-popup-wide .inner>ul.sub-menu>li li ul.sub-menu, .mega-menu .mm-popup-narrow ul ul {
    background-color: #fff;
}

.mega-menu .popup > .inner {
    -webkit-box-shadow: 0 2px 12px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 2px rgba(0, 0, 0, 0.1);
}

.mega-menu .popup ul.sub-menu {
    position: relative;
    z-index: 10;
}

.mega-menu .mm-popup-narrow ul.sub-menu li, .mega-menu .mm-popup-wide .inner > ul.sub-menu > li li {
    position: relative;
}
.mega-menu .popup li {
    padding: 0;
    float: none;
}
.mega-menu li {
    display: block;
}

.mega-menu .mm-popup-wide .inner > ul.sub-menu > li li > a, .mega-menu .mm-popup-narrow li.menu-item > a {
    padding: 10px 25px;
}

.mega-menu > li:hover > a:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    height: 80px;
}
.header-bottom .mega-menu > li > a {
    font-weight: 600;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mega-menu li ul.sub-menu {
    min-width: 220px;
}

/* color setting*/

.mega-menu .mm-popup-wide .inner > ul.sub-menu > li li li:hover > a, .mega-menu .mm-popup-narrow li.menu-item:hover > a {
    color: #dc5e6a;
    background-color: rgba(0,0,0,0);
}

.mega-menu .popup li>a {
    color: #696c75;
    background-color: rgba(0,0,0,0);
}

.header-bottom .mega-menu>li.active>a {
    color: #ce1a2b;
    background-color: rgba(0,0,0,0);
}
.header-bottom .mega-menu>li:hover>a {
    color: #ce1a2b;
    background-color: rgba(0,0,0,0);
}

.header-bottom .mega-menu>li>a {
    color: #2b2c30;
    background-color: rgba(0,0,0,0);
}

.header-bottom .mega-menu>li>a >.mm-text{ color:#dc5e6a; }

もう深いことは考えずにコピペやで！

それで変更を保存するだけ！

これでデザインはOK!!!

最後にリンクやメニューの名前を変更

もう一度ヘッダーのHTMLに行って
自分に合ったメニュー名やリンクを入れ込もう。

作りたいメニューを受け付け

今後、こんなメニュー作りたーいとかあったら載せてみるんで教えてね！（出来なかったらごめん・・・）