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

  • Stop wasting time looking for files and revisions! Dokkio, a new product from the PBworks team, integrates and organizes your Drive, Dropbox, Box, Slack and Gmail files. Sign up for free.

View
 

Lecture - Creating Menus with CSS

Page history last edited by Dr. Ron Eaglin 4 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.