COURSE NOTE - ABOUT THIS PAGE AND THIS SITE:
This is an Example Page For Introduction to Web Site Design and as such shows the essential look to the site you are expected to produce as your overall class project (resulting from going through several exercises). Your own site should look pretty much like the example site, without this note, of course.
You obviously don't want the same title, your name isn't Mike Strong and you don't want this little note at the top.
This is designed with CSS to change shape and arrangements as the display device changes from desktop to tablet to phone. To get an idea of the effect on a phone you can simply narrow the window (drag the right boundary leftward). This kind of morphing has gone by various names, the earliest being to deform gracefully, then responsive design and adaptive design. They have the same basic idea.
In the menu below we've used an unordered list combined with CSS to create a horizontal menu with a dropdown panel. Each link and dropdown is formed within an <li> tag. The CSS for this is covered elsewhere to show you how it works. You will be expected to created a similar menu for your own site.
The horizontal menu with dropdown above uses an un-ordered list and list items to generate the menu links. Below is the code.
The top level is shown in blue and the dropdown item with sub items is shown in red.
<div class="nav-menu">
<ul class="nav-menu nav-clearfix">
<li><a href="Default.htm">Home</a></li>
<li><a href="Articles.htm">Articles</a></li>
<li><a href="Pictures.htm">Pictures</a></li>
<li><a href="CSSMenu.htm">This CSS Menu</a></li>
<li><a href="#">Portfolio <span class="arrow">▼</span></a>
<ul class="nav-sub-menu">
<li><a href="Bio.htm">Bio</a></li>
<li><a href="Jobs_Long_List.htm" target="_blank">Job List</a></li>
<li><a href="http://www.mikestrongphoto.com/CV_Galleries/Video_Links_online.htm" target="_blank">Video Projects</a></li>
<li><a href="http://www.blurb.com/b/7131801-moving-songs" target="_blank">Book: Moving Songs</a></li>
<li><a href="http://www.blurb.com/b/7084736-umkc-conservatory-dance-division-spring-2016-dance" target="_blank">Book: UMKC Dance at the Folly</a></li>
<li><a href="Contact.htm">Contact</a></li>
<li><a href="http://www.mikestrongphoto.com/blogwp/" target="_blank">blog (external)</a></li>
</ul>
</li>
<li><a href="Contact.htm">Contact</a></li>
</ul>
</div>
In the examples below we are using CSS classes we wrote and named "nav-menu" and adding in various other CSS classes we wrote to add to the baseline behaviour. The classes all start with a . (dot) as the first character.
These are applied
<style type="text/css">
/*----- CSS For UL/LI Menu -----*/
.nav-clearfix:after {
display:block;
clear:both;
}
.nav-menu-wrap {
width:100%;
background:#333333;
}
.nav-menu {
width:100%;
margin:0px auto;
}
.nav-menu li {
margin:0px;
list-style:none;
font-family:'Calibri';
background:#999999;
}
.nav-menu a {
transition:all linear 0.15s;
color:black;
}
.nav-menu li:hover > a, .nav-menu .current-item > a {
text-decoration:none;
color:yellow;
}
.nav-menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Horizontal Menu, parent items -----*/
.nav-menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:16px;
}
.nav-menu > ul > li > a {
padding:5px 15px;
display:inline-block;
//text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.nav-menu > ul > li:hover > a, .nav-menu > ul > .current-item > a {
background:red;
}
/*----- Dropdown Menu, child items -----*/
.nav-menu li:hover .nav-sub-menu {
z-index:1;
opacity:1;
/*
when hovering over this element, show children
(bring to front and make opaque - changes from pre-set below)
*/
}
.nav-sub-menu {
width:150%;
padding:0px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:8px 2px 3px rgba(0,0,0,0.6);
background:#666666;
/*
width: 150% == 1.5 times width of parent
padding (top/bottom) (left/right) from parent
position:absolute makes sure sub menu is attached to the parent item
top: 100% places the sub menu right under the parent item
left: pixel position left or right of left side of parent
z-index:-1 originally pushes dropdown behind all other layers on the page, including below the body element
opacity: originally totally transparent (0)
-- NOTE these last two are changed by hovering, see item just above
transition = sets specs: opacity, linear method, time in seconds to go from transparent to opaque
box-shadow is shadow location then color then amount of opacity (versus transparent)
background sets color for background
*/
}
.nav-sub-menu li {
display:block;
font-size:16px;
}
.nav-sub-menu li a {
padding:10px 30px;
display:block;
}
.nav-sub-menu li a:hover, .nav-sub-menu .current-item a {
background:red;
}
</style>
NOTE: To better see how each of these examples looks on a phone, drag the right side of the window to the left to narrow the window to a phone width.