Scribd Logo
Upload

Welcome to Scribd!

  • JJ

    Uploaded by

    elizabeth.biennet
    3 views2 pages
    The document defines CSS styles for two menu bars. The first menu bar (.menuya1) is red and floats icons on the left side of the page. The second menu bar (.iconmenu2) is green and centers icons. Both menus change the background color of icons on hover and set the first icon as active. Additional CSS styles a paragraph and divider lines below the menus.

    Original Description:

    Original Title

    jj

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document defines CSS styles for two menu bars. The first menu bar (.menuya1) is red and floats icons on the left side of the page. The second menu bar (.iconmenu2) is green and centers icons. Both menus change the background color of icons on hover and set the first icon as active. Additional CSS styles a paragraph and divider lines below the menus.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    3 views2 pages

    JJ

    Uploaded by

    elizabeth.biennet
    The document defines CSS styles for two menu bars. The first menu bar (.menuya1) is red and floats icons on the left side of the page. The second menu bar (.iconmenu2) is green and centers icons. Both menus change the background color of icons on hover and set the first icon as active. Additional CSS styles a paragraph and divider lines below the menus.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html lang="en" dir="ltr">
    <style>
    .menuya1
    {
    width: 20%;
    background-color: red;
    overflow: auto;
    margin-left:80px;
    }
    .menuya1 a
    {
    float:left;
    width: 20%;
    text-align: center;
    padding: 12px 0px;
    color: white;
    font-size: 36px;;
    }
    .menuya1 a:hover
    {
    background-color: black;
    }

    .iconmenu2
    {
    width:80px;
    background-color:green;
    }
    .iconmenu2 a
    {
    color: white;
    display:block;
    text-align:center;
    font-size:35px;
    padding:8px 0px;
    }
    .iconmenu2 a:hover
    {
    background-color: blue;
    }
    .active1
    {
    background-color:black;

    }
    .active2
    {
    background-color:blue;
    }
    .ex2
    {
    font-size:25px;
    border-top:2px black solid;
    }
    .m2
    {
    width:35px;
    height:5px;
    background-color:black;
    margin:6px;
    }

    </style>
    <head>
    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
    awesome.min.css">
    </head>
    <body>
    <div class="menuya1" >
    <a href="#" class="active1"><i class="fa fa-home"></i></a>
    <a href="#"><i class="fa fa-search"></i></a>
    <a href="#"><i class="fa fa-envelope"></i></a>
    <a href="#"><i class="fa fa-globe"></i></a>
    <a href="#"><i class="fa fa-trash"></i></a>
    </div>
    <div class="iconmenu2" >
    <a href="#" class="active2"><i class="fa fa-home"></i></a>
    <a href="#"><i class="fa fa-search"></i></a>
    <a href="#"><i class="fa fa-envelope"></i></a>
    <a href="#"><i class="fa fa-globe"></i></a>
    <a href="#"><i class="fa fa-trash"></i></a>
    </div>
    <p class="ex2">A menu icon:</p>
    <div class="m2"></div>
    <div class="m2"></div>
    <div class="m2"></div>

    </body>

    You might also like