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

  • Work with all your cloud files (Drive, Dropbox, and Slack and Gmail attachments) and documents (Google Docs, Sheets, and Notion) in one place. Try Dokkio (from the makers of PBworks) for free. Now available on the web, Mac, Windows, and as a Chrome extension!

View
 

Lecture - Creating Menus with CSS

Page history last edited by Dr. Ron Eaglin 6 years, 2 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.