0

メインナビゲーションとして使用している六角形のメニューごとに背景画像を配置しようとしています。しかし、六角形のメニュー内に背景画像を表示するコードを実装する方法がわかりません。以下に、CSS と HTML コードを示します。

CSS 

    ul.hex {padding:0; margin: 50px auto; list-style: none; width:104px; height:60px;       position:relative;} 

    ul.hex li a {display:block; width:104px; height:60px; position:absolute; left:0; top:0;    z-index:100; text-align:center; text-decoration:none; font:normal 18px/60px "Arial"; color: #fff;
    outline: 0;
}

    ul.hex li a:before {display: block; content:""; width:104px; height:60px; position:absolute;    left:0; top:0; z-index:-1;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

ul.hex li a:after {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}

ul.hex li:nth-child(1) a,
ul.hex li:nth-child(1) a:before,
ul.hex li:nth-child(1) a:after {background:#cb3927;
}

ul.hex li:nth-child(1) a:hover,
ul.hex li:nth-child(1) a:hover:before,
ul.hex li:nth-child(1) a:hover:after {background-color:#cb3927; color:#fff;
}

ul.hex li:not(:first-child) a,
ul.hex li:not(:first-child) a:before,
ul.hex li:not(:first-child) a:after {background-color:#fff; color:#8d0f26;
}

ul.hex li:not(:first-child) a:hover,
ul.hex li:not(:first-child) a:hover:before,
ul.hex li:not(:first-child) a:hover:after {background-color:#8d0f26; color:#f36e33 ;
}

ul.hex li {width:104px; height:60px; position:absolute; left:106px; top:0;
-webkit-transform-origin: -54px 30px;
-moz-transform-origin: -54px 30px;
-ms-transform-origin: -54px 30px;
-o-transform-origin: -54px 30px;
transform-origin: -54px 30px;
}

ul.hex li:nth-child(1) {left:0;}

ul.hex li:nth-child(3) {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

ul.hex li:nth-child(3) a {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}

ul.hex li:nth-child(4) {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}

ul.hex li:nth-child(4) a {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
transform: rotate(-120deg);
}

ul.hex li:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

ul.hex li:nth-child(5) a {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}`

ここのHTML は、ナビゲーションに使用しているリンクの順序付けられていないリストです

<div id="hexagon">
<ul class="hex">
    <li><a href="">HOME</a></li>
    <li><a href="">ABOUT</a></li>
    <li><a href="">BLOG</a></li>
    <li><a href="">WORK</a></li>
    <li><a href="">CONTACT</a></li>
</ul>
</div>
4

1 に答える 1

0

この以前に回答された質問が役立つと思います。
彼は基本的に、わずかに異なる方法でエクサゴンを構築していますが、実装するのはそれほど難しくありません。

于 2013-04-16T22:40:11.347 に答える