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.

Amazing Hamburger Menu Blog Site User Dynamics Image #010

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 with Xidipity 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 Xidipity 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.

 

class

This is the name of a 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 is how the blog posts will be sorted. Although the default value is “date” other choices are available as follows.

  • none – No order
  • ID – Order by post id. (Note the capitalization)
  • author – Order by author
  • title – Order by post title
  • name – Order by post name (ie. post slug)
  • modified – Order by last modified date
  • rand – Random order

 

order
  • ASC – ascending order from lowest to highest values (1, 2, 3; a, b, c)
  • DESC – descending order from highest to lowest values (3, 2, 1; c, b, a)

 

cat

The category names to include. Multiple names can be entered separated by commas. Blank for all.

 

xclude

Blog post IDs to exclude. The easiest method to discover a category id is to select the posts tool from the admin menu and then highlight the post in question. The number will be displayed at the bottom of the screen as “tag_ID=”. Multiple IDs can be entered separated by commas. Blank for none.

 

Editor View

 

Studio Blog Posts

 


Blog List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘<i class=”far fa-folder-open” style=”color:#bdbdbd;”>&#x200B;</i>&nbsp;’
  • after_item = ‘ ‘
  • orderby = ‘title’
  • order = ‘asc’
  • cat = ‘studio’
  • xclude = ‘ ‘


 

Web View

 

Studio Blog Posts

 


Blog List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘<i class=”far fa-folder-open” style=”color:#bdbdbd;”>&#x200B;</i>&nbsp;’
  • after_item = ‘ ‘
  • orderby = ‘title’
  • order = ‘asc’
  • cat = ‘studio’
  • xclude = ‘ ‘


 

 

page list

 

Template

 


GitHub Gist

xtras / page / list


 

The page list template displays an unordered list of page titles based on the following 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

 

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>“.

 

depth

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

 

pid

Page ID (pid) is the ID of the hierarchical root. The easiest method to discover a page id is to select the page tool from the admin menu and then highlight the page in question. The number will be displayed at the bottom of the screen as “post=“.

 

xclude

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

 

Editor View

 

Common Terms

 


Page List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”fas fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • depth = 0
  • pid = 1268
  • xclude = ‘ ‘


 

Web View

 

Common Terms

 


Page List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”fas fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • depth = 0
  • pid = 1268
  • xclude = ‘ ‘


 

 

demonstration

 

 

table of contents


 

 

featured

 

Xidipity.com Amazing Hamburger Menu Start Here Image

 

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.com Amazing Hamburger Menu Studio Image

 


Blog List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”far fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • orderby = ‘ ‘
  • order = ‘ ‘
  • cat = ‘studio’
  • xclude = ‘ ‘


 

 

workshop

 

Xidipity.com Amazing Hamburger Menu education Image

 


Blog List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”far fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • orderby = ‘ ‘
  • order = ‘ ‘
  • cat = ‘workshop’
  • xclude = ‘ ‘


 

 

 

composition

 

Xidipity.com Amazing Hamburger Menu Composition Image

 


Blog List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”far fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • orderby = ‘ ‘
  • order = ‘ ‘
  • cat = ‘composition’
  • xclude = ‘ ‘


 

 

archive

 

Xidipity.com Amazing Hamburger Menu Document Management Image

 


Blog List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”far fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • orderby = ‘ ‘
  • order = ‘ ‘
  • cat = ‘archive’
  • xclude = ‘ ‘


 

 

Google Adsense

devices_otherResponsive

 

 

authoring tools

 


Page List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”fas fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • depth = 0
  • pid = 1237
  • xclude = ‘ ‘


 

 

demonstrations

 


Page List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”fas fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • depth = 0
  • pid = 1323
  • xclude = ‘ ‘


 

 

 

gallery tutorials

 


Page List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”fas fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • depth = 0
  • pid = 1280
  • xclude = ‘ ‘


 

 

video tutorials

 


Page List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”fas fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • depth = 0
  • pid = 2628
  • xclude = ‘ ‘


 

 

 

odds & ends

 


Page List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”fas fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • depth = 0
  • pid = 1295
  • xclude = ‘ ‘


 

 

common terms

 


Page List

Shortcode Options

  • class = ‘fa-ul qtr-spaced’
  • before_item = ‘ <i class=”fas fa-folder-open” style=”color: #bdbdbd;”>&#x200B;</i>’
  • after_item = ‘ ‘
  • depth = 0
  • pid = 1268
  • xclude = ‘ ‘


 

 

 

Leave a Reply

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