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.

 

Xidipity offers two menu design choices. The first is the standard drop down menu bar on large devices which morph’s into a hamburger menu on mobile. In this scenario menus are created by navigating to Appearance, Menus in the admin console.

 

The second choice is the creation of a Table Of Contents page which is represented by the hamburger icon ( ​ ) on all devices. Xidipity.com uses this solution.

 

Xidipity.com uses a Table Of Contents page as a static front page. To accomplish this see the admin menu Settings > Reading

 

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 a shortcode and Xidipity has two. The format is similar to videos in that they are presented as a block quote documenting the settings in the editor and displayed as a list on the web. 

 


list posts


 

The list posts template is a wrapper to the lst_posts shortcode

 

Editor View

messageList Posts

Shortcode Options

  • class = ” “
  • before_item = ” “
  • after_item = ” “
  • orderby = ” “
  • order = ” “
  • cat = ” “
  • xclude = 0

 

Web View

 

Template

½×

GitHub Gist

shortcode02.html

 

Options

class

This option accepts classes to be applied to the list. To output a double spaced list use  “dbl-spaced“, quarter spaced “qtr-spaced“. Leave empty for the defaults.

 

Xidipity.com sets this argument to “fa-ul” and “dbl-spaced“. The “fa-ul” arguments says we will be using font awesome icons instead of bullets.

 

before_item

This is where you would add an icon or wrap the list item in a unique style. The following is used by Xidipity.com.

before_item='<i class="far fa-folder-open" padding-right: 10px; color: #9e9e9e;">&#x200B;</i>'
after_item

This is the other half of the css_before option. In the case of an icon, nothing more is needed. In the event a “<span>” tag was used in the above, a closing “</span>” tag would be required here.

orderby
This is where we tell the database query how we want the data organized.Typical inputs would be “title“, “date” or “author“.
order
Choices for this option are ascending (“ASC”) or descending (“DESC”).
cat
This option limits the response to a single category or multiple categories separated by a comma (ex. cat1,cat2,etc).
xclude
A single posts may be excluded by entering in it’s post id or multi posts separated by a comma (ex. 123,432,etc).

 


list pages


 

The list pages template is a wrapper to the lst_pages shortcode

 

Editor View

messageList Pages

Shortcode Options

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

 

Web View

 

Template

½×

GitHub Gist

shortcode01.html

 

Options

class

This is the same as lst_posts.

before_item

This is the same as lst_posts.

after_item

This is the same as lst_posts.

depth
Page listings are presented in a hierarchical fashion. Depth determines how many levels are displayed. The default of “0” displays all levels.
pid
This option identifies where to begin the hierarchy.
xclude
A single page may be excluded by entering in it’s page id or multi pages separated by a comma (ex. 123,432,etc).

 

 

Leave a Reply

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