中間の画像を持つWordPressメニュー

Question

私はその途中に画像を持つメニューを作成しようとしています。例えば、画像の右に3つ左の&のリンクがある場合、各メニュー項目はすべての子ページもリストアップする必要があります。

親レベルのメニュー項目は、CMSに入力された内容に基づいてテキストを動的に更新する必要がありますが、ユーザーはメニューの項目の並べ替えや追加/削除が不要です。

上記を実行する最善の方法は何ですか？私の最初の考えは、すべてのページをハードコードすることでした& get_permalink（）を使ってURLを取得しますが、これは上記のすべての要件を考慮しませんでした。

Answer 1

ここにあなたが欲しいものがありますか？詳細はリンクを参照してください

以下の例のロゴはulクラスの外にありますが、liクラスの間にロゴを設定することもできます。メニューの中にロゴがあります。 JSのために

HTML

<div id="header"> 
    <a class="logo" href="index.html"><img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" /></a> 
    <ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="index.html">Stats</a></li> 
    <li><a href="index.html">Schedule</a></li> 
    <li><a href="index.html">Store</a></li> 
    <li><a href="index.html">Gallery</a></li> 
    <li><a href="index.html">Roster</a></li> 
    </ul> 
</div><!--end header--> 

CSS

body { 
    font-family: Helvetica, Arial, Century; 
    font-size: 12px; 
    margin: 0; 
    background: url('images/bluebg.jpg') repeat-x top center; 
} 


#header { 
    background-color: #ffd727; 
    height: 40px; 
    position: relative; 
    margin: 150px auto 0; 
} 


#header ul { 
    margin: 0 auto; 
    width: 800px; 
    padding: 0; 
    list-style: none; 
} 

#header ul li { 
    float: left; 
    width: 97px; 
} 

#header ul li:nth-of-type(4) { 
    margin-left: 217px; 
} 

#header ul li a { 
    text-transform: uppercase; 
    text-decoration: none; 
    display: block; 
    text-align: center; 
    padding: 12px 0 0 0; 
    height: 28px; 
} 

#header ul li a:hover { 
    background: rgb(235,200,35); 
} 

.logo { 
    position: absolute; 
    left: 50%; 
    margin: -48px 0 0 -108px; 
} 


@media screen and (max-width: 800px) { 
    .logo { 
    bottom: 100%; 
    } 

    #header ul li:nth-of-type(4) { 
    margin-left: 0; 
    } 

    #header ul { 
    width: 600px; 
    position: relative; 
    } 
} 

- このリンクを下回る

http://codepen.io/wolfcry911/pen/HyLdg

を参照してください。

方法2あなたはまた、左右異なるmenu..but方法1でそれを行うことができます

はWP

http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar

に最適です