CODEWITHSUNDEEP
javascripthtmlcssmenunavigationbar
MuyGalan
MuyGalan

Reputation: 71

Javascript navigation hover effect

Does anyone know how to implement the navigation hover effect displayed on this web page into my HTML/CSS document? The aforementioned page is using a WordPress theme, but I would like to add that green effect to my generic web page and be able to change the color as well.

P.S. I have never used Javascript before. (Be nice.)

Upvotes: 0

Views: 163

Answers (2)

Prashant
Prashant

Reputation: 385

Try This:

CSS

ul li{
 list-style:none;
}
ul li a{
transition:all 0.2s ease-out;
padding:5px;
border-radius:5px
}

ul li a:hover{
  background-color:#&dcc0e;
}

HTML:

<ul>
<li>
   <a>Hello</a>
</li>
</ul>

Upvotes: 2

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

This does not need any js. You can create the effect using css transition like this.

div{
                width: auto;
                float: left;
            }
            a{
                color: red;
                text-decoration: none;
                padding: 5px 20px;
                float: left;
                position: relative;
            }
            a:hover{
                color:#FFF;
            }
            a:after{
                content: '';
                background: red;
                position: absolute;
                top: 50%;
                right: 5%;
                bottom: 50%;
                left: 5%;
                border-radius: 3px;
                transition: all .1s;
                z-index: -1;
            }
            a:hover:after{
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
<div><a href="javaScript:void(0);">menu</a></div>

Upvotes: 0

Related Questions