如何在不破坏移动视图中的导航功能的情况下将特定的类应用于导航列表？

Question

我正在尝试使用以下响应式导航： http : //codepen.io/Goatsy/pen/dqnKv

/*Border surrounding entire navigation - NAV CONTAINER*/
.navborder {
border-top: 10px solid #6e6f1f;
border-right: 20px solid #6e6f1f;
border-bottom: 10px solid #6e6f1f;
border-left: 20px solid #6e6f1f;
background: #6e6f1f; 
}

/*Last nav li padding appears*/
    .last {
    padding-right:14px;
    }

/*White bg & top spacing btwn nav*/
    #site-content {
    background-color: #fff;
    padding-top:20px;
    margin-top:20px;
    width: 100%;
    }

@media screen and (max-width : 1240px){
    /*Border disappears*/
    #site-content {
    background-color: #fff;
    }
}

/*Slider element*/
.slidebehind {
margin-top:-60px;
}


@media screen and (max-width : 768px){
    /*Slider element jumps down - keep it above nav*/
    .slidebehind {
    margin-top:-40px;
    }
}


@media screen and (max-width : 762px){
    /*Border disappears*/
    .navborder {
    border: none;
    }
    /*Logo disappears*/
    li img {
    visibility: hidden;
    }
    /*Last nav li padding disappears*/
    .last {
    padding-right:0px;
    }
    /*Slider element jumps down - keep it above nav*/
    .slidebehind {
    margin-top:-106px;
    }
}

@media screen and (max-width : 1200px){
    /*UCR Logo margin - come inward*/
    .ucrlogo {
    margin-right:20px;
    }
    /*Breadcrumbs margin - come inward*/
    .breadcrumb {
    margin-left:20px;
    }
}

/*Menu shrinks*/
@media screen and (max-width : 1200px){
    /*Border disappears*/
    #menu {
    margin-right: 20px;
    margin-left: 20px;
    }
}



/* BEGIN NAV STYLES!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/*Strip the ul of padding and list styling*/
ul.navlist {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    z-index:99999;
}

/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    float: left;
    margin-right: 0px;
}

/*Style for menu links*/
li a {
    display:block;
    padding-right: 18px; padding-left:18px;
    height: 40px;
    text-align: left;
    line-height: 45px;
    font-family: 'TradeGothicLTStd-Cn18', sans-serif;
    font-size: 20px;
    color: #fff;
    background: #6e6f1f;
    text-decoration: none;
    opacity: .99; 
}


/*Hover state for top level links*/
li:hover a {
    background: #fff;
    color: #6e6f1f;
}

/*Style for dropdown links*/
li:hover ul a {
    background: #f5f1e6;
    color: #6e6f1f;
    height: 40px;
    line-height: 45px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #fff;
    color: #6e6f1f;
}

/*Hide dropdown links until they are needed*/
li ul {
    display: none;
}

/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    text-decoration: none;
    color: #fff;
    background: #6e6f1f;
    text-align: center;
    padding: 10px 0;
    display: none;
    border: 10px solid #6e6f1f;
    margin-bottom: 1px;
    margin-right: 20px;
    margin-left: 20px;
    opacity: .99; 
}

.show-menu:hover {
    background: #898a2c;
    border: 10px solid #898a2c;
    cursor: pointer;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 762px){
    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
    margin-right: 20px;
    margin-left:20px;
    }
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}

但是，我希望导航列表具有特定的名称，以便将其样式与其他列表样式区分开。

我尝试使用以下方法： ul.navlist {nav css here} （在codepen链接中显示）

并将其应用于我的HTML <ul class="navlist"> ，但是由于某些原因，当调整到762px以下时，这会中断导航。

在将大小调整为小屏幕时，如何在导航列表ul中应用唯一名称，而不会“破坏它”？

（您可以查看码本，并查看导航栏在调整为移动视图后的显示方式，这是什么意思。如果删除.navlist类，您会发现它工作正常，但没有类） 。

---

更新-14/7/29

让我用另一种方式解释一下； 我可以看到我的措辞令人困惑。

这是我正在尝试实现的精确菜单： http : //codepen.io/Goatsy/pen/GFDou

这是原始的CSS：

/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    z-index:99999;
}

这是我的菜单（将类，导航列表添加到ul之后）： http ://codepen.io/Goatsy/pen/dqnKv

这是添加了类的CSS：

/*Strip the ul of padding and list styling*/
ul.navlist {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    z-index:99999;
}

我正在尝试给导航ul指定一个特定的类名。

由于某种原因，当我这样做时，它“破坏”了导航的移动视图。

我不知道该如何解释何时发生“中断”，只是说它无法按应有的方式工作（它应该像第一个链接一样工作）。

请参阅第一个链接中的切换到较小/移动视图时的导航与第二个看起来不同吗？ 唯一的不同是第二个在ul中添加了一个类，但是它“破坏”了较小导航的原始样式/功能。 如何在不“破坏”原始样式/功能的情况下向ul添加类？

希望这可以清除一切。 :(

Answer 1

我不确定您要做什么，悬停菜单仅适用于非触摸设备，因此通过单击并双击Android，此菜单可能适用于IOS，因为：hover不是我想要的在菜单上使用大约2年。

我假设您在较小的视口中隐藏了子菜单，并且顶层是链接。

我已根据最佳猜测进行了清理，您需要学习它。 阅读此代码块下面的信息。 所有视口共享的所有内容都不在媒体查询范围内，仅影响较大视口的样式位于最小宽度内，只有最大宽度（较小的视口）且在所有尺寸之间不共享的东西位于最大宽度内。

http://jsbin.com/wafuso/1/edit

http://jsbin.com/wafuso/1/

这是将鼠标悬停在较小的视口和其他调整上的一种：

http://jsbin.com/roway/1/edit

这是要学习的。

.navlist,
.navlist * {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navlist li a {
    display: block;
    height: 40px;
    text-align: left;
    line-height: 45px;
    font-family: 'TradeGothicLTStd-Cn18', sans-serif;
    font-size: 20px;
    color: #fff;
    background: #6e6f1f;
    text-decoration: none;
    opacity: .99;
}

input[type=checkbox] {
    display: none;
    -webkit-appearance: none;
}

@media (min-width:763px) { 
    ul.navlist {
        position: absolute;
        z-index: 99999;
    }

    .navlist li { float: left }

    .navlist li:hover ul a:hover {
        background: #fff;
        color: #6e6f1f;
    }

    .navlist li > a { padding: 0 18px }

    .navlist li li a {
        display: block;
        padding: 5px;
        height: auto;
        line-height: normal;
        font-size: 16px;
        min-width: 100px;
        padding: 10px 18px;
    }

    .navlist li ul {
        display: none;
        width: 250px;
    }

    .navlist li ul li {
        display: block;
        float: left;
        width: 100%;
    }

    /*Prevent text wrapping*/


    .navlist li a:hover + .hidden,
    .navlist .hidden:hover { display: block }

    /*Hover state for top level links*/

    .navlist li:hover a {
        background: #fff;
        color: #6e6f1f;
    }

    .navlist li:hover ul a {
        background: #f5f1e6;
        color: #6e6f1f;
    }
}


.show-menu {
    text-decoration: none;
    color: #fff;
    background: #6e6f1f;
    text-align: center;
    padding: 10px 0;
    display: none;
    border: 10px solid #6e6f1f;
    margin-bottom: 1px;
    margin-right: 20px;
    margin-left: 20px;
    opacity: .99;
}

.show-menu:hover {
    background: #898a2c;
    border: 10px solid #898a2c;
    cursor: pointer;
}

@media screen and (max-width:762px) { 
    input[type=checkbox]:checked ~ #menu { display: block }

    .navlist {
        position: static;
        display: none;
        margin-right: 20px;
        margin-left: 20px;
    }

    .show-menu { display: block }


    .disappear { display: none }
}

---

您在这里拥有的是通用选择器，例如：

ul {styles} 

和

ul li {styles}

这将影响整个站点中的每个ul和li。

如果将类添加到ul，则可以在CSS中将其引用为：

.navlist {toplevel style on the ul}

.navlist li {more styles for the lists}

依此类推

另外，如果您不希望某些因素影响其他视口宽度，例如700px以上的所有内容都是一种样式，下方的所有内容都是另一种样式，则可以使用min-width并按最小到最大的顺序堆叠，因此如果要使用字体大小在700像素时为20像素，但在1200像素及以上时为30像素，但基本（小视口）为15像素，它是这样的：

.myselector {font-size:15px;}

@media (min-width:700px) {
  .myselector {font-size:20px;}
}

@media (min-width:1200px) {
  .myselector {font-size:30px;}
}

最大宽度的媒体查询反向堆叠，最后一个最小。 请进一步阅读自适应设计。