Amazing Hamburger Menu

The hamburger menu – a love / hate relationship. While this icon has exploded in popularity, there’s still significant debate as to whether it is the right choice for navigating websites. The amazing Xidipity hamburger menu is a powerful solution designed to satisfy the most discriminating palate.

Xidipity post titled "Amazing Hamburger Menu" header image

½×

Easy website navigation is a key component to your website design and in many ways provides the bases of a great user experience. It is important to remember visitors can enter your site from any page and if they want more, a good menu can make content easy to find.

 

With the adoption of a mobile first strategy, web designers have discovered the traditional hierarchical drop down menu does not work with small screens. This has lead to the creation of the hamburger menu which is represented by a single icon of three bars ( ).

 

To create a hamburger menu requires the creation of a Table Of Contents page which is represented by the hamburger icon ( ) on all devices. The table of contents page is a very strong design element as it can contain text, lists, images, and video.

 

Design Notes

The table of contents begins life as a blank page and there are no restrictions on content. The only requirement is the page permalink is “table-of-contents“. The page title can be whatever achieves your design goals. For your awareness icons may also be embedded in the title and the title can be hidden by embedding the following snippet at the top of the document.

 

<p class="mce:hidden"><style>.entry-title {display: none;}</style></p> 

 

The details about the posts and pages of your blog are held in a database. To retrieve this information requires the use of the blog list and page list template.

 

blog list

 

Template

 


GitHub Gist

xtras / blog / list


 

The blog list template displays an unordered list of blog titles based on the following arguments.

 

Arguments

class

This is the name of an unordered list css class(s). The most common options are as follows.

  • std-spaced = no additional spacing
  • qtr-spaced = quarted spaced list (default)
  • dbl-spaced = double spaced list
  • fa-ul = replace bullets with a font awesome icon

 

before_item

This is the styling options. The most common is a font-awesome tag but this could also be a “<span>” tag containing specific styling options.

 

after_item

In the circumstance where a tag was included in the before_item, the appropriate closing tag should be included here. For example “</span>“.

 

orderby

The column used to sort database results.

 

See dictionary for additional information.

 

order

Designates the order of the ‘orderby’ argument.

 

See dictionary for additional information.

 

filter
  1. Search includes the specified categories. (default)
  2. Search excludes the specified categories.

 

Parameter

category

The category to included as a search parameter and used as directed by the filter argument.

 

Editor View

 

Studio Blog Posts

 


Blog List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • orderby = ‘title’
  • order = ‘ASC’
  • filter = 0

Category(s)

  • studio

 

Web View

 

Studio Blog Posts

 


Blog List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • orderby = ‘title’
  • order = ‘ASC’
  • filter = 0

Category(s)

  • studio

 

page list

 

Template

 


GitHub Gist

xtras / page / list


 

The page list template displays an unordered list of page titles based on the following arguments.

 

Arguments

class

This is the name of a css class(s). The most common options are as follows.

  • qtr-spaced = quarted spaced list
  • dbl-spaced = double spaced list
  • fa-ul = replace bullets with a font awesome icon

 

style_before

This is the styling options. The most common is a font-awesome tag but this could also be a “<span>” tag containing specific styling options.

 

style_after

In the circumstance where a tag was included in the before_item, the appropriate closing tag should be included here. For example “</span>“.

 

depth

Page listings are presented in a hierarchical fashion. Depth determines how many levels are displayed. The default of “0” displays all levels.

 

xclude

Blog page IDs to exclude. Multiple IDs can be entered separated by commas. Blank for none.

 

Parameter

Parent Page

The optional parent page of where to begin the search. If no page is given all pages are displayed.

 

Editor View

 

Common Terms

 


Page List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • depth = 0
  • xclude = ‘ ‘

Parent Page

  • dictionary

 

Web View

 

Common Terms

 


Page List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • depth = 0
  • xclude = ‘ ‘

Parent Page

  • dictionary

 

 

demonstration

 

 

table of contents


 

 

featured

 

Xidipity Blog Post titled "Amazing Hamburger Menu" Image 020

 

Start The Adventure Here

The goal of the Xidipity WordPress theme is to blend a tasteful design with an appropriate balance of flexibility and ease of use. Xidipity uses advanced web technologies to ensure the user experience is snappy.

 

 

 

 

 

 

 

studio

 

Xidipity Blog Post titled "Amazing Hamburger Menu" Image 020


Blog List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • orderby = ‘title’
  • order = ‘ASC’
  • filter = 0

Category(s)

  • studio

 

 

workshop

 

Xidipity Blog Post titled "Amazing Hamburger Menu" Image 040


Blog List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • orderby = ‘title’
  • order = ‘ASC’
  • filter = 0

Category(s)

  • workshop

 

 

 

composition

 

Xidipity Blog Post titled "Amazing Hamburger Menu" Image 050


Blog List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • orderby = ‘title’
  • order = ‘ASC’
  • filter = 0

Category(s)

  • composition

 

 

archive

 

Xidipity Blog Post titled "Amazing Hamburger Menu" Image 060


Blog List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • orderby = ‘title’
  • order = ‘ASC’
  • filter = 0

Category(s)

  • archive

 

 

Google Adsense

devices_otherResponsive

 

 

authoring tools

 


Page List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • depth = 2
  • xclude = ‘ ‘

Parent Page

  • authoring tools

 

 

demonstrations

 


Page List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • depth = 0
  • xclude = ‘ ‘

Parent Page

  • use cases

 

 

 

gallery tutorials

 


Page List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • depth = 0
  • xclude = ‘ ‘

Parent Page

  • gallery tutorials

 

 

video tutorials

 


Page List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • depth = 0
  • xclude = ‘ ‘

Parent Page

  • video tutorials

 

 

 

odds & ends

 


Page List

Template Options

  • class = ‘fa-ul qtr-spaced’
  • style_before = ‘
  • style_after = ‘ ‘
  • depth = 0
  • xclude = ‘ ‘

Parent Page

  • odds and ends

 

 

common terms

 

 

 

 

 

avatar
About: Admin

My name is John Baer and I am the author of the Xidipity theme. My goal with Xidipity is to create a theme which is flexible and easy to use. This is accomplished by the application of templates and enhancing the classic editor. Xidipity leverages the latest web technologies to remain snappy.

 

 

Got Something To Say?

Your email address will not be published. Required fields are marked *