修复菜单到响应菜单.css / jquery

Fix menu into responsive menu .. css/jquery

本文关键字：菜单 jquery css 响应      更新时间：2023-09-26

我一直在使用flount .js(原始源代码，但修改了初始的css和html。

我已经从ul和li中删除了类样式，所以它只使用列表标签。

但由于某些原因，当我进入移动…它显示了3行菜单按钮在我的本地页面，但当我点击它…

我看不清菜单。

如果有人能帮忙

感谢
<nav class="nav">
    <ul>
        <li>
            <a href="?=home">Home</a>
            <ul>
                <li >
                    <a href="?=submenu-1">Submenu item 1</a>
                </li>
                <li >
                    <a href="?=submenu-2">Submenu item 2</a>
                </li>
                <li >
                    <a href="?=submenu-3">Submenu item 3</a>
                </li>
                <li >
                    <a href="?=submenu-4">Submenu item 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="?=about">About</a>
        </li>
        <li>
            <a href="?=services">Services</a>
            <ul>
                <li >
                    <a href="?=submenu-1">Submenu item 1</a>
                </li>
                <li >
                    <a href="?=submenu-2">Submenu item 2</a>
                </li>
                <li >
                    <a href="?=submenu-3">Submenu item 3</a>
                </li>
                <li >
                    <a href="?=submenu-4">Submenu item 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="?=portfolio">Portfolio</a>
        </li>
        <li >
            <a href="?=testimonials">Testimonials</a>
        </li>
        <li>
            <a href="?=contact">Contact</a>
        </li>
    </ul>
</nav>

小提琴

你已经删除了必要的HTML并没有在JS中进行补偿

原始JS: 

        // Append the mobile icon nav
        $('.nav').append($('<div class="nav-mobile"></div>'));
        // Add a <span> to every .nav-item that has a <ul> inside
        $('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');

修改后的JS:

        // Append the mobile icon nav
        $('.nav').append($('<div class="nav-mobile"></div>'));
        // Add a <span> to every .nav-item that has a <ul> inside
        $('.nav').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');

看看您的选择器如何在两行上针对.nav ?这是在脚本的其余部分不期望的地方添加span。在你的JS改变选择器回到.nav-item和添加.nav-item类回到根级<li> s。

您还需要更改:

// Dynamic binding to on 'click'
$('ul').on('click', '.nav-click', function(){

: 

// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){

在你的标记中有多个<ul>，所以你的毯子将点击绑定到<ul>也会扰乱事情。

编辑:修改的HTML, CSS和JS: http://jsfiddle.net/xtt3j/。我不知道为什么你这么热衷于做任何事情没有任何类。我一直在努力减少加价，但我觉得这将是一个更难维护的问题(或者只是让你头脑清醒)。最后，箭头不会在这些Fiddles中显示因为它是一个图像

我已经修改了您的示例代码http://jsfiddle.net/WdN8J/10/。在Chrome中，有初始填充偏移量，所以我输入-webkit-padding-start: 0px。冲突在于你的下拉导航有绝对位置:

.nav ul > li > ul {
display:none;
position:absolute;
left:0;
width:180px;
}
所以我在点击动作中添加了下面一行: 
$('.nav ul > li > ul').css({'position':'relative', 'width':'100%'});
相关文章：