WordPress Menü mit Bild in der Mitte

Question

Ich versuche, ein Menü zu erstellen, die ein Bild in der Mitte davon haben wird. Zum Beispiel drei Links auf der linken Seite & drei auf der rechten Seite des Bildes, muss jeder Menüpunkt auch alle untergeordneten Seiten auflisten.

Die Menüelemente auf der übergeordneten Ebene müssen den Text basierend auf dem im CMS eingegebenen Inhalt dynamisch aktualisieren. Der Benutzer muss jedoch nicht in der Lage sein, Elemente neu anzuordnen oder Elemente aus dem Menü hinzuzufügen oder zu entfernen.

Was ist der beste Weg, um das oben genannte zu tun? Mein erster Gedanke war, alle Seiten hart zu kodieren & benutze get_permalink(), um die URLs zu erhalten, die sie ändern, aber dies würde nicht alle oben aufgeführten Anforderungen berücksichtigen.

Answer 1

Hier ist Antworten, die Sie wollen. Für Details folgen Sie dem Link

In unten Beispiel ist Logo außerhalb von UL-Klasse, aber dann können Sie auch Logo zwischen Li-Klasse setzen. so Logo in der Mitte des Menüs.

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; 
    } 
} 

Für JS - Siehe unten Dieser Link-

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

Methode 2

Sie es auch 1 mit links und rechts unterschiedlichen menu..but Methode tun können, ist am besten für wp

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