手机css水平导航栏

手机css水平导航栏是一种在移动设备中快速导航页面内容的方法。由于屏幕空间有限，导航栏需要以水平的形式展示，方便用户在页面中快速浏览和切换。

/* 基础样式 */nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    padding: .5rem 1rem;
}
nav h1 {
    font-size: 1.2rem;
    font-weight: 600;
}
nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 每个导航项的样式 */nav li {
    position: relative;
}
nav a {
    display: block;
    padding: .5rem;
    text-decoration: none;
    color: #333;
}
/* 鼠标悬停效果 */nav a:hover {
    background-color: #eee;
}
/* 当前页面导航项样式 */nav .active a {
    font-weight: 600;
}
/* 下拉菜单 */nav .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    background-color: #f8f8f8;
    padding: .5rem 0;
}
nav li:hover .dropdown-content {
    display: block;
}
nav .dropdown-content a {
    display: block;
    padding: .5rem;
    text-decoration: none;
    color: #333;
}
/* 屏幕小于600px时的样式 */@media screen and (max-width: 600px) {
nav ul {
    display: none;
}
nav .icon {
    display: block;
    font-size: 1.5rem;
    cursor: pointer;
}
nav.responsive ul {
    flex-direction: column;
    display: block;
    padding: 0;
}
nav.responsive li {
    border-bottom: 1px solid #eee;
}
nav.responsive .dropdown-content {
    position: static;
    display: none;
    padding-left: 1.5rem;
}
nav.responsive .dropdown-btn:after {
    content: '\25bc';
    margin-left: .5rem;
}
}
    

以上代码演示了一个基础的水平导航栏，包括了当前页面导航项、下拉菜单等常见功能和细节处理。在屏幕小于600px时，导航栏会自动折叠成一个菜单图标，点击后展开导航项。这种导航栏可以轻松应用到各种移动网页设计中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！