CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU :: Nesting an Unordered List (submenu) inside an Existing List Item :: Assigning Class Names to Submenu and Child Elements :: Styling the Submenu and Child Elements ADVANCED: JAVASCRIPT BUTTON MENU :: DEMO :: What is JavaScript? :: HTML Button Element Name/Placement :: JavaScript Function, Element IDs, and Classes :: Customizing CSS :: File/Folder Placement *time permitting 1
SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION nav <nav> </nav> Used to contain menu/navigation links PLACEMENT:: REFERENCE:: The nav element May be placed anywhere within the <body> </body> tags Usually placed at the top or left of a webpage (for main navigation), or at the top or bottom (for articles, sections, news/social media posts, etc.) http://www.w3schools.com/tags/tag_nav.asp :: Styling the Nav HTML5 Mark Up 1. Create a New HTML 5 Document 2. Click AFTER the opening <body> tag 3. Create the header element 4. INSIDE the header element, create the nav element <body> <header> <nav> </nav> </header> </body> CSS Syntax Use the SINGLE DOCUMENT METHOD to style the nav element: 1. INSIDE the head element, create the style element 2. Set the default browser margins & padding [ for the body, nav, ul, and li elements ] to 0 (Undefined) 3. Set the nav width to 100% of the browser, with a background color of black, and adjustable height for the nav content. NOTE: The default bullets may disappear when margin/padding rules are introduced to the ul & li elements <!doctype html> <html lang= en > <head> <meta charset="utf-8"> <title>untitled Document</title> <style> </style> </head> 2
:: UL and LI and Anchors Elements :: MULTIMEDIA TOOLS :: (1382) :: HANDOUT HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION ul <ul> </ul> Used to contain an unordered list PLACEMENT:: REFERENCE:: The ul element For the purpose of this exercise, the ul element will be placed inside the: <nav> </nav> tags http://www.w3schools.com/tags/tag_ul.asp HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION li <li> </li> A list item PLACEMENT:: The li element is the child element of the ul element. The list item, li, element will be placed inside the: <ul> </ul> tags REFERENCE:: The li element http://www.w3schools.com/tags/tag_li.asp HTML5 HTML 5 MARK UP <tag> ELEMENT Open tag Close tag DESCRIPTION a <a> </a> Hyperlinks text or image to a location PLACEMENT:: The a element, when used to link list items, is the child element of the li element. The anchor, a, element will be placed inside the: <li> </li> tags REFERENCE:: The a element http://www.w3schools.com/tags/tag_a.asp 3
:: Styling the UL, LI, and Anchor Elements Add child elements inside your <nav> HTML Code: <nav> PARENT <ul> CHILD OF NAV <li> CHILD of UNORDERED LIST <ul> EDIT HTML CODE TYPE CSS CODE 1. Scroll to the style element in your document 2. AFTER style rules for the nav element, 3. Create a style rule to remove the bullets from the unordered list inside the nav element (bullets may have been removed in previous step) nav ul {list-style:none;} TYPE CSS CODE After the nav ul styles, create styles for the nav ul list items (li)s NOTE: While The navigation is easy to code in HTML, it is one of the most involved set of parent and child elements when styling is involved. By default an unordered list is displayed as a series of block elements (stacked on top of one another): home about works contact 1. display:inline-block; Instructs the list items to display in a line instead of stacked. The block part of the property value instructs the list-item to function as a block element container (See Full Explanation w3school Definition) 2. text-align:center; Instructs the list items to center align its text 3. font-size:25px; Instructs the list item text to be 25 pixels 4. font-family:verdana, Arial, ; Instructs the list item to have a specific font The default format for an unordered list with hyperlink text will appear as follows: home about works contact If you don t want your navigation to appear like the above, you must give it some style (SEE RIGHT COLUMN) After the nav ul li styles, create styles for the nav ul li anchor element 1. text-decoration:none; Removes underline from hyperlinked text 2. color:white; White hyperlinked text 3. display:block; Includes padding as clickable area for hyperlink 4. background-color:block; Blue background color 5. width:200px; Each list item is 200px wide (not including padding) 6. padding:20px; Adds 20 pixels of padding to top-right-bottom-left 7. AFTER nav ul li a style rules, create nav ul li a:hover pseudo class :: To change text & background color when mouse hovers over anchors 4
PREVIEW IN BROWSER 1. In the Browser, you will see a nav element with: 1. One Unordered List with 4 List Items This navigation is centered using text-align center 2. ALTERNATIVE:: FOR REMOVING MARGINS To remove margins between the list-items, 2. Go to nav ul li styles, then ADD the following:: margin-left:-2px; and margin-right:-2px; 2a. 3. 4. OR 2a. Go to nav ul li styles, then ADD the following:: float:left; If you choose this option, the nav ul list items will default to a position on the left of the screen, and the nav background color will not display correctly. NOTE: Assigning the float property to the nav ul list item elements removes the elements from the natural flow of the webpage. In order for the nav background to display correctly, it must be reintroduced to the float flow of the page 3. Go to nav styles, then ADD the following:: float:left; 5. To move your nav ul element to the right of the screen, you must assign a float property to it 4. Go to nav ul styles, then ADD the following:: float:right; To re-center your nav ul element, we will examine just one option using exact pixel measurements. 5. Go to nav ul styles, then DELETE the following:: float:right; then ADD the following:: width:960px; This width is the sum of 4 list item widths + the padding for each. Each list item = 200px width + 20px of padding on the left + 20px of padding on the right = 240px (SEE YOUR STYLES FOR nav ul li a) margin:0 auto 0 auto; This instructs the nav ul to have 0 margin on top auto margin on right 0 margin on bottom, & finally auto margin on left. A shortcut to write the code is margin:0 auto; if the value is the same for top & bottom and left & right 5
CSS DROP-DOWN MENU :: Nesting an Unordered List (submenu) inside an Existing List Item :: Assigning Class Names to Submenu and Child Elements :: Styling the Submenu and Child Elements Add a submenu to one of your nav ul list item elements: <nav> PARENT <ul> CHILD OF NAV <li> CHILD of UNORDERED LIST <ul> <ul> CHILD OF LIST ITEM <li> CHILD of UNORDERED LIST <ul> EDIT HTML CODE TYPE CSS CODE 1. Scroll to the style element in your document 2. AFTER style rules for the nav ul li a:hover pseudo class element, create styles for the submenu: nav ul li ul This is the explanation for the selector: nav ul li ul Locate nav nav, then first unordered list ul, then child of unordered list li, then child of list item ul display:none; hides the submenu 3. CREATE style rule for hover state of parent list item. nav ul li:hover ul display:block; shows the submenu margin:0; leaves margins for submenu undefined width:200px; width of container for submenu NOTE: The submenu is simply an unordered list nested inside of a list item. In the example above, the unordered list (submenu) contains 3 list items. Notice the parent element for the submenu is the list item with MENU 2 for text. This list item does not close until the submenu is closed 4. CREATE style rules for submenu anchor elements: in regular nav ul li ul li a and rollover state nav ul li ul li a :hover 6
PREVIEW IN BROWSER 1. In the Browser, you will see a nav element with: 1. One Unordered List with 4 List Items One of the 4 List Items (MENU 2) has a submenu The Submenu has 3 List Items ALTERNATIVE:: FOR LIMITING BLACK BACKGROUND To limit the background color to the first ul height 2. 2. Go to nav styles, then ADD the following:: height:70px; NOTE: The height was determined by first adding the top padding for list items (20px) + font-size of list items (25px) + the bottom padding for list items (20px) TOTAL= 65px + 5px to accommodate for line-height of text NOTES: 7
ADVANCED: JAVASCRIPT BUTTON MENU OBJECTIVE: For this exercise, JavaScript will be used to give a button onclick functionality. You will create a button element, style the button element, and script the button to open a menu (element) :::: DEMO :::: SOURCE URL: http://iris.nyit.edu/~dmyrick/artc301-w02/code_snippets/code_button-click-menu.html ADVANCED TUTORIAL ANIMATED DROP-DOWN MENU: http://youtu.be/3iciwaaowsi :: What is JavaScript? A scripting language, which enables elements to be interactive. [ View full definition ] :: HTML Button Element Name/Placement Create a New HTML5 Document: TYPE HTML CODE <body> <button>text OR CHARACTER</button> </body> NOTE: By default, the button element is a rounded rectangle with a gray gradient background. What ever you type between the button tags in HTML, will display on the button in the browser. TYPE CSS CODE Use the SINGLE DOCUMENT METHOD to style the button: 1. width:60px; Instructs button to be 60 pixels wide 2. height:60px; Instructs button to be 60 pixels tall 3. font-size:30px; Instructs button text to be 25 pixels 4. border:none; Removes border 5. outline:none; Removes outline 6. cursor:pointer; Little hand appears on button hover 7. color:#fff; Color of Text or Character is white 8. Background-color:black; Button is black You may replace TEXT OR CHARACTER with a character (get code). For lists of character codes, go to: http://copypastecharacter.com: 1. Choose graphic shapes 2. Scroll, then double-click your character of choice 3. At top, choose As HTML to see HTML code 4. Hover over code and copy with Ctrl(or Cmd)+C EDIT HTML CODE <body> <button> </button> </body> 8
PREVIEW IN BROWSER 1. In the Browser, you will see a button element: 1. The button is 60px X 60px with a black background and white text color. The button currently does not function, so if you click it nothing happens :: JavaScript Function, Element IDs, and Classes ADD onclick Attribute to the button element: EDIT HTML CODE 1. onclick= togglenavpanel( dropit ) onclick triggers a function after clicking the button togglenavpanel is the function the button click will trigger. toggle turns the dropit element on and off when the button is clicked 2. <div id= dropit > dropit is the id name for the div element. The id name may be called by JavaScript AND style rules <body> <button onclick="togglenavpanel('dropit')"> </button> <div id="dropit"> This can be your drop-down menu.<br> You may add an unordered list inside of this div, to serve as the menu<br> You may change the size, background color, text color, and many other properties for this div. </div> </body> ADD SCRIPT ELEMENT TO YOUR HEAD ELEMENT <head> <style> existing content</style> Place the script element and its content inside the head element of your HTML document: When the button element is clicked, the togglenavpanel function is called: 1. (x): JavaScript will replace with id name (dropit) 2. You created a variable named panel that fetches an element by id name (dropit) when the document loads 3. The maxh is set to 200px (You may change this value) 4. HIDE the div named dropit: The if statement states if the height of the panel IS EQUAL TO (currently open to) the maximum height of the panel (200px), then allow toggle button to collapse panel to style height of 0px </head> 5. SHOW the div named dropit: The else statement states if the panel is not open to its maximum height (200px), then allow the toggle button to open the panel to max Height 9
:: Customizing CSS STYLE THE DROPIT DIV <style> /*existing style rules for button*/ </style> AFTER the style rules you created for the button element: 1. Add a set of style rules for the id name dropit 2. width:600px; Instructs button to be 600 pixels wide 3. height:0px; Instructs element to be 0 pixels. The value of 0px is essential for hiding the dropit div. JavaScript will enable the dropit div to change its height when the toggle button is clicked 4. background:#ccc; Light gray background 5. color:#000; Black Text 6. position:absolute; Allows you to pick exact position* 7. z-index:10000; Ensures the menu displays over other elements. Z-index indicates the layer order of an element. 1 is the lowest value for z-index. 8. overflow:hidden; Hides dropit content when closed 9. transition:height 0.3s linear 0s; Animates height of dropit: 0.3 seconds duration, linear transition, with 0 second delay (to start the animation). -webkit is to transition in safari and chrome. -moz is for Mozilla. *future lesson :: File/Folder Placement EDIT HTML CODE To keep your HMTL Code Page Clean, Move your scripts and styles to separate external documents. In total, for the button exercise you will have three files: 1. HTML 2. JS 3. CSS NOTE: You must link your HTML document to the javascript and css documents <!doctype html> <html lang= en > HTML DOCUMENT JAVASCRIPT DOCUMENT CSS DOCUMENT Save As code_button-click-menu.html Save As dropit.js Save As button.css <head> <title>button Code</title> <link href= button.css rel= stylesheet type= text/css > <script src= dropit.js type= javascript ></script> </head> <body> existing content </body> </html> 1. Create a New JavaScript Document 2. Move the script element to the new.js document 3. Create a New CSS Document 4. Move the style element to the new.css document 5. Create links to the two new documents in the head of this HTML page DELETE THE START & END <script></script> tags DELETE THE START & END <style></style> tags 10
11