log inhelp

 | 

  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Whenever you search in PBworks or on the Web, Dokkio Sidebar (from the makers of PBworks) will run the same search in your Drive, Dropbox, OneDrive, Gmail, Slack, and browsed web pages. Now you can find what you're looking for wherever it lives. Try Dokkio Sidebar for free.

View
 

Lecture - Creating Menus with CSS

Page history last edited by Dr. Ron Eaglin 7 years, 7 months ago

 Creating Menus with CSS

 

Prerequisites

 

Lecture - Getting Started with CSS

 

Summary

 

Demonstrates how to create a multilevel menu system using just  CSS. Alternative menu systems using Javascript are available at Lecture - JavaScript - Creating menus with JavaScript and Lecture - JQuery - Menu Example in JQuery

 

Video 

 

 

Reference Materials

 

Article for basis of video - http://htmldog.com/techniques/dropdowns/ 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Multiple level dropdown</title>
    <style>
     
    a {
        color: #06c;
    }
     
    ul {
        padding: 0;
        margin: 0;
        background: #DCEAF9;
        float: left;
        border-style: solid;
        border-color: blue;
    }
     
    li {
        float: left;
        display: inline;
        position: relative;
        width: 150px;
        padding-left: 20px;
        list-style: none;
    }
     
    ul ul {
        position: absolute;
        left: 0;
        top: 100%;
        background: #DCEAF9;
        display: none;
        border: 
    }
     
    ul ul ul {
        left: 100%;
        top: 0;
    }
     
    li:hover {
       background:yellow;
    }
     
    li:hover > ul {
        padding-left: 10px;
        display: block;
    }
     
    p {
        clear: left;
        padding-top: 1em;
    }
     
    </style>
</head>
<body>
<h1>Example of a menu system created only with CSS</h1>
    <nav>
        <ul>
            <li>
                <a href="">Level 1 Item 1</a>
                <ul>
                    <li><a href="">Level 2 Item 1-1</a></li>
                    <li><a href="">Level 2 Item 1-2</a></li>
                    <li><a href="">Level 2 Item 1-3</a></li>
                </ul>
            </li>
            <li>
                <a href="">Level 1 Item 2</a>
                <ul>
                    <li>
                        <a href="">Level 2 Item 1</a>
                        <ul>
                            <li><a href="">Level 3 Item 1</a></li>
                            <li><a href="">Level 3 Item 2</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Level 2 Item 2</a>
                        <ul>
                            <li><a href="">Level 3 Item 1</a></li>
                            <li><a href="">Level 3 Item 2</a></li>
                            <li><a href="">Level 3 Item 3</a></li>
                            <li><a href="">Level 3 Item 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>
 

 

 

Additional Information

 

COP 4813 Lectures

Comments (0)

You don't have permission to comment on this page.

Printable version