WordPress menu with image in middle - wordpress

Question

I'm trying to create a menu which will have an image in the middle of it. For example three links to the left & three to the right of the image, each menu item also has to list all child pages.
The parent level menu items have to dynamically update the text based on what has been entered in the CMS but the user doesn't have to be able to reorder or add / remove items from the menu.
What is the best way of going about doing the above? My initial thought was to hard code all the pages & use get_permalink() to get the URLs encase they change but this wouldn't take all the requirements listed above into account.

Answer 1

Here Is Ans that you want. for details follow link
In Below example logo is outside from ul class but then also you can set logo in between li class. so logo in middle of menu.
HTML
<div id="header">
<a class="logo" href="index.html"><img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" /></a>
<ul>
<li>Home</li>
<li>Stats</li>
<li>Schedule</li>
<li>Store</li>
<li>Gallery</li>
<li>Roster</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;
}
}
For JS - Refer below This Link
http://codepen.io/wolfcry911/pen/HyLdg
Method 2
you can also do it with left and right different menu..but method 1 is best for wp
http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar