現在使用しているグローバル・ナビゲーション
現在、このブログで使用しているグローバルナビを公開します。
まず、HTMLの部分。ここに、HTMLによるメニューを追加します。
<div class="menubtn">MENU ▼</div> <nav id="cssmenu" class="togmenu"> <ul> <li><a href='/entry/2015/01/19/014609'><span>テーマRougeの詳細</span></a></li> <li><a href='/entry/2015/01/23/202819'><span>カラーの変更方法</span></a></li> <li><a href='/entry/2015/01/24/215144'><span>このサイトについて</span></a></li> </ul> </nav>
1行目は、レスポンシブでメニューをたたむ時に使うものです。
(とくに、今は気にしないでください。)
2行目以降が、メニューの中身。
(ここでは3つのページにリンクしています。)
これをこのまま表示するとこんな感じになります。
このままでは、何もデザインされていない状態なのでCSSでデザインします。
#cssmenu { border-top: 1px solid #79001e; background: #c70032; width: auto; } #cssmenu ul { list-style: none; margin: 0; padding: 0; line-height: 1; display: block; zoom: 1; font-size: 0; } #cssmenu ul:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } #cssmenu ul li { display: inline-block; padding: 0; margin: 0; } #cssmenu.align-right ul li { float: right; } #cssmenu.align-center ul { text-align: center; font-size: 0; } #cssmenu ul li a { color: #ffffff; text-decoration: none; display: block; padding: 15px 25px; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 14px; position: relative; -webkit-transition: color .25s; -moz-transition: color .25s; -ms-transition: color .25s; -o-transition: color .25s; transition: color .25s; } #cssmenu ul li a:hover { color: #79001e; } #cssmenu ul li a:hover:before { width: 100%; } #cssmenu ul li a:after { content: ""; display: block; position: absolute; right: -3px; top: 19px; height: 6px; width: 6px; background: #ffffff; } #cssmenu ul li a:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #79001e; -webkit-transition: width .25s; -moz-transition: width .25s; -ms-transition: width .25s; -o-transition: width .25s; transition: width .25s; } #cssmenu ul li.last > a:after, #cssmenu ul li:last-child > a:after { display: none; } #cssmenu ul li.active a { color: #009586; } #cssmenu ul li.active a:before { width: 100%; } #cssmenu.align-right li.last > a:after, #cssmenu.align-right li:last-child > a:after { display: block; } #cssmenu.align-right li:first-child a:after { display: none; } .menubtn { display:none; } .menubtn { padding: 15px 25px; background:#c70032; color: #fff; border-bottom: 1px solid #79001e; font-family: "Open Sans",sans-serif; font-weight: 700; font-size: 14px; line-height: 1; border-top: 1px solid #79001e; } @media screen and (max-width: 736px) { .menubtn { display:block; } .togmenu { display:none; } #cssmenu ul li { float: none; display: block; } #cssmenu ul li a { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #79001e; } #cssmenu ul li.last > a, #cssmenu ul li:last-child > a { border: 0; } #cssmenu ul li a:after { display: none; } #cssmenu ul li a:before { display: none; } #cssmenu { border-top: 0; } } #top-editarea { padding: 0px; } #blog-title { border-left: 1px solid #dadada; border-right: 1px solid #dadada; box-sizing: border-box; }
CSSの解説は・・・・。ちょっと長くてつらい・・・。
まあ、とりあえずデザインに関しては、下記のサイトからもらってきています。
それを、色を変え、ブログテーマのCSSに合うように改造、レスポンシブ対応を追加しました。
ちょっと、丁寧な解説になっていませんが、今回はこんなところで、すみません。