為移動站點Jquery和CSS創建一個手風琴菜單

Question

我最近開始設計一個使用媒體查詢的移動網站，並瀏覽一些網站以查看他們所做的工作，似乎手風琴導航菜單是行之有效的方法，可以擴展到普通的水平導航欄。 我瀏覽並瀏覽了互聯網，以查找手風琴演練，但似乎找不到足夠的解釋。

一個很好的例子是微軟在其網站上發布的一個例子。 到目前為止，這是我的代碼：

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> body { padding: 0; margin: 0; } #topMenu { height: 50px; width: 100%; background-color: #cde; display: block; } nav { width: 100%; height: auto; display: block; margin: 0; padding: 0; } nav a { text-decoration: none; padding-left: 40px; } nav ul { list-style: none; display: block; margin: 0; padding: 0; background-color: #ccc; } nav ul li { display: block; width: 100%; padding: 20px 0px 20px 0px; border-top: 2px solid #abc; } nav ul ul { height: 0; overflow: hidden; padding-top: 0px; } nav ul ul li a { padding-left: 100px; } </style> </head> <body> <div id="topMenu"></div> <nav> <ul> <li><a href="">Link</a></li> <li><a href="">Link</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> <li><a href="">Link 5</a></li> <li><a href="">Link 6</a></li> <li><a href="">Link 7</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> <li><a href="">Link 5</a></li> <li><a href="">Link 6</a></li> <li><a href="">Link 7</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> </ul> </li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> </ul> </nav> </html>

這些導航欄具有子菜單[ nav ul ul ]，這些子菜單在單擊nav ul li時會滑出。 我希望有人可以向我指出正確的方向，以便我可以在單擊時制作一個向下滑動的子菜單，或者幫助我編寫代碼。
我認為可能有一個基本的人可以開始使用和編輯以自定義。

謝謝你的幫助。

Answer 1

看一下這個

https://jsfiddle.net/nqamazgz/3/

不幸的是CSS沒有任何點擊事件，相反，您將需要使用JavaScript和/或jQuery。 我用過jQuery

我所做的只是在您的導航中添加了一個hide-nav類，並且沒有顯示。 當然還有一個按鈕。

還有一點jQuery

$(document).ready(function() {
    $('#topMenu-btn').on('click', function() {
        $('nav').slideToggle();
    });
});

Answer 2

不需要Javascript-您可以改用Checkbox。 檢出： http : //codepen.io/TimPietrusky/pen/CLIsl

如果您仍然想使用Javascript進行操作，請執行以下操作：

// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
    // prevent Click from redirecting
    e.preventDefault();
    // get the next ul after the li a clicked
    if ($(this).hasClass('visible')) {
        $(this).next('ul').slideUp(200).removeClass("visible");
    } $(this).next('ul').slideDown(200).addClass("visible");
});

高度格式為0的CSS動畫無法自動運行。 請參閱：如何轉換高度：0； 達到高度：自動； 使用CSS？

Answer 3

嘗試這樣的事情：

http://jsfiddle.net/kb668aag/

您需要稍微修改一下代碼。

    <div id="topMenu"></div>
    <nav>
        <ul>
            <li><a href="">Link</a></li>
            <li class="has_children"><a href="">Link</a>
                <ul class="sub-menu">
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                    <li><a href="">Link 5</a></li>
                    <li><a href="">Link 6</a></li>
                    <li><a href="">Link 7</a></li>
                </ul>
            </li>
            <li class="has_children"><a href="">Link</a>
                <ul class="sub-menu">
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                    <li><a href="">Link 5</a></li>
                    <li><a href="">Link 6</a></li>
                    <li><a href="">Link 7</a></li>
                </ul>
            </li>
            <li class="has_children"><a href="">Link</a>
                <ul class="sub-menu">
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                </ul>
            </li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
        </ul>
    </nav>

的CSS

body {
padding: 0;
margin: 0;
}

#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}

nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}

nav a {
text-decoration: none;
padding-left: 40px;
padding: 20px 40px;
display: block;
}

nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
} 

nav ul li {
display: block;
width: 100%;
border-top: 2px solid #abc;
}

nav ul ul {
overflow: hidden;
padding-top: 0px;
}

nav ul ul li a {
padding-left: 100px;
}

ul.sub-menu{
    display: none;
}
.has_children > a{
    color: #ddd;
}

JS：

var $menu_with_children = $('.has_children > a');

$menu_with_children.on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
        $this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
    } else{
        $this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
    }
});

為移動站點Jquery和CSS創建一個手風琴菜單

問題描述

3 個解決方案

解決方案1
0 2015-06-19 09:07:53

解決方案2
0 2015-06-19 09:09:20

解決方案3
0 2015-06-19 09:15:50

為移動站點Jquery和CSS創建一個手風琴菜單

問題描述

3 個解決方案

解決方案1 0 2015-06-19 09:07:53

解決方案2 0 2015-06-19 09:09:20

解決方案3 0 2015-06-19 09:15:50

解決方案1
0 2015-06-19 09:07:53

解決方案2
0 2015-06-19 09:09:20

解決方案3
0 2015-06-19 09:15:50