Question

如何将链接添加到这样的垂直菜单？我尝试了所有我能想到的东西而且它不起作用。

以下是代码：

 div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}

nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  overflow: hidden;
  text-align: center;
}


nav.vertical > ul > li {
  display: block;
    }

      nav.vertical > ul > li > label,
      nav.vertical > ul > li > a {
        background-color: rgb(157, 34, 60);
        background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        border-bottom: 1px solid rgba(255,255,255,.1);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
        color: rgb(255,255,255);
        display: block;
        font-size: .85rem;
        font-weight: 500;
        height: 50px;
        letter-spacing: .5rem;
        line-height: 50px;
        text-shadow: 0 1px 1px rgba(0,0,0,.1);
        text-transform: uppercase;
        transition: all .1s ease;
      }

        nav.vertical > ul > li > label:hover,
        nav.vertical > ul > li > a:hover {
         background-color: rgb(114, 51, 98);
         background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); 
         cursor: pointer;
        }

        nav.vertical > ul > li > label + input {
          display: none;
          visability: hidden;
        }

/* unvisited link */
a:link {
    color: #AAAAFF;
}

/* visited link */
a:visited {
    color: #DD04FF;
}

/* mouse over link */
a:hover {
    color: #FF0000;
}

/* selected link */
a:active {
    color: #FFCC00;
}


footer {
    color: #ffffff;
}

nav{
    background-color: dimgrey;
    border: 5px solid #333;

}
nav ul{
    nav ul: list-style-type: none;
}
nav li{
        padding: 2px;
        display: inline-block;
        border-right: 1px solid #fff;
}
nav li a:link{
    text-decoration: none:
    font-weight: 700;
    text-transform: uppercase;
    color:#fff;
    font-family: sans-serif;
    font-size:0.9em; 

}
nav li:hover{
    background-color: teal;
}

<div class="wrapper">
  <nav class="vertical">
    <ul>
      <li>
        <label for="home">Home</label>
        <input type="radio" checked="true" name="verticalMenu" id="home" />
      </li>
      <li>
        <label for="blog">Blog</label>

        <input type="radio" name="verticalMenu" id="blog" href="blog.html"></a> 

      </li>
      <li>
        <label for="work">News</label>
        <input type="radio" name="verticalMenu" id="work" />
      </li>
      <li>
        <label for="work">Contact</label>
        <input type="radio" name="verticalMenu" id="work" />
      </li>
    </ul>
  </nav>
</div>

所以基本上，我不知道在哪里添加href。任何反馈都将不胜感激。

谢谢:)

Answer 1

<li>
        <label for="home"><a href="~/address">Home</a></label>
        <input type="radio" checked="true" name="verticalMenu" id="home" />
</li>

在标签中有一个锚是有效的 - 在HTML 4.01和HTML5中。

Answer 2

如果您只需要一个链接，而不是单选按钮，请尝试：

<div class="wrapper">
  <nav class="vertical">
    <ul>
      <li>
        <a href="yourlink">Home</a>
      </li>
      <li>
        <a href="blog.html">Blog</a>
      </li>
      <li>
        <a href="yourlink">News</a>
      </li>
      <li>
        <a href="yourlink">Contact</a>
      </li>
    </ul>
  </nav>
</div>

Answer 3

只需使用onclick标记即可获得链接：

<a>

div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}

nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  overflow: hidden;
  text-align: center;
}


nav.vertical > ul > li {
  display: block;
    }

      nav.vertical > ul > li > label,
      nav.vertical > ul > li > a {
        background-color: rgb(157, 34, 60);
        background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));
        border-bottom: 1px solid rgba(255,255,255,.1);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
        color: rgb(255,255,255);
        display: block;
        font-size: .85rem;
        font-weight: 500;
        height: 50px;
        letter-spacing: .5rem;
        line-height: 50px;
        text-shadow: 0 1px 1px rgba(0,0,0,.1);
        text-transform: uppercase;
        transition: all .1s ease;
        text-decoration: none;
      }

        nav.vertical > ul > li > label:hover,
        nav.vertical > ul > li > a:hover {
         background-color: rgb(114, 51, 98);
         background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
         background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); 
         cursor: pointer;
        }

        nav.vertical > ul > li > label + input {
          display: none;
          visability: hidden;
        }

/* unvisited link */
a:link {
    color: #AAAAFF;
}

/* visited link */
a:visited {
    color: #DD04FF;
}

/* mouse over link */
a:hover {
    color: #FF0000;
}

/* selected link */
a:active {
    color: #FFCC00;
}


footer {
    color: #ffffff;
}

nav{
    background-color: dimgrey;
    border: 5px solid #333;

}
nav ul{
    nav ul: list-style-type: none;
}
nav li{
        padding: 2px;
        display: inline-block;
        border-right: 1px solid #fff;
}
nav li a:link{
    text-decoration: none:
    font-weight: 700;
    text-transform: uppercase;
    color:#fff;
    font-family: sans-serif;
    font-size:0.9em; 

}
nav li:hover{
    background-color: teal;
}

添加指向垂直导航菜单的链接

3 个答案: