1ページまるごと使うユニークな六角形のメニューが面白い

WS002258
このエントリーをはてなブックマークに追加
PR
DEMO 表示

一面六角形で覆い尽くされた画面で、その六角形がメニューになるというものです
メニューにしたい六角形は HTMLを覗けば簡単に理解できると思います

全体をコピペして
テキスト部分だけ手を加えるだけでも使えるかとおもいます

 

class=”hex” とついているdiv内にspanで囲った文字をいれてやる

<span>文字</span>

 

ただこれだと、ただのテキストだけなので、リンク化するなら以下のように

<span><a href="">文字 テキスト</a></span>

 

さらにリンク化した場合には見た目が変わってしまうので 以下のCSSを追加すればOK

.hex a {
 color: #bbb;
 text-decoration: none;
}

 

トップページをこれを使ってメニューだけにしてしまうのも面白いかなと思います
六角形のところに画像をはめ込んで、人物紹介とかにも使ったら面白そうですね

PR

COMMENT

コメントを残す

PR

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

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

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

Twitter Facebook Google+ Feedly RSS

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