jQuery:flexbox:メガドロップダウンメニュー
メガドロップダウンメニュー:完成版にリンク
※WORKSのみ実装しています
メガドロップダウン - Webデザインの勉強 ちょっとだけプログラムの勉強:参考サイト
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>メガドロップダウンメニュー</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"><!--AwesomeFont--> <link rel="stylesheet" href="style.css"> <script src="js/jquery-2.2.4.min.js"></script> <script> $(function(){ $('#mddNav > ul > li').hover(function(){ childPanel = $(this).children('.mddWrap'); childPanel.each(function(){ childPanel.css({height:'0',display:'block',opacity:'0'}).stop().animate({height:'250px',opacity:'1'},500,'swing'); }); },function(){ childPanel.css({display:'none'}); }); }); </script> </head> <body> <div id="container"> <header> <h1>メガドロップダウンメニュー</h1> </header> <div id="wrapper"> <nav id="mddNav"> <ul> <li><a href="#">WORKS</a> <div class="mddWrap"> <div class="mddInner"> <p><strong>WORKS</strong>DESIGN・HTML/CSS・SYSTEM 制作について紹介します。</p> <div class="dropContent"> <div> <span>DESIGN</span> <ul> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">コンセプトワーク</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">受賞リスト</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">実績紹介</a></li> </ul> </div> <div> <span>HTML/CSS</span> <ul> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">W3C推奨マークアップ</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">構築手順</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">構築実績</a></li> </ul> </div> <div> <span>SYSTEM</span> <ul> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">WEBシステム設計</a></li> <li><i class="fa fa-chevron-right" aria-hidden="true"></i><a href="#">データ解析</a></li> </ul> </div> </div><!--.dropContent--> </div><!-- /.mddInner --> </div><!-- /.mddWrap --> </li> <li><a href="#">PRODUCT</a></li> <li><a href="#">RECRUIT</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav><!-- /#mddNav --> <div id="content"> </div><!-- /#content --> </div><!-- /#wrapper --> <footer> <p><small>Copyright © メガドロップダウンメニュー</small></p> </footer> </div><!-- /#container --> </body> </html>
@charset "UTF-8"; /* CSS Document */ /* reset */ html, body, div, h1, p, blockquote, pre, ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; box-sizing: border-box; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } /*body { overflow-y: scroll; }*/ /*------------------------------------- */ header { height: 100px; background: #000; } h1 { width: 800px; margin: 0 auto; padding: 40px 0 0 8px; font-size: 28px; color: #FFF; } /* mddNav(ドロップダウンメニュー全体とナビボタン) ------------------------------------- */ #mddNav { position: relative; z-index: 100; width: 100%; height: 45px; background: #ebebeb; background: linear-gradient(to bottom, #ebebeb 45%,#d8d8d8 55%); border-top: #aaa 1px solid; border-bottom: #aaa 1px solid; } #mddNav > ul { display: flex; /*グローバルナビゲーションを横並びに*/ margin: 0 auto; width: 800px; height: 45px; text-align: center; } #mddNav > ul > li { width: 160px; height: 45px; border-left: #aaa 1px solid; box-sizing: border-box; } #mddNav > ul > li a { color: #666666; } #mddNav > ul > li:last-child { border-right: #aaa 1px solid; } #mddNav > ul > li > a { display: block; height: 45px; font-weight: bold; line-height: 45px; text-align: center; border: #fff 1px solid; transition: all 0.2s linear; } #mddNav > ul > li:hover > a { background: #FFF; } /* mddWrap ------------------------------------- */ #mddNav .mddWrap { position: absolute; top: 45px; left: 0; z-index: 100; overflow: hidden; /*display: none;*/ width: 100%; height: 250px; text-align: center; background: #fff; background: linear-gradient(to bottom, #fff 0%,#efefef 100%); border-bottom: #aaa 1px solid; box-shadow: 0 2px 2px #eee; } #mddNav .mddWrap .mddInner { margin: 0 auto; padding-top: 30px; width: 800px; height: 200px; line-height: 1.5em; text-align: left; } #mddNav .mddWrap .mddInner > .dropContent { display: flex; } #mddNav .mddWrap .mddInner > .dropContent > div { margin-right: 20px; width: 250px; /* float: left;*/ border-right: #aaa 1px solid; } #mddNav .mddWrap .mddInner > .dropContent > div:last-child { margin-right: 0; border-right: none; } #mddNav .mddWrap .mddInner > .dropContent > div > ul > li { line-height: 1.8em; } #mddNav .mddWrap .mddInner > .dropContent > div > ul > li i { margin-right: 0.5em; } #mddNav .mddWrap .mddInner > .dropContent > div > ul > li a:link { text-decoration: underline; } #mddNav .mddWrap .mddInner > .dropContent > div > ul > li a:hover { text-decoration: none; } #mddNav .mddWrap .mddInner p { margin-bottom: 20px; padding-left: 10px; line-height: 1.6em; border-left: #3571AA 5px solid; } #mddNav .mddWrap .mddInner p strong { font-size: 1.1em; display: block; } #mddNav .mddWrap .mddInner > div span { margin-bottom: 5px; font-weight: bold; } /*------------------------------------- */ .fa-chevron-right { color: #F00; } /*------------------------------------- */ footer { width: 100%; position: absolute; bottom: 0; left: 0; background: #000; } footer p { color: #FFF; padding: 30px 0; text-align: center; }