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

½×

 Design Blog Posts

Blog List

Shortcode Options

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

 

Web View

½×

 Design Blog Posts

Blog List

Shortcode Options

  • class = “fa-ul qtr-spaced”
  • before_item = ‘<i class=”far fa-folder-open” style=”color:#eeeeee;”>&#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 = “qtr-spaced”
  • before_item = ” “
  • after_item = ” “
  • depth = 0
  • pid = 1268
  • xclude = ” “

 

Web View

½×

 Common Terms

Page List

Shortcode Options

  • class = “qtr-spaced”
  • before_item = ” “
  • 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-file-alt” style=”color: #e0e0e0;”>&#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-file-alt” style=”color: #e0e0e0;”>&#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-file-alt” style=”color: #e0e0e0;”>&#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-file-alt” style=”color: #e0e0e0;”>&#x200B;</i>”
  • after_item = ” “
  • orderby = ” “
  • order = ” “
  • cat = “archive”
  • xclude = ” “

 

Google Adsense

devices_otherResponsive

 

authoring tools

½×

Page List

Shortcode Options

  • class = ” “
  • before_item = ” “
  • after_item = ” “
  • depth = 0
  • pid = 1237
  • xclude = ” “

demonstrations

½×

Page List

Shortcode Options

  • class = ” “
  • before_item = ” “
  • after_item = ” “
  • depth = 0
  • pid = 1323
  • xclude = ” “

 

gallery tutorials

½×

Page List

Shortcode Options

  • class = ” “
  • before_item = ” “
  • after_item = ” “
  • depth = 0
  • pid = 1280
  • xclude = ” “

video tutorials

½×

Page List

Shortcode Options

  • class = ” “
  • before_item = ” “
  • after_item = ” “
  • depth = 0
  • pid = 2628
  • xclude = ” “

 

 

odds & ends

½×

Page List

Shortcode Options

  • class = ” “
  • before_item = ” “
  • after_item = ” “
  • depth = 0
  • pid = 1295
  • xclude = ” “

common terms

½×

Page List

Shortcode Options

  • class = ” “
  • before_item = ” “
  • after_item = ” “
  • depth = 0
  • pid = 1268
  • xclude = ” “

 

 

Leave a Reply

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