Archived copy for reference only
 

Parkland College > Fine & Applied Arts > Graphic Design/Interactive Design > Archives > Exercises > Dreamweaver: Smart Menu
 

Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Dreamweaver: Smart Menu with Skeleton

(Archived from 2019)

Objective

To review basic HTML and CSS skills by building a responsive menu system similar to this example.

Discussion

The "hamburger" dropdown menu has become the standard for devices. Yet large screen menu systems are not going away any time soon. Unfortunately, combing the two on one web page takes some technical wizardry. In this exercise we'll peek under the hood to see how one can style one block of <ul> for different screens.

In this exercise, we will start with the Skeleton Responsive Framework,  a lean alternative to Bootstrap. Because Skeleton does not come with its own menu system, we will building one using Smart Menus, a popular JQuery framework. Once completed, this "master" menu system can be easily ported to other websites.

Procedure

Overview: Download the Smart Menu a responsive menu system. Add custom CSS styles. Add the menu system and content to a Skeleton template.

Prepping for the exercise

  1. download starter files (location: faa999/class/html/exercises/x0_smart-menu)
  2. download "smart menu" source files
  3. merge all files into one root folder
  4. launch Dreamweaver
  5. import "gds220.ste" to edit "gds220-admin" files
  6. site > new site: site name=class_x0_sm; 
    local site folder=faa999/class/html/exercises/x0_sm); export STE file

Developing the responsive menu

  1. open "nav.html"
  2. browse to www.smartmenus.org/docs/
  3. copy/paste "quick setup" sample <ul> html code (3rd section) into "nav.html"
  4. change theme class to "sm sm-mint"
  5. edit menu contents
  6. copy/paste "quick setup" css code (1st section) into "nav.html"
  7. edit paths, change theme to "css/sm-mint/sm-mint.css"
  8. copy/paste "quick setup" javascript code (2nd section) into "nav.html" (paste into <head>, not <body>)
  9. browse to www.smartmenus.org/about/themes/#demos-3
  10. copy/paste additional code into "nav.html"
    • javascript: goes above </body> wrapped inside <script> tag
    • css: goes into new file "css/sm-gds.css"
    • additional html: first 9 lines only (paste right after <body>)
  11. link to "css/sm-gds.css" (above <style>)
  12. clean up html (tip: make sure that there is a </nav>)
  13. file > preview in browser (opt+F12 and cmd+F12), test responsive menu
  14. in finder: create new folder "sm-mint-backup"
  15. add appropriate files, compress into a ZIP archive (RMB)

Styling the hamburger menu

  1. open "nav.html"
  2. delete <h2>
  3. insert > image: "images/menu-sample.png" (push down with <p>)
  4. live view: make window narrow (<1024px); expand menu
  5. window > css designer: sm-gds.css, global
    • edit main-nav: disable border; background=#82BC45 (eye dropper)
    • edit .main-menu-btn-icon: background=#FFF
    • add (+) #main-menu li a: text: color=#fff; font-weight=bold; background-color=#F7A02C (tip: select contact <a>: add new global selector (+) )

Styling the large menu

  1. live view: make window large (>1024px)
  2. window > css designer: sm-gds.css, min-width 1024px
    • .main-nav {background-color: #F7A02C; }
    • #main-menu { width: 1024px; margin-left: auto; margin-right: auto; }
    • #main-menu li { width: 170px; border-left: thin solid #FFFFFF; text-align: center; }
    • #main-menu li:last-child { border-right: thin solid #FFFFFF; }
    • .sm-mint a span.sub-arrow { border-color: #fff transparent transparent; }
    • .sm-mint a.highlighted span.sub-arrow { border-color: #fff transparent transparent transparent; }
    • #main-menu li a { padding-top: 16px; padding-bottom: 16px; }
    • #main-menu li a:hover { background-color: #F26522; }
    • #main-menu ul { padding-top: 0px; padding-bottom: 0px; }
    • #main-menu li ul li { border-top: thin solid #FFFFFF; border-left-width: 0px; }
    • #main-menu li ul li:last-child { border-right-width: 0px; }
  3. browse to www.smartmenus.org/docs/ (click on "data-* attribute options, study examples)
  4. replace submenu li with the following HTML code:
    • <li data-sm-horizontal-sub="true"><a href="#">Explore</a>
    • <li data-sm-horizontal-sub="true"><a href="#">Connect</a>
  5. window > css designer: sm-gds.css, min-width 1024px:
    • add the following CSS code:
    /* horizontal sub menus */
    li[data-sm-horizontal-sub] > ul {
    min-width: 0px !important;
    }
    li[data-sm-horizontal-sub] > ul li a, li[data-sm-horizontal-sub] > ul li a:hover {
    padding-left: 10px;
    padding-right: 10px;
    }
  6. edit media queries (2x): @media (min-width:1024px)
  7. in finder: create new folder "sm-gds-backup"
  8. add appropriate files, compress into a ZIP archive (RMB)

Prepping the master page

  1. open "content.html"
  2. duplicate "index.html"; rename "master.html", open
  3. document title=Smart Menu with Skeleton
  4. window > CSS designer: add new source (+): create a new css file: "css/gds-skin.css"
    • div { border: thin solid #FF0000; }
    • .clear { clear: both; }
    • .img-responsive { max-width: 100%; height: auto; }
  5. select <div.one-half column>: DELETE
  6. insert > div: class=four columns
  7. insert > div: class=eight columns
  8. select <body>:
    • insert > div: class="container-wide"
    • insert > div: class="container"
  9. copy/paste from "content".html" to "master.html":
    • <header> (inside <div.container-wide>)
    • <nav> (after <header>
    • <section> (inside <div.container>)
    • <aside> (into <div.four columns>)
    • <main> (into <div.eight columns>)
    • <script> (right before </body>)
  10. style the following elements:
    • logo inside <header>: add id="logo"
    • logo inside <aside>: add class="logo2 img-responsive"
    • h3 inside <aside>: add class="quote"
    • quote source inside <aside>: add class="quote" to <p>
  11. copy the following <head> code (paste right after link to "css/gds-skin.css":
    <!-- SmartMenus core CSS (required) -->
    <link href="css/sm-core-css.css" rel="stylesheet" type="text/css" />
    <link href="css/sm-mint/sm-mint.css" rel="stylesheet" type="text/css" />
    <link href="css/sm-gds.css" rel="stylesheet" type="text/css">
    <!-- jQuery -->
    <script src="libs/jquery/jquery.js" type="text/javascript"></script>
    <!-- SmartMenus jQuery plugin -->
    <script src="jquery.smartmenus.js" type="text/javascript"></script>
  12. file > preview in browser (opt+F12 and cmd+F12)

Adding Google Fonts

  1. browse to www.google.com/webfonts#HomePlace:home 
  2. search for "open sans", select font (+)
  3. click 1 FAMILY SELECTED
  4. click CUSTOMIZE: select only weights needed (i.e. 400, 400i, 700, 700i)
  5. return to EMBED: copy standard embed code
  6. replace font (line 18): <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  7. window > CSS designer: source=gds-skin: add selector (+):
    • body { font-family: "Open Sans", sans-serif; }
  8. file > preview in browser (opt+F12 and cmd+F12)

Styling the header

  1. window > CSS designer: source=gds-skin; global; add selectors (+):
    • #logo { height: 55px; padding-left: 20px; }
    • header { height: 0px; }
  2. window > CSS designer: source=gds-skin; new media query: min-width:1024px; add selectors (+):
    • #logo { height: 75px; }
    • header { background-color: #82BC45; height: 75px; border-bottom: 1px solid #FFFFFF; }
  3. window > CSS designer: source=sm-gds; global; edit selectors:
    • .main-menu-btn: height=45px
  4. file > preview in browser (opt+F12 and cmd+F12),

Fine-tuning the page

  1. edit "skeleton.css": change media query from min-width: 550 to min-width: 750 (2x)
  2. select last <p>: add class="small"
  3. select first address <p>: add class="one-half column"
  4. window > CSS designer: source=gds-skin.css; global; add selectors (+)
    • section { font-size: 0.8em; margin-top: 15px; margin-bottom: 150px; }
    • .logo2 { margin-left: -20px; margin-top: 12px; margin-bottom: 45px; }
    • h3.quote { text-indent: -14px; margin-right: 25px; }
    • .small { font-size: 0.8em; }
    • a { color: #178244; font-weight: bold; text-decoration: none; }
    • a:hover { text-decoration: underline; color: #178244; }
    • .container: min-width=1024px
  5. window > CSS designer: source=gds-skin.css: media=(max-width: 750px): add selector (+)
    • section { display:none; }
    • .quote { display:none; }
    • .logo2 { margin-top: 90px; }
  6. add class="quote" to h3 and p inside <aside>
  7. add active state menu button: window > CSS designer: add source=this page; add selector (+)
    • #main-menu a.contact { background-color: #178244; }
  8. file > preview in browser (opt+F12 and cmd+F12)

Grading

  1. publish your page (see separate instructions)
  2. make a link from your process page to this assignment

 

BACK TO TOP
Last updated: 5/11/21