2014-02-10 55 views
-5

我設計了一個菜單PHP文件和css文件.. 這裏怎麼了的樣子:添加新設計的菜單到WordPress

<div class = "menu3"> 

<ul>  

    <div id="menu2"> 

    <li><a href="#">something11</a> 

     <ul> 

      <li><a href="#">something</a></li> 

      <li><a href="#">something</a></li> 

      <li><a href="#">something</a></li> 

     </ul> 

    </li> 

    </div> 

    <li><a href="#">something</a></li> 

    <li><a href="#">something</a></li> 

    <li><a href="#">something</a></li> 

    <li><a href="#">something</a></li> 

    <li><a href="#">something</a></li> 

    <li><a href="#">something</a></li> 

    <li><a href="#">something</a></li> 



</ul> 

</div> 

<div id="header_wrapper"> 

</div> 

</div> 

</body> 

</html> 

<script> 

$(function() { 

     $('#header_wrapper').hide(); 

     $("#menu2").mouseenter(function() { 

     $("#header_wrapper").show(); 

      }).mouseleave(function() { 

     $("#header_wrapper").hide(); 

}); 

}); 



    $(function() { 

     $("#header_wrapper").mouseenter(function() { 

     $("#header_wrapper").show(); 

      }).mouseleave(function() { 

     $("#header_wrapper").hide(); 

}); 

}); 

</script> 

and the css: 

    .menu3 ul ul { 

display: none; 

} 

.menu3 ul li:hover > ul { 

display: inline; 

} 

.menu3{ 

width:1388px; 

height:36px; 

margin-top: -16px; 

margin-left: -8px; 

background-color:black; 

} 

.menu3 ul { 

list-style: none; 

position: relative; 

margin-left: 250px; 

line-height:35px; 

} 

.menu3 ul:after { 

content: ""; clear: both; display: inline; 

} 

.menu3 ul li { 

float: left; 

} 

.menu3 ul li:hover { 

color:gray; 

} 



.menu3 ul li a:hover{ 

color:gray; 

} 

.menu3 ul li a { 

display: inline; padding: 0 6px; 

color: white; text-decoration: none; 

font-weight: bolder; font-size: 15px; 

} 



#menu2 li a:hover{ 

color:gray; 

} 

#menu2 li a { 

display: inline; /*padding: 0 6px;*/ 

color: white; text-decoration: none; 

font-weight: bolder; font-size: 15px; 

} 

.menu3 ul ul { 

background-color:black; 

position: absolute; 

margin-left: -66px; 

line-height: 20px; 

} 

.menu3 ul ul li { 

float: none; 

position: relative; 

} 

.menu3 ul li { 

float: left; 

position: relative; 

} 

.menu3 ul ul li a { 

padding: 15px 40px; 

} 

.menu3 ul ul li:hover { 

color:gray; 

} 

#header_wrapper 

{ 

background-color: black; 

width: 1388px; 

height: 150px; 

margin-top: 0px; 

float: left; 

margin-left: -8px; 

} 

是我不知道如何將這些文件添加到主題的問題,我不知道如何把它們放在代碼中(header.php/function.php)我真的不知道該怎麼做,我只想刪除當前的左側菜單,並將新菜單放在我創建的代碼中有沒有辦法做到這一點?感謝幫手!

+1

沒有人會去通過您的代碼。澄清問題。 –

+1

你必須使用wp_nav_menu()。看到我的答案。 –

+0

如上所述,使用原生的wp菜單功能會更容易,然後通過菜單功能更改CSS的匹配標記輸出。 –

回答

2

我知道你需要什麼。你想要將你的html菜單轉換成wordpress菜單。你必須使用wp_nav_menu()這裏是

Tutorial

Codex Tutorial

0
<div id="menu2"> <?php wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'nav-menu')); ?> </div> 

功能wp_nav_menu將動態創建菜單中添加從後端的網頁,你會看到他們在前端添加CSS來的style.css