Scribd Logo
Upload

Welcome to Scribd!

  • 28 views

    Cool CSS Menu - Live Editable Example

    Uploaded by

    wasim ahmed
    The document provides code for a live editable CSS menu. It includes HTML markup for an unordered list with list items for menu links. The CSS styles the menu with properties for fonts, colors, positioning, shadows, and hovers to create a styled navigation menu. On hover, the text color changes and a text shadow is added. Active menu items are given a different color, shadow, and positioned at the top with a border. Links within are block elements styled for consistent line height, padding, and without underlines.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Cool CSS Menu - Live Editable Example

    Uploaded by

    wasim ahmed
    28 views3 pages
    The document provides code for a live editable CSS menu. It includes HTML markup for an unordered list with list items for menu links. The CSS styles the menu with properties for fonts, colors, positioning, shadows, and hovers to create a styled navigation menu. On hover, the text color changes and a text shadow is added. Active menu items are given a different color, shadow, and positioned at the top with a border. Links within are block elements styled for consistent line height, padding, and without underlines.

    Original Description:

    Simple Menu Navigation using Cascading style sheet

    Original Title

    Cool CSS Menu

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides code for a live editable CSS menu. It includes HTML markup for an unordered list with list items for menu links. The CSS styles the menu with properties for fonts, colors, positioning, shadows, and hovers to create a styled navigation menu. On hover, the text color changes and a text shadow is added. Active menu items are given a different color, shadow, and positioned at the top with a border. Links within are block elements styled for consistent line height, padding, and without underlines.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    28 views3 pages

    Cool CSS Menu - Live Editable Example

    Uploaded by

    wasim ahmed
    The document provides code for a live editable CSS menu. It includes HTML markup for an unordered list with list items for menu links. The CSS styles the menu with properties for fonts, colors, positioning, shadows, and hovers to create a styled navigation menu. On hover, the text color changes and a text shadow is added. Active menu items are given a different color, shadow, and positioned at the top with a border. Links within are block elements styled for consistent line height, padding, and without underlines.

    Copyright:

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

    Cool CSS menu Live Editable

    example
    HTML:
    <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="active"><a href="#">Fivera.net</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    CSS:
    body {
    font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
    color:#124578;
    background: #303335;
    }
    .nav {
    margin-top:94px;
    height: 48px;
    display: inline-block;
    list-style: none;
    }
    .nav li, .active {
    float: left;
    position: relative;
    margin: 0 0 4px;
    height: 44px;
    color: #ccc;
    text-shadow: 0 1px rgba(0, 0, 0, 0.9);
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid #232428;
    border-bottom-color: #1f2326;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0));

    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255,


    255, 255, 0));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255,
    255, 255, 0));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255,
    255, 255, 0));
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0
    3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px
    #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2);
    }
    .nav li:hover {
    color: #b0d157;
    text-shadow: 0 1px black, 0 0 20px rgba(255, 255, 255, 0.5);
    }
    .nav li.active,
    .nav .active:active,
    .nav li:active {
    z-index: 2;
    margin: 4px 0 0;
    height: 43px;
    color: #aaa;
    text-shadow: 0 1px black;
    background-color: rgba(255, 255, 255, 0.03);
    border-color: #212425;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px
    rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px
    rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0,
    0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255,
    0.05);
    }
    .nav li a {
    display: block;
    line-height: 44px;
    padding: 0 20px;
    font-size: 12px;
    font-weight: bold;
    color: inherit;
    text-decoration: none;

    outline: 0;
    }

    Home
    About
    Fivera.net
    Portfolio
    Contact
    Output: http://codepen.io/anon/pen/rxGFd

    You might also like