CODEWITHSUNDEEP
csshtmlbuttonnav
Calisto
Calisto

Reputation: 323

Creating a sidebar with buttons

I'm trying to create a sidebar with large clickable areas that use hyperlinks and have a hover effect. Do I accomplish this by inserting button types within my list? or is there a simpler way? This is what I have so far (pay no attention to the ugly colors);

enter image description here

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;}

Upvotes: 0

Views: 2233

Answers (2)

Daryl
Daryl

Reputation: 58

Not sure if I understood you correctly.

You want to create a sidebar that has hover effects right?

Use the pseudo-class :hover. This would be your CSS code:

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;
}

In the :hover class, just write the properties you want to change. In this case, the button's color will change from #fff to #393939 when you hover on it.

If you want, you can also add transition effects. http://www.w3schools.com/css/css3_transitions.asp Note that transition effects have limited browser compatibility.

Also, to point out some errors in your code: Your li opening tag is incomplete. Your a tag is not closed correctly. This is what you had:

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

This is what it should be:

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

In addition to that, li tags are usually enclosed by ul tags. I don't think they work on their own.

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

Lastly, the hr tag is not necessary. You already have borders on the bottom of each button, and the li tag will break the lines for you.

Upvotes: 1

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

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

DEMO HERE

Upvotes: 0

Related Questions