本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3创建自适应屏幕宽度的导航条

本文介绍如何使用CSS 3来创建一个具有自适应屏幕宽度特性的导航条。在桌面浏览器中,该导航条的表现形式为一个水平导航条,在智能手机中,该导航条的表现形式为一个垂直下拉式导航条。

示例运行结果


当屏幕宽度大于600px时的表现形式

当屏幕宽度小于600px时的表现形式

在智能手机中,点击菜单图标,可将菜单折叠起来,如下图所示。


在智能手机中点击菜单图标可将菜单折叠

HTML代码

本示例的HTML代码非常简单,在nav元素中嵌套两层ul无序列表元素即可。

<nav id="nav-wrap">
    <div id="menu-icon" class="active">菜单</div>
    <ul id="nav" style="display: block;">
        <li>
            <a href="#">菜单项1</a>
            <ul>
                <li><a href="#">菜单项1-1</a></li>
                <li><a href="#">菜单项1-2</a></li>
                <li><a href="#">菜单项1-3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">菜单项2</a>
            <ul>
                <li><a href="#">菜单项2-1</a></li>
                <li><a href="#">菜单项2-2</a></li>
                <li><a href="#">菜单项2-3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">菜单项3</a>
            <ul>
                <li><a href="#">菜单项3-1</a></li>
                <li><a href="#">菜单项3-2</a></li>
                <li><a href="#">菜单项3-3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">菜单项4</a>
            <ul>
                <li><a href="#">菜单项4-1</a></li>
                <li><a href="#">菜单项4-2</a></li>
                <li><a href="#">菜单项4-3</a></li>
            </ul>
        </li>
    </ul>
</nav>

jQuery脚本代码

在jQuery脚本代码中,我们定义用户在智能手机中点击菜单图标时菜单项的折叠与展开处理。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){    
    /*用户点击菜单图标时折叠与展开导航菜单*/
    $("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    }); 
});
</script>

CSS 3样式代码

桌面浏览器用CSS 3样式代码

在桌面浏览器中需要将菜单图标隐藏起来。

#nav-wrap {
    margin-top: 20px;
} 
/*菜单图标*/
#menu-icon {
    display: none; /*页面打开时隐藏菜单图标*/
}
 
#nav, 
#nav li {
    margin: 0;
    padding: 0;
}
#nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
}
 
#nav a {
    padding: 4px 15px;
    display: block;
    color: #000;
    background: #ecebeb;
}
#nav a:hover {
    background: #f8f8f8;
}
 
/*下拉菜单*/
#nav ul {
    background: #fff;
    padding: 2px;
    position: absolute;
    border: solid 1px #ccc;
    display: none; /*隐藏下拉菜单*/
    width: 200px;
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#nav li:hover > ul {
    display: block; /*hover时显示下拉菜单*/
}

智能手机用CSS 3样式代码

在智能手机中需要显示菜单图标(display:block;)。

@media screen and (max-width: 600px) {
    /*nav元素*/
    #nav-wrap {
        position: relative;
    }
 
    /*菜单图标*/
    #menu-icon {
        color: #000;
        width: 42px;
        height: 30px;
        background: #ecebeb url(images/menu-icon.png) no-repeat 10px center;
        padding: 8px 10px 0 42px;
        cursor: pointer;
        border: solid 1px #666;
        display: block; /*显示菜单图标*/
    }
    #menu-icon:hover {
        background-color: #f8f8f8;
    }
    #menu-icon.active {
        background-color: #bbb;
    }
     
    /*导航菜单*/
    #nav {
        clear: both;
        position: absolute;
        top: 38px;
        width: 160px;
        z-index: 10000;
        padding: 5px;
        background: #f8f8f8;
        border: solid 1px #999;
        display: none; /*通过jQuery代码切换是否可见*/
    }
    #nav li {
        clear: both;
        float: none;
        margin: 5px 0 5px 10px;
    }
    #nav a, 
    #nav ul a {
        font: inherit;
        background: none;
        display: inline;
        padding: 0;
        color: #666;
        border: none;
    }
    #nav a:hover, 
    #nav ul a:hover {
        background: none;
        color: #000;
    }
     
    /*下拉菜单*/
    #nav ul {
        width: auto;
        position: static;
        display: block;
        border: none;
        background: inherit;
    }
    #nav ul li {
        margin: 3px 0 3px 15px;
    }
 
}