<\/code><\/p>\nfunction sidr_footer() {<\/p>\n
\/\/ output the static html for the side menus<\/p>\n
echo ‘ <div id=”sidr-left”>
\n<ul>
\n<li><a href=”#”>Link 1<\/a><\/li>
\n<li><a href=”#”>Link 2<\/a><\/li>
\n<li><a href=”#”>Link 3<\/a><\/li>
\n<li><a href=”#”>Link 4<\/a><\/li>
\n<\/ul>
\n<\/div>
\n<div id=”sidr-right”>
\n<ul>
\n<li><a href=”#”>Link 1<\/a><\/li>
\n<li><a href=”#”>Link 2<\/a><\/li>
\n<li><a href=”#”>Link 3<\/a><\/li>
\n<li><a href=”#”>Link 4<\/a><\/li>
\n<\/ul>
\n<\/div>’;<\/p>\n
}<\/p>\n
add_action( ‘wp_footer’ , ‘sidr_footer’ );<\/p>\n
<\/p>\n
This simply inserts the HTML for two very basic side menus just before the <body><\/em> tag.<\/p>\n\nStep 3 – Add Side Menu Toggle Links<\/h3>\n
These links are purely for demonstration purposes. For a real theme, you’ll want to integrate them properly into your theme but here we just need to get them onto the page.<\/p>\n
Go back to functions.php<\/em> and add the following below the HTML code in the sidr_footer<\/em> function that you added in Step 2:<\/p>\n<\/code><\/p>\n\/* output the two links *\/<\/p>\n
<a href=”#sidr-left” class=”sidr-left-link”>LEFT<\/a>
\n<a href=”#sidr-right” class=”sidr-right-link”>RIGHT<\/a><\/p>\n
<\/p>\n
Notice that the href<\/em> attributes on the link match the class<\/em>es for the side menu DIVs.<\/p>\nOriginally, this script used ids but using classes enables other elements to control the appearance of the menus – having a close button in the menu itself, for example.<\/p>\n
Although we are not aiming for any artistic prizes, we still want to style these links so that we can at least see them properly.<\/p>\n
Open up style.css<\/em> and add the following to the bottom:<\/p>\n<\/code><\/p>\n\/* sidr links style *\/<\/p>\n
.sidr-left-link {
\ndisplay: block;
\nbackground: #ffffff;
\nposition: absolute;
\ntop: 30px;
\nleft: 20px;
\npadding: 10px;
\nborder: 2px solid #000000;
\ncolor: #000000;
\nfont-weight: bold;
\n}<\/p>\n
.sidr-right-link {
\ndisplay: block;
\nbackground: #ffffff;
\nposition: absolute;
\ntop: 30px;
\nright: 20px;
\npadding: 10px;
\nborder: 2px solid #000000;
\ncolor: #000000;
\nfont-weight: bold;
\n}<\/p>\n
<\/p>\n
Step 4 – Hook Up the Sidr Functionality<\/h3>\n
Our last step is to hook up the links so that clicking on them toggles the display of the side menus.<\/p>\n
Again, go back to the functions.php<\/em> and add this code underneath the HTML for the two links that you created in Step 3:<\/p>\n<\/code><\/p>\n\/* hook up the Sidr functionality *\/<\/p>\n
<script language=”javascript”><\/p>\n
jQuery(document).ready(function($){
\n\/\/ hook up the left side menu<\/p>\n
$(“.sidr-left-link”).sidr({
\nname: “sidr-left”,
\nside: “left”
\n});<\/p>\n
\/\/ hook up the right side menu
\n$(“.sidr-right-link”).sidr({
\nname: “sidr-right”,
\nside: “right”
\n});<\/p>\n
});<\/p>\n
<\/script><\/p>\n
<\/p>\n
Here you can see that sidr<\/em> function is being attached to each link. We tell the sidr<\/em> function what the id<\/em> of the DIV is (sidr-left<\/em> and sidr-right<\/em>) and which direction it is sliding from.<\/p>\nThat’s all there is. Open your site in a browser and you should see two large white boxes in the header with LEFT and RIGHT. Click on them to toggle the display of the side menus.<\/p>\n\n
Actually Making Them Useful<\/h2>\n
This demo is pretty bland but it’s not hard to see how useful side menus could be especially for tablets and small devices.<\/p>\n
Adding Dynamic Menus<\/h3>\n
To properly use them for menus, you want to output the menu dynamically by using a call to wp_nav_menu<\/em> referencing a menu that you can manage in the admin section.<\/p>\nReplace the sidr-left<\/em> code you added in Step 2 with this code to output the primary<\/em> menu from Twenty Thirteen<\/p>\n<\/code><\/p>\necho ‘ <div id=”sidr-left”> ‘;
\nwp_nav_menu( array( ‘theme_location’ => ‘primary’ ) );
\necho ‘ <\/div> ‘;<\/p>\n
<\/p>\n
If you want to display an entirely new menu then you need to register it first. Add this code to the functions.php<\/em><\/p>\n<\/code><\/p>\nfunction sidr_new_menu() {<\/p>\n
\/\/ This theme uses wp_nav_menu() in one location.
\nregister_nav_menu( ‘side-menu-left’, __( ‘Sidebar Left Menu’, ‘twentythirteen’ ) );<\/p>\n
}<\/p>\n
add_action ( ‘after_theme_setup’ , ‘sidr_new_menu’);<\/p>\n
<\/p>\n
This will create a new menu location in the Appearance > Menus<\/em> admin interface where you can add your links.<\/p>\nChange the theme_location<\/em> in the call to wp_nav_menu<\/em> to side-menu-left<\/em> to output the new menu.<\/p>\nAdding New Widget-Capable Sidebars<\/h3>\n
There’s no reason why you cannot use a new sidebar as a side menu with all the benefits that come from being able to use widgets.<\/p>\n
To set up a new sidebar add the following to your functions.php<\/em>:<\/p>\n<\/code><\/p>\nfunction sidr_widgets_init() {<\/p>\n
register_sidebar( array(
\n‘name’ => __( ‘Right Hand Sidebar’, ‘twentythirteen’ ),
\n‘id’ => ‘sidr-right’,
\n‘description’ => __( ‘Right Hand Side Menu’, ‘twentythirteen’ ),
\n‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
\n‘after_widget’ => ‘<\/aside>’,
\n‘before_title’ => ‘<h3 class=”widget-title”>’,
\n‘after_title’ => ‘<\/h3>’,
\n) );<\/p>\n
}<\/p>\n
add_action( ‘widgets_init’ , ‘sidr_widgets_init’ );<\/p>\n
<\/p>\n
You should now see a new Right Hand Side Menu location in Appearance > Widgets<\/em> admin screen. Add a couple of test widgets to the sidebar and then back in functions.php<\/em> replace the sidr-right<\/em> HTML that you added in Step 3 with the following:<\/p>\n<\/code><\/p>\nif ( is_active_sidebar( ‘sidr-right’ ) ) :
\necho ‘ <div id=”sidr-right” class=”sidebar-container” role=”complementary”>
\n<div class=”widget-area”>’;
\ndynamic_sidebar( ‘sidr-right’ );
\necho ‘ <\/div><!– .widget-area –>
\n<\/div><!– #sidr-right –>’;
\nendif;<\/p>\n
<\/p>\n
Refresh your site and click on the LEFT<\/em> and RIGHT<\/em> links to discover side menus with left-hand menus and right-hand widgetized sidebars.<\/p>\nThat’s just a couple of examples of how side menus could be used. I’m sure that there are plenty more you can think of, especially for smaller devices.<\/p>\n
With Alberto’s code side menus are really very easy to add to any theme, so if you can see a use case for them, there’s really nothing to stop you from implementing them.<\/p>\n
<\/p>\n
Image credit:\u00a0Alberto Valero<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"You’ve most likely seen side menus on a mobile theme. You tap on an icon and the menu slides across from the left or right; tap on the icon again and it slides back. Side menus offer something for all themes, though, and they are dead easy to implement. <\/p>\n","protected":false},"author":262394,"featured_media":122876,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[38,1044,87],"tutorials_categories":[],"class_list":["post-122868","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-design","tag-css","tag-menus"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/122868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/262394"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=122868"}],"version-history":[{"count":2,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/122868\/revisions"}],"predecessor-version":[{"id":198637,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/122868\/revisions\/198637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/122876"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=122868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=122868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=122868"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=122868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Composite](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/10\/sidr1.jpg\")
<\/a>