我將如何去做這個導航菜單？

-3

我目前正在一個Wordpress網站上工作，我想添加一個額外的導航菜單。我在photoshop上設計了這個導航菜單，但我不知道如何將它實現到我正在使用的Wordpress主題中，或者如何將它編碼到第一位。這是我迄今爲止設計的：Sceen capture。我希望能夠在this頁面中將該導航菜單和橙色條添加到圖像的底部，其中的內容是使用Visual Composer在Wordpress中製作的。我將如何去做這個導航菜單？

有人能爲我提供一些指導嗎？

如果您需要任何附加信息，請詢問。

在此先感謝。

P.S.我不在尋找這個導航菜單是在WordPress的定製。我可以更改HTML中的鏈接。

來源

2017-05-31 Mason Firman

https://stackoverflow.com/questions/30768489/css-skew-a-buttons-border-not-the-text也許這會給你的傾斜按鈕的提示。（如果你正試圖解決這個問題，只使用HTML/CSS）。 – ippi

一種方法是在父級上使用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>

來源

2017-05-31 15:37:37

非常感謝！太棒了。 –

@MasonFirman不客氣。這是有趣的:) –

我對WordPress沒有太多經驗，但是如果我正確理解了你，並且在HTML中這樣做，我會使用圖像映射來映射想要點擊的區域，並通過那裏添加鏈接。希望有所幫助！

來源

2017-05-31 15:30:08

好主意，但定位按鈕本身將是一個問題。我不確定我會如何使用CSS將按鈕集中放置在該形狀中。不管怎麼說，還是要謝謝你。 –

我做了一個快速的嘗試，我相信這是自我解釋。

.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>

來源

2017-05-31 15:43:39 ippi

是的，@邁克爾克勞克展示了上述類似的方法。感謝您的工作:) –

我將如何去做這個導航菜單？

回答

相關問題