Scribd Logo
Upload

Welcome to Scribd!

  • CSS Lec-39 ScrollMenu and Sidebar Menu.0bee388

    Uploaded by

    Gayatri Shimpi
    1 views4 pages
    The document discusses two types of menus for presenting options when space is limited on a webpage: a scroll menu and a sidebar menu. A scroll menu allows for many links by making the menu overflow and scroll horizontally. It is demonstrated using inline-block links within a div with overflow:auto. A sidebar menu is similar to a slide menu but pops up immediately rather than animating. It is positioned fixed to the side with the links arranged vertically.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses two types of menus for presenting options when space is limited on a webpage: a scroll menu and a sidebar menu. A scroll menu allows for many links by making the menu overflow and scroll horizontally. It is demonstrated using inline-block links within a div with overflow:auto. A sidebar menu is similar to a slide menu but pops up immediately rather than animating. It is positioned fixed to the side with the links arranged vertically.

    Copyright:

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

    CSS Lec-39 ScrollMenu and Sidebar Menu.0bee388

    Uploaded by

    Gayatri Shimpi
    The document discusses two types of menus for presenting options when space is limited on a webpage: a scroll menu and a sidebar menu. A scroll menu allows for many links by making the menu overflow and scroll horizontally. It is demonstrated using inline-block links within a div with overflow:auto. A sidebar menu is similar to a slide menu but pops up immediately rather than animating. It is positioned fixed to the side with the links arranged vertically.

    Copyright:

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

    Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

    CSS Lecture-39
    Topic: Scroll Menu and Sidebar Menu

    ScrollMenu
    Sometimes you want to present many options to the visitors but the space on
    webpage is limited in such situation one can make use of scrollable menu.

    Following example demonstrate scroll menu


    scrollmenu.html
    <html>
    <head>

    <style>
    div.scrollmenu {
    background-color: #333;
    overflow:auto; /* overflow:scroll for both Hori and Vertical*/
    white-space: nowrap;
    }

    div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    }

    div.scrollmenu a:hover {
    background-color: #777;
    }
    </style>
    </head>
    <body>

    <div class="scrollmenu">
    <a href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
    <a href="#">Support</a>

    Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
    Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

    <a href="#">Blog</a>
    <a href="#">Tools</a>
    <a href="#">Base</a>
    <a href="#">Custom</a>
    <a href="#">More</a>
    <a href="#">Logo</a>
    <a href="#">Friends</a>
    <a href="#">Partners</a>
    <a href="#">People</a>
    <a href="#">Work</a>
    </div>

    <h2>Horizontal Scrollable Menu</h2>


    <p>Use Scrollbar to scroll the menu</p>

    </body>
    </html>

    Output:

    Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
    Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

    Side Bar Menu :


    This menu is just same as slide menu only difference it is not animated. It popups
    immediately as user click on it.
    Following program demonstrate this
    sidebarmenu.html
    <html>
    <head>
    <style>
    *{
    margin:0;
    padding:0;
    }
    .sidebar{
    height:100%;
    width:160px;
    position:fixed;
    background-color:lightgrey;
    padding-top:16px;
    }

    .sidebar a{
    text-decoration: none;
    font-size: 30px;
    color:darkblue;
    display:block;
    height: 50px;
    text-align: center;
    margin-top:10px;
    }
    .sidebar a:hover{
    color:red;
    }
    </style>
    </head>
    <body>
    <div class="sidebar">
    <a href="#">Home</a>
    <a href="#">Products</a>
    <a href="#">Company</a>
    <a href="#">About</a>
    </div>
    </body>
    </html>

    Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
    Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

    Output:

    Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260

    You might also like