Build Your Own Business Website header image

Lesson 10 – Create a Responsive Dropdown Menu

Listed Under Lesson Subjects -

Applies to -

Introduction to Responsive Menus

  • Types of menus
    • Top Nav
    • Stacking Boxes
    • Select Menu
    • Vertical Accordian – with button
  • The problem with the standard Thesis menu
  • Criteria for a responsive menu
    • Intuitive
    • Easy for fingers
    • Not dependent on “hover”
    • Contributes to the design
    • Lightweight

A Tour of the Menu We Will Create

Create an HTML Box for the Menu

  • Copy an existing box
  • Options
    • Get a list of menus
    • Create an array of menu id/menu name pairs
    • Get the standard Thesis options
    • Unset the id
  • Write the HTML
    • Get the args
    • Sanitize the options
    • Create a menu label
    • Bail if no menu
    • Create the toggle
    • Create the wrapping HTML
    • Add the menu
  • Add the box to the box list

Add the jQuery Plugin to the Skin

  • Preparing the jQuery
    • WordPress and Compatibility Mode
    • Replace shortcut
  • Add to the file structure
  • Enqueue Script
    • wp_enqueue_script()
    • Syntax
    • Create the method
    • Enqueue the script
    • Add jQuery
  • Hook to wp_enqueue_scripts()

Add the Sample CSS & Test

  • Copy the CSS
  • Place in Temporarily in Custom CSS
  • Test & troubleshoot

Create the Responsive Menu Package

  • Copy the Horizontal Dropdown Menu Package & Rename
  • Choose the Parts to Discard
    • Options
      • Parent links
      • Borders
    • CSS
      • Parent links
      • Borders
  • Public selector
  • Translate
  • Add New Options
    • Menu toggle
      • fields
    • Overall margin
    • Menu item height
    • Submenu color
    • Border color
  • Set Defaults for Existing Options
    • Padding
    • Link Colors
      • Remove the condition
      • Color – #ddd
      • Background color – #333

Sanitize the New Package Options

  • Menu Item Height – auto
  • Toggle menu bg color – #666
  • Toggle menu font color – #fff
  • Margin
    • $thesis->api->css->trbl
    • Copy from padding
  • Border color – #000
  • Set a Link Background Color Variable – #333
    • Get the link bg color
    • Set the default
    • Add to variable
  • Submenu Background Color – link background color variable

Write the Write the Full Size CSS

  • Setup selector constants
    • Add .nav to $s
    • Add new variable with the selector value
  • Comments
    • Opening
    • Closing
  • Incorporate tutorial CSS with Thesis CSS
    • Paste tutorial CSS below Thesis CSS
    • Modify Thesis CSS to match

Write the Mobile CSS

  • Setup the Media Query
  • Paste the tutorial code
  • Modify the tutorial CSS
  • Change the drop down image
  • Tweak

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment