Navigation Hover Effect

27
64



A tutorial that takes a look at how to create a nice looking navigation bar with a cool little hover effect for the nav items, using HTML and CSS.

More :

Don’t forget to subscribe:
www.youtube.com/YounesTuts

Don’t forget to follow me :

Don’t forget to like page :

Don’t forget to follow me :

Nguồn:https://quydinh.com/

27 COMMENTS

  1. when I hover a mouse I didn't have the red color here is my style.css *

    {

    margin: 0;

    padding: 0;

    }

    body

    {

    font-family: monospace;

    }

    .row

    {

    max-width: 1200px;

    margin: auto;

    }

    .main-nav

    {

    float: right;

    list-style: none;

    margin-top: 30px;

    }

    .main-nav li

    {

    display: inline-block;

    }

    .main-nav li.active a

    {

    }

    a:nth-child(2):hover

    {

    color:

    }

    .main-nav li a

    {

    color: black;

    text-decoration: none;

    padding: 5px 20px;

    font-family: "Roboto", sans-serif;

    font-size: 15px;

    }

    .hero

    {

    width: 1200px;

    margin-left: -80px;

    margin-top: -74px;

    }

    h1

    {

    color: black;

    text-transform: uppercase;

    font-size: 20px;

    text-align: left;

    font-weight: bold;

    margin-top: 150px;

    margin-left: 90;

    }

    header

    {

    background-image: url(psd/images/images/1_20.png);

    height: 100vh;

    background-size: cover;

    background-position: center;

    }

    .button

    {

    margin-top: -330px;

    margin-right: 250px;

    }

    .btn

    {

    border: 1px solid black;

    padding: 10px 20px;

    color: black;

    text-decoration: none;

    margin-right: 5px;

    font-size: 10px;

    text-transform: uppercase;

    }

    .btn-one

    {

    background-color: #cccccc;

    font-family: "Roboto", sans-serif;

    }

    .btn-two

    {

    font-family: "Roboto", sans-serif;

    }

    .btn-two:hover

    {

    background-color: #cccccc;

    transition: all 0.5s ease-in;

    }

    .logo img

    {

    width: 150px;

    height: auto;

    margin: 20px;

    }

    * {

    box-sizing: border-box;

    }

    /* Style the search field */

    form.example input[type=text] {

    padding: 13px;

    font-size: 17px;

    border: 1px solid grey;

    float: left;

    width: 35%;

    background: #ffffff;

    margin-top: -400;

    margin-left: -10;

    }

    /* Style the submit button */

    form.example button {

    float: left;

    width: 10%;

    padding: 15px;

    background: #1dbf73;

    color: white;

    font-size: 17px;

    border: 1px solid gray;

    border-left: none; /* Prevent double borders */

    cursor: pointer;

    margin: -400;

    margin-left: 410;

    }

    form.example button:hover {

    background: #41d18d;

    }

    /* Clear floats */

    form.example::after {

    content: "";

    clear: both;

    display: table;

    }

    .hero

    {

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: baseline;

    font-family: sans-serif;

    }

    .form-box

    {

    height: 100vh;

    background-image: linear-gradient(rgba(0,0,0.7)),url(1_20.jpg);

    }

    h1

    {

    text-align: center;

    color: black;

    margin-bottom: 70px;

    font-size: 30px;

    letter-spacing: 2px;

    }

    }

    .search-field

    {

    height: 50px;

    padding: 10px;

    }

    .skills

    {

    width: 400px;

    }

    .search-btn

    {

    height: 50px;

    width: 150;

    background: #f44336;

    border: none;

    color: #fff;

    }

    Please tell me

  2. Hello, I want to put subitems in this menu, but when I do this it gets misaligned (stays a little to the right), how can I solve it?

  3. اخويا كنتمنا دير دروس وتشرح فيهم بالصوت أفضل من الموسيقى ..وكنتمنى دير دروس متلا حول تصميم واجهات لمطاعم وشكرا ..

LEAVE A REPLY

Please enter your comment!
Please enter your name here