[英]How to make custom menu using option select in wordpress
I have to make menu
for small screen sizes
in wordpress template
. 我必须做出menu
的小屏幕sizes
的wordpress template
。 i want to add some code like below in menu. 我想在菜单中添加以下代码。
<select>
<option>Home</option>
<option>About</option>
</select>
wordpress
default creating menu through ul
li
I don't know how to add code
in menu
. wordpress
默认创建通过菜单ul
li
,我不知道如何添加code
的menu
。 plz anybody can do this? 请问有人可以这样做吗?
I am assuming you are creating a responsive site? 我假设您正在创建一个响应网站?
If you don't mind some jQuery you can create a select navigation like this: 如果您不介意使用jQuery,则可以创建如下所示的选择导航:
jQuery( document ).ready(function( $ ) {
// Create the dropdown base
$("<select />").appendTo("nav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Menu"
}).appendTo("nav select");
// Populate dropdown with menu items
$("nav ul li a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
Hide the <select>
by default: 默认隐藏<select>
:
nav select {display:none;}
Hide main nav and show <select>
on smaller screens: 隐藏主导航并在较小的屏幕上显示<select>
:
@media screen and (max-width: 568px) {
nav select {display:block;}
nav ul {display:none;}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.