Question

所以我正努力在导航中制作一个显示/隐藏按钮。我的目标是纯粹使用CSS。当浏览器屏幕太小而无法显示所有导航项时，它应该激活。我成功地隐藏了我不希望在某些屏幕宽度上看到的项目，但是我似乎无法获得激活：target的链接，以便在单击时显示它们。

这是css

nav {width:100%; min-width:287px;}
nav ul {padding:0;}
nav li {
   list-style: none;
   width:26%;
   min-width:67px;
   display:block;
   line-height: 2.5em;
   position: relative;
   float: left;
   border-bottom: 1px solid #fff;
   background-color:#333;
   box-shadow: 0px 5px 5px 1px #333;
   text-align:center;}

nav li a {color:#fff; text-decoration:none; height:100%; font-size:1em; display:block; white-space:nowrap;}

nav li:hover {background-color:#BA7007;}
nav li a:hover {color:#FFF;}
nav li a:visited {color:#FFF; background-color:#333;}

.prio-alpha {}
.prio-gamma, 
.prio-beta, 
.show-nav-less {display: none;}

#prio:target + .prio-beta, 
#prio:target + .prio-gamma, 
#prio:target + .show-nav-less {display: block; }

#prio:target + .show-nav-more { display: none; }
.show-nav-more {width:20%;}

@media screen and (min-width: 41em) {
    nav li {width:20%;}
    nav li a {font-size:1.4em;}
    .prio-beta {    display: block; }
    #prio:target + .prio-gamma, #prio:target + .show-nav-less {display: block;} 
    #prio:target + .show-nav-more { display: none; }}

@media screen and (min-width: 65em) {
    nav li {width:16.5%;}
    .prio-gamma {    display: block; }

    .show-nav-more, 
    #prio:target + .show-nav-less { display: none; } }

和html：

<nav>
<ul>
    <li class="prio-beta"><a href="index.html">Home</a></li>
    <li class="prio-alpha"><a href="research.html">Research</a></li>
    <li class="prio-alpha"><a href="publications.html">Publications</a></li>
    <li class="prio-gamma"><a href="Space_Flies.html">Space Flies</a></li>
    <li class="prio-gamma"><a href="Aging_PPG.html">Aging PPG Project</a></li>
    <li class="prio-alpha"><a href="contact.html">Contact</a></li>
    <li class="show-nav-more"><a href="#prio">+ more</a></li>
    <li class="show-nav-less"><a href="#">- less</a></li>
</ul>

我试图切换顺序，将类放在：target之前，甚至删除#prior，只使用.class：target，以便在生存时代码的功能没有明显差异。

Answer 1

根据我的理解，你只是想要它，这样你就不需要JS来点击一个子菜单了吗？

这是一个非常快速/肮脏的版本，它应该让你的想法得到解决，希望你可以根据自己的需要进行编辑

快速和肮脏

＆＃13;

#nav {
  list-style-type: none;
  position: relative;
}
#nav li {
  display: inline-block;
  width: 100px;
  border: 1px solid grey;
  border-radius: 2px;
  box-sizing: padding-box;
  padding: 3px;
}
#nav #show_more {
  display: none;
}
#nav li:target {
  display: block !important;
  position: relative;
  top: 100%;
  left: 10px;
}

＆＃13;

<ul id="nav">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
  <li>
    <a href="#show_more">More</a>
    <ul class="submenu">
      <li id="show_more">
        There is more stuff here, woo.
      </li>
    </ul>
  </li>

</ul>

＆＃13;

使用Hovers

的人

当将鼠标悬停在菜单项上时，这应该会提供更多响应。我不确定你的目的是什么，但希望其中一个有帮助。

＆＃13;

 #nav,
 #nav > li {
   list-style-type: none;
   position: relative;
 }
 #nav li {
   display: inline-block;
   width: 100px;
   border: 1px solid grey;
   border-radius: 2px;
   box-sizing: padding-box;
   padding: 3px;
 }
 #nav li > ul {
   display: none;
 }
 #nav li:hover >ul {
   position: absolute;
   top: 100%;
   left: 0;
   margin: 0;
   padding: 0;
   display: block;
 }
 #nav li:hover >ul li {
   display: block;
 }

＆＃13;

<ul id="nav">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
  <li>
    More
    <ul>
      <li>Sub Menu 1</li>
      <li>Sub Menu 2</li>
      <li>Sub Menu 3</li>
      <li>Sub Menu 4</li>
      <li>Sub Menu 5</li>
    </ul>

  </li>

</ul>

＆＃13;

使用：target #id和类来显示/隐藏没有JS的导航

1 个答案:

快速和肮脏

使用Hovers