hoverで六角形が連結してで展開されていくメニューデザイン CSS Hex Menu Idea

hoverで六角形が連結してで展開されていくメニューデザイン CSS Hex Menu Idea
このエントリーをはてなブックマークに追加
PR

CSS Hex Menu Idea
By Matthew

hoverで六角形が連結してで展開されていくメニューデザイン CSS Hex Menu Idea

DEMO 表示

六角形をhoverすると子メニューが表示されて、さらに子メニューをhoverすると孫メニューが展開されるドロップダウン型のメニューを横方向に展開させた応用的なアイディアです

六角形は、長方形+上下に三角形をbeforeとafterでつけてる感じかな

 

クラス名に hex-rowと付いているものが トップレベル(親)になっています 子は sub-hex が付いているものがそれぞれの階層的に応じてます

HTML

<div id="back">
 Hex Menu
</div>
<div id="content">
 <div class="hex hex-row" >1階層目
 <div class="sub-hex hex">2階層目
 <div class="sub-hex hex">3階層目番</div>
 <div class="sub-hex hex bottom">
 <div class="sub-hex hex">4階層目
 <div class="sub-hex hex top">5階層目</div>
 <div class="sub-hex hex"></div>
 <div class="sub-hex hex bottom"></div>
 </div>
 <div class="sub-hex hex bottom"></div>
 </div>
 </div>
 </div>
 <div class="hex hex-row even" >
 <div class="sub-hex hex"></div>
 </div>
 <div class="hex hex-row"></div>
</div>

実に面白いメニューですね

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)