Download presentation
Presentation is loading. Please wait.
1
Nov. 1, Drop-down menu
2
Drop-down Menus We will create a bare bone version the drop-down menu on page In addition to the presentation that you experienced earlier in the semester, this will give you a fundamental understanding of how it works. To learn to make fancier dropdowns, you can: Learn through tutorials, Search for “CSS3 generators” to generate automatically online. Search for dropdown menu programs. Most require you to log on or to download the software.
3
Starting HTML and CSS /* dont think i need
<!DOCTYPE html> <html lang="en"> <head> <title>Skeleton dropdown </title> <meta charset="utf-8"> <link href="dropstyles.css" rel="stylesheet"> </head> <body> <div id ="wrapper"> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="coffee.html">Coffee</a></li> <li><a href="cuisine.html">Cuisine</a></li> <li><a href="directions.html">Directions</a></li> <li><a href=" </ul> </nav> <header> <h1>Hello World</h1> </header> <p>This is a sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. Don't read this sentence that will repeat repeatedly and I will keep repeating. </p> </div> </body> </html> /* dont think i need header, main, nav, footer, figure, figcaption { display: block; } */ body { background-color: #66484d; } #wrapper { width: 800px; min-height: 400px; background-color: #ffe9ec; margin: auto; header { background-color: #ffd3d9 ; min-height: 125px; p { padding: 10px; nav { background-color: #bb0033; text-align: right; padding-right: 5px;
4
Emergency styles nav ul { list-style-type: none; margin: 0; }
display: inline-block; nav li { padding: 0.5em; } display: block; nav a { text-decoration: none; nav a:visited { color: #EAEAEA; } nav a:link { color: #FFFFFF; } nav a:hover { color: #D3DBEB;} padding: 10px 20px; color: #000000; main { background-color: #ffffff; min-height: 400px; overflow: auto;
Similar presentations
