使用按钮创建侧边栏

Question

我正在尝试创建一个带有较大可点击区域的边栏，该区域使用超链接并具有悬停效果。我是否通过在列表中插入按钮类型来完成此操作？或者有更简单的方法吗？这就是我目前的情况（不要在意丑陋的颜色）；

Html:

<div id="sideNav">
        <li<a class="menu" href="#"><a></li><hr>
        <li<a class="menu" href="#"> Account<a></li><hr>
        <li<a class="menu" href="#"> Live Events <a></li><hr>
        <li<a class="menu" href="#"> Football<a></li><hr>
        <li<a class="menu" href="#"> Baseball<a></li><hr>
        <li<a class="menu" href="#"> Soccer<a></li><hr>
        <li<a class="menu" href="#"> Basketball<a></li><hr>
        <li<a class="menu" href="#"> Hockey<a></li><hr>
        <li<a class="menu" href="#"> MMA<a></li><hr>
        <li<a class="menu" href="#"> eSports<a></li><hr>
        <li<a class="menu" href="#"> Tennis<a></li><hr>
        <li<a class="menu" href="#"> Cricket<a></li><hr>
        <li<a class="menu" href="#"> Golf<a></li><hr>
        <li<a class="menu" href="#"> Badminton<a></li><hr>
        <li<a class="menu" href="#"> Handball<a></li><hr>
        <li<a class="menu" href="#"> Rugby<a></li><hr>
        <li<a class="menu" href="#"> Snooker<a></li><hr>
        <li<a class="menu" href="#"> Table Tennis<a></li><hr>
        <li<a class="menu" href="#"> Volleyball<a></li><hr>
        </div>

CSS:

.menu a {
    line-height:50px; 
    border-bottom: 1px solid black;
    color:#fff;
    border:1px dotted black;
    display:block;
}

a:hover{
    background-color:#fff;}

Answer 1

不确定我是否理解正确。

您想创建一个具有悬停效果的边栏吗？

使用伪class :hover。这将是您的 CSS 代码：

a.menu:link {
line-height:50px; 
border-bottom: 1px solid black;
color:#fff;
border:1px dotted black;
display:block;
}
a.menu:visited {
color:$fff;
}
a.menu:hover {
color:#393939;
}

在 :hover class 中，只需写下您要更改的属性即可。在这种情况下，当您将鼠标悬停在按钮上时，按钮的颜色将从#fff 变为#393939。

如果需要，您还可以添加过渡效果。 http://www.w3schools.com/css/css3_transitions.asp 请注意，过渡效果的浏览器兼容性有限。

另外，指出您代码中的一些错误：您的 li 起始标签不完整。您的 a 标签没有正确关闭。这是你拥有的：

<li<a class="menu" href="#"> Account<a></li>

这是应该的：

<li><a class="menu" href="#"> Account</a></li>

除此之外，li 标签通常包含在 ul 标签中。我不认为他们自己工作。

<ul>
  <li></li>
</ul>

最后，hr 标签不是必需的。您已经在每个按钮的底部设置了边框，li 标签将为您断开线条。

Answer 2

你可以试试这个：

#sideNav
{
  width:100px;
  background-color:black;
  color:white;
  border-right:12px solid blue;
}

DEMO HERE

使用按钮创建侧边栏

Creating a sidebar with buttons

html

css

button

nav