Adding a Slide Panel Menu to Your WordPress Website

Mobile sites have the constraint of space but even with such constraints, you need to provide your users with a pleasurable browsing experience. Thanks to the ingenuity of website designers and developers, we have a number of ways to enhance the User Experience (UX) of the mobile website despite the constraints. One of the best ways to manage the space on a mobile screen is by using a slide panel menu. The menu or its navigation would not be visible on the screen but the menu would appear when the user slides from the side of the screen to the centre. A large number of mobile sites and apps use this feature to keep their interface clean.

If you have a WordPress site, then you can add slide panel menu to your website with a bit of programming. In this post we talk about the ways you can add this neat little feature to your site.

Please not that you would need to have a good deal of knowledge in HTML and CSS to do this. If you don’t think you have that, you should avoid doing it yourself. If you are in Houston, then you can take the help of a professional company in the field of Web Design Houston as they are regarded as experts in WordPress development.

The Technique

The first thing that you need to do is open a text editor (e.g. Notepad) and create a new file. Then you need to put this code onto the file.

01

(function($) {

02

$(‘#toggle’).toggle(

03

function() {

04

$(‘#popout’).animate({ left: 0 }, ‘slow’, function() {

05

$(‘#toggle’).html(‘<img src=”http://www.yoursitehere.com/wp-content/themes/your-theme/images/menu.png" alt=”close” />’);

06

});

07

},

08

function() {

09

$(‘#popout’).animate({ left: -250 }, ‘slow’, function() {

10

$(‘#toggle’).html(‘<img src=”http://www.yoursitehere.com/wp-content/themes/your-theme/images/menu.png" alt=”close” />’);

11

});

12

}

13

);

14

})(jQuery);

You need to replace ‘your-theme’ with your own theme directory and ‘www.yoursitehere.com’ with your actual domain name.

You need to save the file as slidepanel.js

This code uses jQuery to toggle the slide panel and also animate the slide panel.

You would then need to connect to your website through an FTP client. Look for the js folder and upload the slidepanel.js file to the folder. If you don’t have a js folder, you need to create one.

You need to find or create a menu icon. You can use Photoshop or search on Google. Here we would be using a 27x23px icon, but you can use the one of your choice. Name the file as menu.png and save it in the images folder.

Next, you need to paste this code to the functions.php file

1

wp_enqueue_script( ‘wpb_slidepanel’, get_template_directory_uri() . ‘/js/slidepanel.js’,array(‘jquery’), ‘20131010’, true );

This is done to enqueues JavaScript file for slide panel in WordPress.

Once you are done with that, you need to make some changes in the menu of your default theme.

You just need to open the header.php file and look for a code similar to this.

1

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’,’menu_class’ => ‘nav-menu’ ) ); ?>

You need to wrap that in a <div id=”toggle”> and <div id=”popout”> like this

1

<div id=”toggle”><img src=”http://www.yoursitehere.com/wp-content/themes/your-theme/images/menu.png" alt=”Show” /></div>

2

<div id=”popout”>

3

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’,’menu_class’ => ‘nav-menu’ ) ); ?>

4

</div>

After you are done, just save your changes.

In the final step, you need to copy and paste the following CSS code in the stylesheet.

01

@media screen and (min-width: 769px) {

02

#toggle {

03

display:none;

04

}

05

06

}

07

08

@media screen and (max-width: 768px) {

09

#popout {

10

position: fixed;

11

height: 100%;

12

width: 250px;

13

background: rgb(25, 25, 25);

14

background: rgba(25, 25, 25, .9);

15

color: white;

16

top: 0px;

17

left: -250px;

18

overflow:auto;

19

}

20

21

22

#toggle {

23

float: right;

24

position: fixed;

25

top: 60px;

26

right: 45px;

27

width: 28px;

28

height: 24px;

29

30

}

31

32

.nav-menu li {

33

border-bottom:1px solid #eee;

34

padding:20px;

35

width:100%;

36

}

37

38

.nav-menu li:hover {

39

background:#CCC;

40

}

41

42

.nav-menu li a {

43

color:#FFF;

44

text-decoration:none;

45

width:100%;

46

}

47

}

So this was the technique you need to follow to include a slide panel menu into your WordPress site. This would surely help you to give a pleasurable browsing experience and get you more traffic.