Question

我试图将一个网站（最初是html / css）转换为一个WordPress主题，如果不是大多数，那么很多代码仍将是硬代码。

我已经添加了一个响应网站的菜单，但似乎无法满足我的需求。

我希望它有一个小汉堡图标，甚至只是＆＃34;菜单＆＃34;他们可以点击，然后打开选项菜单。

现在，这就是正常情况。

这就是它的样子＆＃34;关闭＆＃34;。

当它关闭时，它只是一个小白条，当你点击打开它时，它实际上是第一个列表的链接..

这是菜单的HTML。

<nav class="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="#">Artists</a></li>
        <li><a href="#">Framing</a></li>
        <li><a href="#">Restorations</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS有点复杂和冗长，因为它也有@media查询。

.nav-container {
    margin:0 auto;
    max-width:1000px;
    background:#333;
    clear:both
}

.nav-inner {
    max-width:658px;
    margin:0 auto
}

nav.main {
    margin-left:-34px
}

nav.main ul {
    border-right:#FFF solid 2px
}

nav.main ul li {
    display:inline-block;
    min-height:29px;
    padding:17px 40px 5px;
    text-align:center;
    background-color:#7d833d;
    border-left:#FFF solid 2px;
    margin-left:-4px;
    font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:700;
    font-size:1em
}

nav.main a {
    color:#FFF;
    text-decoration:none
}

nav.main a:hover {
    color:#000;
    text-shadow:none
}

nav.main a:visited {
}

/* nav */
.nav {
    position:relative;
    margin:20px 0;
/*height: 60px;*/
    line-height:5;
    padding-top:3px
}

.nav ul {
    margin:0;
    padding:0;
    margin-top:-10px
}

.nav li {
/*margin: 0 5px 10px 0;*/
    padding:0;
    list-style:none;
    display:inline-block;
    min-height:29px;
/*padding: 17px 40px 7px 40px;*/
    text-align:center;
    background-color:#7d833d;
    border-left:#FFF solid 2px;
    margin-left:-8px;
    font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:700;
    font-size:1em;
    padding-left:3px;
    padding-right:3px;
    color:#fff
}

.nav a {
    padding:3px 12px;
    text-decoration:none;
    color:#fff;
    line-height:100%
}

.nav a:hover {
    color:#000
}

.nav .current a {
    background:#999;
    color:#fff;
    border-radius:5px
}

/* center nav */
.nav.center ul {
    text-align:center
}

@media screen and (max-width: 600px) {
.nav {
    position:relative;
    min-height:40px
}

.nav ul {
    width:100%;
    padding:2px 0;
    position:absolute;
    top:0;
    left:0;
    border:solid 1px #aaa;
    background:#fff url(images/icon-menu.png) no-repeat 10px 11px;
    border-radius:5px;
    box-shadow:0 1px 2px rgba(0,0,0,.3);
/* margin-top: 5px; */
    height:auto;
    padding-top:3px;
    padding-bottom:5px
}

.nav li {
    display:none;
/* hide all <li> items */
    margin:0
}

.nav .current {
    display:block
/* show only current <li> item */
}

.nav a {
    display:block;
    padding:5px 5px 5px 32px;
    text-align:left
}

.nav .current a {
    background:none;
    color:#666
}

/* on nav hover */
.nav ul:hover {
    background-image:none
}

.nav ul:hover li {
    display:block;
    margin:0 0 5px
}

.nav ul:hover .current {
    background:url(images/icon-check.png) no-repeat 10px 7px
}

/* right nav */
.nav.right ul {
    left:auto;
    right:0
}

/* center nav */
.nav.center ul {
    left:50%;
    margin-left:-90px
}

.address-box {
    margin-bottom:15px
}

我浏览了几页Google，但是通过特定菜单找到答案却更难了。我无法让JQuery与WordPress一起使用，因此首选HTML / CSS。

Answer 1

您可以使用:focus和tabindex属性来使任何元素都具有焦点。这允许进行类似“切换”的属性。请参阅以下代码段中的示例：

.submenu { display: none; }

/* [tabindex] can be used to use :focus on normally unfocusable elements */
li:focus > .submenu {
  display: block;
  margin-left: 10px;
}

/* Remove outlines from focus */
li[tabindex] { outline: none; }

<ul>
    <li tabindex="">Click me!
        <ul class='submenu'>
            <li>Submenu</li>
            <li>Submenu</li>
            <li>Submenu</li>
        </ul>
    </li>
</ul>

有关更高级的示例，请参阅this JSFiddle。

参考：https://stackoverflow.com/a/8616525/1113225

Answer 2

我总是发现使用一个好的框架有助于快速解决这个问题。我喜欢使用一款名为UIKit的产品。我也是引导程序的粉丝，但是对于它的一些功能更喜欢uikit，比如'off canvas'导航功能，在这里找到： off canvas navigation - uikit

我通常使用媒体查询来处理我用于打开画布导航的“汉堡包按钮”的可见性。（Uikit还内置了汉堡包导航图标），设置非常简单。

根据您希望汉堡包按钮显示的时间，您的媒体查询可能是这样的：

@media all and (max-width:767px){ .hamburger-btn {display:block;} }
@media all and (min-width:768px){ .hamburger-btn {display:none;} }

Answer 3

由于noconflict，jQuery很可能无法工作。您需要将jquery代码包装在此：

jQuery(document).ready(function ($) {
  //Your code here
});

您也可以使用 jQuery 而不是 $ 来编写jQuery。

之后，使用 $ 不会再造成任何问题。

这是一个使用jQuery的简单导航关闭示例：

http://jsfiddle.net/austinthedeveloper/52vxsun1/

jQuery(document).ready(function ($) {
    $('h1').on('click',function(){
        $('nav').slideToggle();
    });
});

Answer 4

我认为不可能创建一个与使用jquery兼容的菜单，但您可以尝试的一件事是：css中的hover功能。这是我做的一个例子，尝试将其操作到您的代码中，使其使用opacity属性执行您想要的操作。

<div>
    <h2>Hover Here</h2>
    <ul>
        <li>List Item1</li>
        <li>List Item2</li>
        <li>List Item3</li>
    </ul>
</div>
div {
    height:130px;
    width:150px;
    background-color:yellow;
}
ul {
    opacity:0;
}
ul:hover {
    opacity:1
}

http://jsfiddle.net/JoshuaHurlburt/avttkdst/

如何在没有JS的情况下添加菜单切换？

4 个答案: