Question

我正在努力创建一个自适应的导航菜单，除了菜单扩展之外，其他所有页面内容都没有被推下来。

我做了一些更改，以便在JSFiddle中显示响应宽度 - 结果会看到一些事情，但你将能够得到它的要点。

非常感谢任何帮助。

HTML：

<div id="wrapper">
    <a id="logo_link" href="#" target="_blank"></a>
    <div id="header"></div>

    <div id="nav" class="clearfix">
        <ul class="clearfix">
            <li><a href="index.html" class="current_page">Home</a></li>
            <li><a href="search.php">Search</a></li>
            <li><a href="submit.html">Submit</a></li>
            <li><a href="#" target="_blank">News</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

        <a href="#" id="pull">Menu</a>
    </div>


    <div id="content">

        <div id="main">

        </div>


        <div id="footer">
            <hr />
            <div id="footer_content">
                <div id="sm_icons">
                    <a href="#" target="_blank"><img src="img/icon_facebook.png"  style="height:30px; width:30px;" alt="Facebook"/></a>
                    <a href="#" target="_blank"><img src="img/icon_twitter.png" style="height:30px; width:30px;" alt="Twitter"/></a>
                    <a href="#" target="_blank"><img src="img/icon_linkedin.png" style="height:30px; width:30px;" alt="LinkedIn"/></a>
                    <a href="#" target="_blank"><img src="img/icon_youtube.png" style="height:30px; width:30px;" alt="YouTube"/></a>
                </div>

                <div id="copyright">
                    <strong>© 2013</strong>
                </div>
            </div>

        </div>

    </div>
</div>

CSS：

div#nav {
    height: 40px;
    width: 100%;
    position: relative;


    background-repeat: repeat-x;
    background-position: 25px;

    background-color: #003A70;
    -moz-box-shadow: 0 0 8px #666;
    -webkit-box-shadow: 0 0 8px #666;
    box-shadow: 0 0 8px #666;
}

#nav ul{
    margin: 0 auto;
    height: 40px;
    width: 960px;
    padding: 0;
}

#nav li {
    display: inline;
    float: left;
}

#nav a {
    display: inline-block;
    width: 160px;
    text-align: center;
    line-height: 40px;
    font-family: 'Quattrocento Sans', Helvetica, "Trebuchet MS", Arial, sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
}

#nav li a {
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box; 
    border-right: 1px solid #ccc;
}

#nav li:last-child a { 
    border-right: 0;
}


#nav ul a:hover, #nav .current_page {
    background-image: url('../img/nav_selected_bg.jpg');
    color: #FFFFFF;
}

#nav a#pull {
    display: none;
}

body {
    margin: 0;
    padding: 0;
    background-image: url('../img/main_bg.png');
}

h1 {
    font-family: 'Helvetica';
    color: #971e23;
    text-align: center;
    font-size: 18px;
}

h2 {
    font-family: 'Helvetica';
    color: #000;
    text-align: center;
    font-size: 16px;
}

p {
    font-family: 'Arial';
    font-size: 14px;
    line-height: 1.5em;
}

div#wrapper {
    max-width: 960px;
    margin: 0 auto;
    margin-bottom: 25px;
    -moz-box-shadow: 0 0 8px #666;
    -webkit-box-shadow: 0 0 8px #666;
    box-shadow: 0 0 8px #666;
}


div#header {
    height: 75px;
    background-image: url('../img/top_banner.jpg');
    background-color: #f3f1f2;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

div#footer {
    width: 100%;
    margin: 0;
    background-color: #f3f1f2;
    clear: both;
}

div#footer_content {
    padding: 0px 25px 50px 25px;
}


div#footer hr {
    margin-top: 0; 
    padding:0;
    border: 0;
    border-bottom: 1px solid #ccc;
    background: #999;
}


div#sm_icons {
    width: 135px;
    float: left;
    margin-top: -7px;
}

div#copyright {
    width: 90%;
    text-align:center;
    margin-top: 40px;
    font-size: 12px;
}

@media only screen and (max-width: 600px) {
    div#header {
        background-image: url('../img/top_banner_small.jpg');
    }

    div#copyright {
        clear: both;
    }

    div#sm_icons {
        float: none;
        width: 135px;
        margin: 0 auto;
        margin-top: 20px;
    }
}

@media only screen and (max-width: 600px) {

    #wrapper, #content, #footer, #main, #nav {
        height: auto;
    }

    div#header {
        background-image: url('../img/top_banner_small.jpg');
    }

    #nav ul {
        display: none;
        height: auto;
    }

    #nav li {
        display: block;
        float: none;
        width: 100%;
    }

    #nav li a {
        border-bottom: 1px solid #ccc;
            background-color: #003A70;
    }

    #nav a#pull {
        display: block;
        width: 100%;
        position: relative;
        background-repeat: repeat-x;
        background-position: 25px;
            background-color: #003A70;
    }

    #nav a#pull:after {
        content: "";
        background: url('../img/nav-icon.png') no-repeat;
        display: inline-block;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

jQuery的：

jQuery(function ($) {
var menu = $('#nav ul');
var menuHeight  = menu.height(); 

$('#nav a#pull').on('click', function(e){
    e.preventDefault();
    menu.slideToggle();
});

$(window).resize(function(){  
    var w = $(window).width();  
    if(w > 320 && menu.is(':hidden')) {  
        menu.removeAttr('style');  
    }  
});  

});

Answer 1

http://jsfiddle.net/hxN5U/2/删除#nav

的高度

div#nav {
    /*height: 40px;*/
    width: 100%;
    position: relative;
    background-repeat: repeat-x;
    background-position: 25px;
    background-color: #003A70;
    -moz-box-shadow: 0 0 8px #666;
    -webkit-box-shadow: 0 0 8px #666;
    box-shadow: 0 0 8px #666;
}

响应式导航菜单 - jQuery slideToggle（）不会移动内容

1 个答案: