SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)

    CSS Challenge #4 - Drop down menus

    Sorry for the skip last week - had a major project deadline to attend to that sopped up my time.

    Today we're going to move away from the esoteric and cute (checkerboards, spinning dice) to something more concrete and practical. Drop down menus. You don't have to go far to spot one, there's one on the Sitepoint Homepage. Here's a copy of the relevant HTML

    Code html:
    <!DOCTYPE html>
    <head>
      <style type="text/css">
        /* Put your css here */
      </style>
    </head>
    <body>
    <div class="Superfish-wrap">
      <ul class="Superfish menu">
        <li class="selected current tab"><a href="http://www.sitepoint.com" >Home</a></li>
        <li class="tab"><a href="http://www.sitepoint.com/forums/">Forums</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content" >Web Content</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site" >Design Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site" >Program Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site" >Host Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site" >Manage Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center" >Community Center</a></li>
          </ul>
        </li>
        <li class="tab"><a style="cursor:default;">Resources</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/newsletter/#subscription-info" >Newsletters</a></li>
            <li><a href="http://www.sitepoint.com/category/podcast/" >Podcast</a></li>
            <li><a href="http://reference.sitepoint.com/css" >CSS Reference</a></li>
            <li><a href="http://reference.sitepoint.com/html" >HTML Reference</a></li>
            <li><a href="http://reference.sitepoint.com/javascript" >Javascript Reference</a></li>
            <li><a href="http://www.sitepoint.com/tools/" >Tools</a></li>
            <li><a href="http://www.sitepoint.com/tag/html5-dev-center/" >HTML5 Dev Center</a></li>
            <li><a href="http://www.sitepoint.com/web-hosting-reviews/" >Hosting Reviews</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
        <li class="tab"><a href="http://products.sitepoint.com/" >Bookstore</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/books-matrix/" >Find the right book</a></li>
            <li><a href="http://products.sitepoint.com/" >New Releases</a></li>
            <li><a href="http://products.sitepoint.com/development" >Web Development Books</a></li>
            <li><a href="http://products.sitepoint.com/design" >Web Design Books</a></li>
            <li><a href="http://products.sitepoint.com/business" >Business & Marketing Books</a></li>
            <li><a href="http://www.sitepoint.com/for-educators/" >Books for Educators</a></li>
            <li><a href="http://www.sitepoint.com/frequently-asked-questions/" >Frequently Asked Questions</a></li>
            <li><a href="http://sitepoint.com/shipping/" >Shipping Rates & Times</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://www.sitepointmarket.com" >Market</a></li>
        <li class="tab"><a href="https://learnable.com/sitepoint" >Courses</a></li>
        <li class="sitepoint-network-tab tab"><a href="http://www.sitepoint.com" >Sitepoint Network</a>
          <ul class="children">
            <li class="jspro"><a href="http://jspro.com/" >JSPro</a></li>
            <li class="buildmobile-link"><a href="http://buildmobile.com" >BuildMobile</a></li>
            <li class="designfestival-link"><a href="http://designfestival.com" >DesignFestival</a></li>
            <li class="rubysource-link"><a href="http://rubysource.com" >RubySource</a></li>
            <li class="cloudspring-link"><a href="http://cloudspring.com" >CloudSpring</a></li>
            <li class="phpmaster-link"><a href="http://phpmaster.com" >PHPMaster</a></li>
            <li class="learnable"><a href="http://learnable.com/" >Learnable</a></li>
            <li class="sitepointmarket-link"><a href="http://www.sitepointmarket.com" >SitePoint Market</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </body>
    </html>

    Sitepoint uses a jQuery plugin called Superfish to insure backward compatibility with older browsers, even IE 6. In our exercise we will work only with the CSS needed to do the effect since modern browsers can achieve the effect without any Java Script.

    Beginner Challenge: Replicate the SitePoint homepage dropdowns in CSS only. You'll need to make use of the li:hover attribute, position relative and position absolute. Don't fret so much on the color, font and spacing, the goal here is to master and understand the effect of a drop down menu.

    Advanced Challenge: Use CSS Media queries to change the menu into an accordion for phones. Keep in mind that phones register the first touch on an element as a :hover.

    Expert Challenge: Using CSS transitions, make the menus fold or fade in, dissolve out, or whatever suits your fancy. You may need to modify the HTML for more elaborate effects.

    When sharing your answers in the thread, use spoilers.

    [code][spoiler]This is spoiler text[/spoiler][/code]

    renders...

    Code:
    This is spoiler text

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Interesting challenge Michael. Hopefully I will get some time later in the week to have a go at one of the challenges.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    So, we're posting our code in the thread instead of mailing them to someone?

    Just so's we's clear.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    So, we're posting our code in the thread instead of mailing them to someone?

    Just so's we's clear.
    Yes just post the code in spoiler tags so that those who don't want to peek before trying can avoid them.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Only created it quickly because I'm at work, might make it nicer when I get home

    Code:
    <!DOCTYPE html>
    <head>
      <style type="text/css">
        body {
          font-size: 14px;
          font-family: Calibri, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
          line-height: 13px;
          padding: 10px;
        }
        
        .Superfish-wrap {
          background-color: #e8e8e8;
          border: 1px solid #d5d5d5;
          border-radius: 3px;
          margin: 0 auto;
          width: 900px;
        }
        
        .Superfish-wrap ul {
          list-style: none;
          margin: 0;
          padding: 0;
          position: relative;
        }
        
        .Superfish-wrap a {
          color: #464646;
          display: block;
          font-weight: bold;
          line-height: 36px;
          padding: 0 15px;
          text-decoration: none;
          text-shadow: 1px 1px 1px #fff;
          transition: all .1s ease-in;
        }
        
        .Superfish-wrap li:hover > a,
        .Superfish-wrap a:hover {
          background-color: #e56500;
          color: #fff;
          cursor: pointer !important;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
        }
        
        /* Top level navigation */
        .Superfish-wrap > ul {
          height: 36px;
          padding: 0 10px;
        }
        
        .Superfish-wrap > ul > li {
          float: left;
          position: relative;
        }
        
        /* Sub navigation */
        .Superfish-wrap li > ul {
          background-color: #e8e8e8;
          border: 1px solid #d5d5d5;
          border-top-width: 0;
          box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
          font-size: smaller;
          left: 0;
          opacity: 0;
          overflow: hidden;
          position: absolute;
          top: 36px;
          transition: all .2s ease-in;
          width: 180px;
          z-index: -1;
        }
        
        .Superfish-wrap li:hover > ul {
          opacity: 1;
          z-index: 1;
        }
        
        .Superfish-wrap li > ul a {
          font-weight: normal;
          line-height: 16px;
          padding: 9px 15px;
        }
      </style>
    </head>
    <body>
    <div class="Superfish-wrap">
      <ul class="Superfish menu">
        <li class="selected current tab"><a href="http://www.sitepoint.com" >Home</a></li>
        <li class="tab"><a href="http://www.sitepoint.com/forums/">Forums</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content" >Web Content</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site" >Design Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site" >Program Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site" >Host Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site" >Manage Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center" >Community Center</a></li>
          </ul>
        </li>
        <li class="tab"><a style="cursor:default;">Resources</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/newsletter/#subscription-info" >Newsletters</a></li>
            <li><a href="http://www.sitepoint.com/category/podcast/" >Podcast</a></li>
            <li><a href="http://reference.sitepoint.com/css" >CSS Reference</a></li>
            <li><a href="http://reference.sitepoint.com/html" >HTML Reference</a></li>
            <li><a href="http://reference.sitepoint.com/javascript" >Javascript Reference</a></li>
            <li><a href="http://www.sitepoint.com/tools/" >Tools</a></li>
            <li><a href="http://www.sitepoint.com/tag/html5-dev-center/" >HTML5 Dev Center</a></li>
            <li><a href="http://www.sitepoint.com/web-hosting-reviews/" >Hosting Reviews</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
        <li class="tab"><a href="http://products.sitepoint.com/" >Bookstore</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/books-matrix/" >Find the right book</a></li>
            <li><a href="http://products.sitepoint.com/" >New Releases</a></li>
            <li><a href="http://products.sitepoint.com/development" >Web Development Books</a></li>
            <li><a href="http://products.sitepoint.com/design" >Web Design Books</a></li>
            <li><a href="http://products.sitepoint.com/business" >Business & Marketing Books</a></li>
            <li><a href="http://www.sitepoint.com/for-educators/" >Books for Educators</a></li>
            <li><a href="http://www.sitepoint.com/frequently-asked-questions/" >Frequently Asked Questions</a></li>
            <li><a href="http://sitepoint.com/shipping/" >Shipping Rates & Times</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://www.sitepointmarket.com" >Market</a></li>
        <li class="tab"><a href="https://learnable.com/sitepoint" >Courses</a></li>
        <li class="sitepoint-network-tab tab"><a href="http://www.sitepoint.com" >Sitepoint Network</a>
          <ul class="children">
            <li class="jspro"><a href="http://jspro.com/" >JSPro</a></li>
            <li class="buildmobile-link"><a href="http://buildmobile.com" >BuildMobile</a></li>
            <li class="designfestival-link"><a href="http://designfestival.com" >DesignFestival</a></li>
            <li class="rubysource-link"><a href="http://rubysource.com" >RubySource</a></li>
            <li class="cloudspring-link"><a href="http://cloudspring.com" >CloudSpring</a></li>
            <li class="phpmaster-link"><a href="http://phpmaster.com" >PHPMaster</a></li>
            <li class="learnable"><a href="http://learnable.com/" >Learnable</a></li>
            <li class="sitepointmarket-link"><a href="http://www.sitepointmarket.com" >SitePoint Market</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Looks like spam but I promise I am a human, slight update to my original post but with a nicer animation.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <style type="text/css">
        body {
          font-size: 14px;
          font-family: Calibri, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
          line-height: 13px;
          padding: 10px;
        }
        
        .Superfish-wrap {
          background-color: #e8e8e8;
          border: 1px solid #d5d5d5;
          border-radius: 3px;
          margin: 0 auto;
          width: 900px;
        }
        
        .Superfish-wrap ul {
          list-style: none;
          margin: 0;
          padding: 0;
          position: relative;
        }
        
        .Superfish-wrap a {
          color: #464646;
          display: block;
          font-weight: bold;
          line-height: 36px;
          padding: 0 15px;
          text-decoration: none;
          text-shadow: 1px 1px 1px #fff;
          transition: all .1s ease-in;
        }
        
        .Superfish-wrap li:hover > a,
        .Superfish-wrap a:hover {
          background-color: #e56500;
          color: #fff;
          cursor: pointer !important;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
        }
        
        /* Top level navigation */
        .Superfish-wrap > ul {
          height: 36px;
          padding: 0 10px;
        }
        
        .Superfish-wrap > ul > li {
          float: left;
          position: relative;
        }
        
        /* Sub navigation */
        .Superfish-wrap li > ul {
          background-color: #e8e8e8;
          border: 1px solid #d5d5d5;
          border-top-width: 0;
          border-radius: 0 0 5px 5px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
          font-size: smaller;
          left: -1px;
          opacity: 0;
          overflow: hidden;
          position: absolute;
          top: 25px;
          transition: all .2s ease-in;
          visibility: hidden;
          width: 180px;
        }
        
        .Superfish-wrap li:hover > ul {
          opacity: 1;
          top: 37px;
          visibility: visible;
        }
        
        .Superfish-wrap li > ul a {
          font-weight: normal;
          line-height: 16px;
          padding: 9px 15px;
        }
        
        .Superfish-wrap li > ul li:last-child a {
          border-radius: 0 0 5px 5px;
        }
      </style>
    </head>
    <body>
    <div class="Superfish-wrap">
      <ul class="Superfish menu">
        <li class="selected current tab"><a href="http://www.sitepoint.com" >Home</a></li>
        <li class="tab"><a href="http://www.sitepoint.com/forums/">Forums</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content" >Web Content</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site" >Design Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site" >Program Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site" >Host Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site" >Manage Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center" >Community Center</a></li>
          </ul>
        </li>
        <li class="tab"><a style="cursor:default;">Resources</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/newsletter/#subscription-info" >Newsletters</a></li>
            <li><a href="http://www.sitepoint.com/category/podcast/" >Podcast</a></li>
            <li><a href="http://reference.sitepoint.com/css" >CSS Reference</a></li>
            <li><a href="http://reference.sitepoint.com/html" >HTML Reference</a></li>
            <li><a href="http://reference.sitepoint.com/javascript" >Javascript Reference</a></li>
            <li><a href="http://www.sitepoint.com/tools/" >Tools</a></li>
            <li><a href="http://www.sitepoint.com/tag/html5-dev-center/" >HTML5 Dev Center</a></li>
            <li><a href="http://www.sitepoint.com/web-hosting-reviews/" >Hosting Reviews</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
        <li class="tab"><a href="http://products.sitepoint.com/" >Bookstore</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/books-matrix/" >Find the right book</a></li>
            <li><a href="http://products.sitepoint.com/" >New Releases</a></li>
            <li><a href="http://products.sitepoint.com/development" >Web Development Books</a></li>
            <li><a href="http://products.sitepoint.com/design" >Web Design Books</a></li>
            <li><a href="http://products.sitepoint.com/business" >Business & Marketing Books</a></li>
            <li><a href="http://www.sitepoint.com/for-educators/" >Books for Educators</a></li>
            <li><a href="http://www.sitepoint.com/frequently-asked-questions/" >Frequently Asked Questions</a></li>
            <li><a href="http://sitepoint.com/shipping/" >Shipping Rates & Times</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://www.sitepointmarket.com" >Market</a></li>
        <li class="tab"><a href="https://learnable.com/sitepoint" >Courses</a></li>
        <li class="sitepoint-network-tab tab"><a href="http://www.sitepoint.com" >Sitepoint Network</a>
          <ul class="children">
            <li class="jspro"><a href="http://jspro.com/" >JSPro</a></li>
            <li class="buildmobile-link"><a href="http://buildmobile.com" >BuildMobile</a></li>
            <li class="designfestival-link"><a href="http://designfestival.com" >DesignFestival</a></li>
            <li class="rubysource-link"><a href="http://rubysource.com" >RubySource</a></li>
            <li class="cloudspring-link"><a href="http://cloudspring.com" >CloudSpring</a></li>
            <li class="phpmaster-link"><a href="http://phpmaster.com" >PHPMaster</a></li>
            <li class="learnable"><a href="http://learnable.com/" >Learnable</a></li>
            <li class="sitepointmarket-link"><a href="http://www.sitepointmarket.com" >SitePoint Market</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </body>
    </html>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Good work Chris

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,580
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Basic Level entry:

    Code:
    
    <!DOCTYPE html>
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?977638-CSS-Challenge-4-Drop-down-menus
    Thread: CSS Challenge #4 - Drop down menus
    2013.02.18 08:21
    Michael Morris
    -->
    <head>
      <style type="text/css">
    html {
        padding:0;
        margin:0;
    }
    body {
        background-color:#fff;
    }
    
    div {
        width:1080px;
        background-color:#fff;
        padding:0 0 0 40px;
        margin:0 auto;
    }
    
    ul {
        list-style-type:none;
        padding:0;
        margin:0;
    }
    .menu {
        border:1px solid #d5d5d5;
        background-color:#e8e8e8;
        overflow:hidden;
        border-radius:3px;
    }
    .tab {
        float:left;
    }
    .tab.sitepoint-network-tab {
        float:right;
    }
    .tab a:hover {
        cursor:pointer !important;
    }
    
    .children {
        position:absolute;
        left:-999px;
        opacity:0;
        border-left:1px solid #d5d5d5;
        border-right:1px solid #d5d5d5;
        border-bottom:1px solid #d5d5d5;
        box-shadow:0 0 3px 0px #ddd;
        border-radius:0 0 3px 3px;
    }
    .children li:last-child a {
        border-radius:0 0 2px 2px;
    }
    .tab:hover .children {
        left:auto;
        opacity:1;
        transition:opacity .25s linear;
    }
    
    a {
        display:block;
        color:#000;
        background-color:#e8e8e8;
        font-weight:bold;
        font-size:.75em;
        font-family:Arial;
        text-decoration:none;
        padding:10px 16px;
    }
    a:hover,a:active {color:#fff;background-color:#e56500;}
      </style>
    </head>
    <body>
    <div class="Superfish-wrap">
      <ul class="Superfish menu">
        <li class="selected current tab"><a href="http://www.sitepoint.com">Home</a></li>
        <li class="tab"><a href="http://www.sitepoint.com/forums/">Forums</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content">Web Content</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site">Design Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site">Program Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site">Host Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site">Manage Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center">Community Center</a></li>
          </ul>
        </li>
        <li class="tab"><a style="cursor:default;">Resources</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/newsletter/#subscription-info">Newsletters</a></li>
            <li><a href="http://www.sitepoint.com/category/podcast/">Podcast</a></li>
            <li><a href="http://reference.sitepoint.com/css">CSS Reference</a></li>
            <li><a href="http://reference.sitepoint.com/html">HTML Reference</a></li>
            <li><a href="http://reference.sitepoint.com/javascript">Javascript Reference</a></li>
            <li><a href="http://www.sitepoint.com/tools/">Tools</a></li>
            <li><a href="http://www.sitepoint.com/tag/html5-dev-center/">HTML5 Dev Center</a></li>
            <li><a href="http://www.sitepoint.com/web-hosting-reviews/">Hosting Reviews</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
        <li class="tab"><a href="http://products.sitepoint.com/">Bookstore</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/books-matrix/">Find the right book</a></li>
            <li><a href="http://products.sitepoint.com/">New Releases</a></li>
            <li><a href="http://products.sitepoint.com/development">Web Development Books</a></li>
            <li><a href="http://products.sitepoint.com/design">Web Design Books</a></li>
            <li><a href="http://products.sitepoint.com/business">Business & Marketing Books</a></li>
            <li><a href="http://www.sitepoint.com/for-educators/">Books for Educators</a></li>
            <li><a href="http://www.sitepoint.com/frequently-asked-questions/">Frequently Asked Questions</a></li>
            <li><a href="http://sitepoint.com/shipping/">Shipping Rates & Times</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://www.sitepointmarket.com">Market</a></li>
        <li class="tab"><a href="https://learnable.com/sitepoint">Courses</a></li>
        <li class="sitepoint-network-tab tab"><a href="http://www.sitepoint.com">Sitepoint Network</a>
          <ul class="children">
            <li class="jspro"><a href="http://jspro.com/">JSPro</a></li>
            <li class="buildmobile-link"><a href="http://buildmobile.com">BuildMobile</a></li>
            <li class="designfestival-link"><a href="http://designfestival.com">DesignFestival</a></li>
            <li class="rubysource-link"><a href="http://rubysource.com">RubySource</a></li>
            <li class="cloudspring-link"><a href="http://cloudspring.com">CloudSpring</a></li>
            <li class="phpmaster-link"><a href="http://phpmaster.com">PHPMaster</a></li>
            <li class="learnable"><a href="http://learnable.com/">Learnable</a></li>
            <li class="sitepointmarket-link"><a href="http://www.sitepointmarket.com">SitePoint Market</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </body>
    </html>
    

  9. #9
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Indiana, United States
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is my basic-level entry. I don't have the colors, fonts, and icons matched, but hey...at least I did it. Right?!

    Let the ridicule begin.... :P

    Code:
    
        body {
          color: #333;
          font-size: 100%;
          font-family: sans-serif;
        }
    
        ul {
          background-color: #ccc;
          list-style: none;
          margin: 0;
          padding: 0;
        }
    
        div > ul {
          border: 1px solid #aaa;
          border-radius: 5px;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          float: left;
          width: 100%;
        }
    
        ul li {
          float: left;
        }
    
        ul li a {
          color: #333;
          display: block;
          font-size: 1em;
          padding: .5em 1em;
          text-decoration: none;
          text-shadow: 1px 1px 0px #eee;
        }
    
        ul li a:hover {
          background-color: #ff8c00;
          color: #fff;
          text-shadow: none;
        }
    
        li ul {
          display: none;
        }
    
        ul li:hover {
          position: relative;
        }
    
        li:hover ul {
          background-color: #ccc;
          border-right: 1px solid #aaa;
          border-bottom: 1px solid #aaa;
          border-left: 1px solid #aaa;
          border-radius: 0 0 5px 5px;
          -webkit-border-radius: 0 0 5px 5px;
          -moz-border-radius: 0 0 5px 5px;
          display: block;
          position: absolute;
          top: 2.1em;
        }
    
        li ul li {
          width: 18em;
        }
    
        div > ul li:last-child {
          float: right;
        }
    
        div > ul li:last-child:hover ul {
          right: -1px;
        }
    

  10. #10
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Took the "expert" route...though, I'm pretty far from being an expert.

    Code:
    
    
    <!DOCTYPE html>
    <head>
      <meta name="viewport" content="width=device-width" />
      <style type="text/css">
        .Superfish-wrap {
          font-family: Calibri, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
          font-size: 1em;
          line-height: 1.2em;
        }
        .Superfish-wrap ul.Superfish a {
          color: #464646;
          text-decoration: none;
          text-shadow: 1px 1px 1px rgba(150, 150, 150, .5);
          cursor: pointer;
        }
        .Superfish-wrap ul,
        .Superfish-wrap ul li {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        .Superfish-wrap ul.Superfish {
          background: #e8e8e8;
          border: 1px solid #d5d5d5;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
        }
        .Superfish-wrap ul.Superfish li.tab {
          display: inline;
          position: relative;
        }
        .Superfish-wrap ul.Superfish li.tab > a {
          display: inline-block;
          padding: 12px 15px;
        }
        .Superfish-wrap ul.Superfish li.tab:hover > a,
        .Superfish-wrap ul.Superfish li.tab a:hover {
          background-color: #e36400;
          color: #fff;
        }
        .Superfish-wrap ul.Superfish li.tab ul {
          display: block;
          max-height: 0;
          overflow: hidden;
          position: absolute;
          top: 1.9em;
          left: 0;
          background: #e8e8e8;
          border: 1px solid #d5d5d5;
          border-top: 0;
          -webkit-border-bottom-right-radius: 5px;
          -webkit-border-bottom-left-radius: 5px;
          -moz-border-radius-bottomright: 5px;
          -moz-border-radius-bottomleft: 5px;
          border-bottom-right-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        .Superfish-wrap ul.Superfish li.tab:hover ul {
          max-height: 1000px;
          -moz-transition: max-height 1s ease;
          -webkit-transition: max-height 1s ease;
          -o-transition: max-height 1s ease;
          transition: max-height 1s ease;
        }
        .Superfish-wrap ul.Superfish li.tab ul li {
          display: inline;
        }
        .Superfish-wrap ul.Superfish li.tab ul li a {
          display: block;
          width: 250px;
          padding: 5px 15px;
        }
        @media (min-width: 320px) {}
        @media (max-width: 600px) {
          .Superfish-wrap ul.Superfish li.tab {
            display: block;
            border-bottom: 1px solid #999999;
          }
          .Superfish-wrap ul.Superfish li.tab:last-child {
            border: 0;
          }
          .Superfish-wrap ul.Superfish li.tab > a {
            display: block;
            padding: 12px 15px;
          }
          .Superfish-wrap ul.Superfish li.tab ul {
            position: relative;
            top: 0;
            left: 0;
            background: #cccccc;
            border: 0;
            -webkit-border-bottom-right-radius: 0;
            -webkit-border-bottom-left-radius: 0;
            -moz-border-radius-bottomright: 0;
            -moz-border-radius-bottomleft: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
          }
          .Superfish-wrap ul.Superfish li.tab ul li {
            display: block;
            border-bottom: 1px solid #999999;
          }
          .Superfish-wrap ul.Superfish li.tab ul li a {
            width: auto;
            padding: 5px 15px 5px 30px;
          }
        }
      </style>
    </head>
    <body>
    <div class="Superfish-wrap">
      <ul class="Superfish menu">
        <li class="selected current tab"><a href="http://www.sitepoint.com" >Home</a></li>
        <li class="tab"><a href="http://www.sitepoint.com/forums/">Forums</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content" >Web Content</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site" >Design Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site" >Program Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site" >Host Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site" >Manage Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center" >Community Center</a></li>
          </ul>
        </li>
        <li class="tab"><a style="cursor:default;">Resources</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/newsletter/#subscription-info" >Newsletters</a></li>
            <li><a href="http://www.sitepoint.com/category/podcast/" >Podcast</a></li>
            <li><a href="http://reference.sitepoint.com/css" >CSS Reference</a></li>
            <li><a href="http://reference.sitepoint.com/html" >HTML Reference</a></li>
            <li><a href="http://reference.sitepoint.com/javascript" >Javascript Reference</a></li>
            <li><a href="http://www.sitepoint.com/tools/" >Tools</a></li>
            <li><a href="http://www.sitepoint.com/tag/html5-dev-center/" >HTML5 Dev Center</a></li>
            <li><a href="http://www.sitepoint.com/web-hosting-reviews/" >Hosting Reviews</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
        <li class="tab"><a href="http://products.sitepoint.com/" >Bookstore</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/books-matrix/" >Find the right book</a></li>
            <li><a href="http://products.sitepoint.com/" >New Releases</a></li>
            <li><a href="http://products.sitepoint.com/development" >Web Development Books</a></li>
            <li><a href="http://products.sitepoint.com/design" >Web Design Books</a></li>
            <li><a href="http://products.sitepoint.com/business" >Business & Marketing Books</a></li>
            <li><a href="http://www.sitepoint.com/for-educators/" >Books for Educators</a></li>
            <li><a href="http://www.sitepoint.com/frequently-asked-questions/" >Frequently Asked Questions</a></li>
            <li><a href="http://sitepoint.com/shipping/" >Shipping Rates & Times</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://www.sitepointmarket.com" >Market</a></li>
        <li class="tab"><a href="https://learnable.com/sitepoint" >Courses</a></li>
        <li class="sitepoint-network-tab tab"><a href="http://www.sitepoint.com" >Sitepoint Network</a>
          <ul class="children">
            <li class="jspro"><a href="http://jspro.com/" >JSPro</a></li>
            <li class="buildmobile-link"><a href="http://buildmobile.com" >BuildMobile</a></li>
            <li class="designfestival-link"><a href="http://designfestival.com" >DesignFestival</a></li>
            <li class="rubysource-link"><a href="http://rubysource.com" >RubySource</a></li>
            <li class="cloudspring-link"><a href="http://cloudspring.com" >CloudSpring</a></li>
            <li class="phpmaster-link"><a href="http://phpmaster.com" >PHPMaster</a></li>
            <li class="learnable"><a href="http://learnable.com/" >Learnable</a></li>
            <li class="sitepointmarket-link"><a href="http://www.sitepointmarket.com" >SitePoint Market</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </body>
    </html>
    
    
    

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mark2685 View Post
    Took the "expert" route...though, I'm pretty far from being an expert.
    Good effort

    There is a problem with the accordion affect in your code on touch devices in that the top link will always be followed and so the sub menu is superfluous as you can never use it. It can't be fixed without changing the html though.

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the Beginner Challenge:

    Code:
    
    <!DOCTYPE html>
    <head>
      <style type="text/css">
        body	{	margin:0 0 0 0; padding:0; color:#464646; 
        		    font-family: Helvetica,sans-serif,Arial; 
        		    font-size:62.5%; line-height: 1.4em;}
        ul, li {margin:0 0 0 0;padding:0}    	
        
        .Superfish-wrap {margin:0 auto 0 auto;  min-width:800px; width:80%; margin-top:30px; font-size:1.3em;}
        .Superfish{list-style:none; border:solid #D5D5D5 1px; height:35px; background-color:#E8E8E8;}	 /* overflow:hidden */   
        .Superfish li{list-style-type:none;float:left; position:relative; }	    
        .menu li a{ color:#464646; font-weight:bold; text-decoration:none; display:block; height:15px; padding:10px 15px 10px 15px;}
        .Superfish li ul{ position: absolute;	margin-left: -999em; 	top: auto;	left:-1px;}	    
        .Superfish li a:hover {background-color:#E56500; color:#FFFFFF;}
        .Superfish  li:hover ul,.Superfish li.over ul {margin-left:0; }
        
        .Superfish .children{width:175px;background-color:#E8E8E8;border:solid #D5D5D5 1px; }
        .Superfish .children li {width:100%;}
        .Superfish .children li a{font-weight:normal; display:block; padding:10px 15px 10px 15px; height:auto;}
      </style>
    </head>
    <body>
    <div class="Superfish-wrap">
      <ul class="Superfish menu">
        <li class="selected current tab"><a href="http://www.sitepoint.com" >Home</a></li>
        <li class="tab"><a href="http://www.sitepoint.com/forums/">Forums</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content" >Web Content</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site" >Design Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site" >Program Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site" >Host Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site" >Manage Your Site</a></li>
            <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center" >Community Center</a></li>
          </ul>
        </li>
        <li class="tab"><a style="cursor:default;">Resources</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/newsletter/#subscription-info" >Newsletters</a></li>
            <li><a href="http://www.sitepoint.com/category/podcast/" >Podcast</a></li>
            <li><a href="http://reference.sitepoint.com/css" >CSS Reference</a></li>
            <li><a href="http://reference.sitepoint.com/html" >HTML Reference</a></li>
            <li><a href="http://reference.sitepoint.com/javascript" >Javascript Reference</a></li>
            <li><a href="http://www.sitepoint.com/tools/" >Tools</a></li>
            <li><a href="http://www.sitepoint.com/tag/html5-dev-center/" >HTML5 Dev Center</a></li>
            <li><a href="http://www.sitepoint.com/web-hosting-reviews/" >Hosting Reviews</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
        <li class="tab"><a href="http://products.sitepoint.com/" >Bookstore</a>
          <ul class="children">
            <li><a href="http://www.sitepoint.com/books-matrix/" >Find the right book</a></li>
            <li><a href="http://products.sitepoint.com/" >New Releases</a></li>
            <li><a href="http://products.sitepoint.com/development" >Web Development Books</a></li>
            <li><a href="http://products.sitepoint.com/design" >Web Design Books</a></li>
            <li><a href="http://products.sitepoint.com/business" >Business & Marketing Books</a></li>
            <li><a href="http://www.sitepoint.com/for-educators/" >Books for Educators</a></li>
            <li><a href="http://www.sitepoint.com/frequently-asked-questions/" >Frequently Asked Questions</a></li>
            <li><a href="http://sitepoint.com/shipping/" >Shipping Rates & Times</a></li>
          </ul>
        </li>
        <li class="tab"><a href="http://www.sitepointmarket.com" >Market</a></li>
        <li class="tab"><a href="https://learnable.com/sitepoint" >Courses</a></li>
        <li class="sitepoint-network-tab tab"><a href="http://www.sitepoint.com" >Sitepoint Network</a>
          <ul class="children">
            <li class="jspro"><a href="http://jspro.com/" >JSPro</a></li>
            <li class="buildmobile-link"><a href="http://buildmobile.com" >BuildMobile</a></li>
            <li class="designfestival-link"><a href="http://designfestival.com" >DesignFestival</a></li>
            <li class="rubysource-link"><a href="http://rubysource.com" >RubySource</a></li>
            <li class="cloudspring-link"><a href="http://cloudspring.com" >CloudSpring</a></li>
            <li class="phpmaster-link"><a href="http://phpmaster.com" >PHPMaster</a></li>
            <li class="learnable"><a href="http://learnable.com/" >Learnable</a></li>
            <li class="sitepointmarket-link"><a href="http://www.sitepointmarket.com" >SitePoint Market</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </body>
    </html>
    


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •