このナビゲーションメニューを作成するにはどうすればいいですか？

Question

私は現在Wordpressサイトで作業しており、追加のナビゲーションメニューを追加したいと考えています。私はPhotoshopでこのナビゲーションメニューを設計しましたが、私はそれが私が作業しているWordpressテーマに実装する方法、または最初にどのようにコード化するのかについてはわかりません。これまでに設計したものはSceen captureです。私は、Visual EditorでWordpressで作成されたthisページの画像の下部に、ナビゲーションメニューとオレンジバーを追加したいと考えています。

私に何かガイダンスを提供できますか？

追加情報が必要な場合は、お尋ねください。

ありがとうございます。

P.S.私はこのnavメニューをWordpressのカスタマイズにするつもりはない。私はHTMLのリンクを変更することができます。

Answer 1

1つの方法は、親にcss3 transform: skew()を使用し、そのスキューを逆にしてテキストを正規化することです。その後、skew()の擬似要素を使用して辺を作成します。

絶対に、画像/境界線を持つ要素の下部にメニューを配置します。

body { 
 
    text-align: center; 
 
    min-height: 200vh; 
 
} 
 
header { 
 
    background: url('http://weknowyourdreams.com/images/monkey/monkey-04.jpg') center center no-repeat/cover; 
 
    border-bottom: 1em solid yellow; 
 
    min-height: 100vh; 
 
} 
 
nav { 
 
    transform: skew(-20deg); 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translate(-50%,50%) skew(-20deg); 
 
} 
 
a { 
 
    display: block; 
 
    background: yellow; 
 
    color: black; 
 
    padding: 1em; 
 
    transform: skew(20deg); 
 
    min-width: 100px; 
 
    position: relative; 
 
    margin: 0 0 1em; 
 
} 
 
a:before, a:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 50px; 
 
    top: 0; 
 
    height: 100%; 
 
    transform: skew(-20deg); 
 
    background: yellow; 
 
} 
 
a:before { 
 
    left: 0; 
 
    transform: skew(-20deg) translateX(-50%); 
 
} 
 
a:after { 
 
    right: 0; 
 
    transform: skew(-20deg) translateX(50%); 
 
}

<header> 
 
    <nav> 
 
    <a href="#">link</a> 
 
    <a href="#">link</a> 
 
    <a href="#">link</a> 
 
    <a href="#">link</a> 
 
    </nav> 
 
</header>

Answer 2

WordPressでの経験はあまりありませんが、正しく理解してHTMLでこれを行っていたら、イメージマップを使用して、クリック可能にしたい領域をマップし、そこにリンクを追加します。希望が助けてくれる！

Answer 3

私はそれが自明だと信じて、迅速な試みを行いました。

.my-nav { 
 
    list-style-type:none; 
 
    width: 200px; 
 
    text-align: center; 
 
} 
 
.my-nav li { 
 
    background: orange; 
 
    color: white; 
 
    transform: skew(20); 
 
    margin-bottom: 10px; 
 
    padding: 5px; 
 
    transform : skew(-20deg); 
 
    position: relative; 
 
    cursor: pointer; 
 
    transition: opacity 0.5s; 
 
} 
 
.my-nav li:hover{ 
 
    opacity: 0.5; 
 
    transition: opacity 0.5s; 
 
} 
 
.my-nav li:nth-child(1){ left: 75px;} 
 
.my-nav li:nth-child(2){ left: 60px;} 
 
.my-nav li:nth-child(3){ left: 45px;} 
 
.my-nav li:nth-child(4){ left: 30px;} 
 
.my-nav li:nth-child(5){ left: 15px;} 
 
.my-nav li:nth-child(6){ left: 0px;}

<ul class="my-nav"> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    <li>item 6</li> 
 
</ul>