Recently, one of our readers asked how we could replace his site navigation menu with a jQuery sliding menu bar. Such a panel can significantly improve usability on mobile versions sites. In this article, we will show you how to add a sliding menu bar to WordPress themes.
Note: This article assumes an intermediate knowledge of HTML and CSS.
Replacing the Default Menu with a Sliding Bar in WordPress
The goal here is to show the slide-out menu bar to users with small screen resolutions, while keeping our theme's default menu so that computer users can see full version menu. Before we get started, it's important to understand that there are many different WordPress themes, and so you'll need to tweak css styles depending on your design.
First of all, we need to open text editor type notepad and create new file. Copy and paste the following code into it:
(function($) ( $("#toggle").toggle(function() ( $("#popout").animate(( left: 0 ), "slow", function() ( $("#toggle" ).html(" 
"); )); ), function() ( $("#popout").animate(( left: -250 ), "slow", function() ( $("#toggle").html(" "); )); )); ))(jQuery);
Replace example.com to your Domain name site, and change your theme to the actual folder of your current theme. Save the file with a name slidepanel.js on computer. This code uses jQuery to toggle the sliding menu bar. It also animates the switching effect.
Open your FTP client (Filezilla or Total Commander) and connect to your site. Next, go to the directory of your theme and if there is already a folder in it js then open it. If your theme does not have such a directory, then create it and upload the slidepanel.js file inside.
The next step is to design or find an icon for the menu. The most used icon for this is the one with three stripes. It can be created in any graphics editor(for example, in Photoshop) or find one of the many existing in Google. In this example, we will use 27x23px for the icon. After you create it, rename it to menu.png and upload it to your images folder in your theme directory.
The next step is for the sliding menu bar. You just need to copy and paste the following code into the file functions.php Topics:
wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);
Now that all the preparatory work is completed, it is necessary to modify the theme's default menu. Typically, most themes display a navigation menu in a file. header.php Topics. We open header.php and find a line similar to this:
"primary", "menu_class" => "nav-menu")); ?>
The challenge is to wrap the theme's menu in HTML to display the slide-out menu bar on small screens. We'll wrap it in
Replace example.com with your domain name and your-theme with your theme folder. Save your changes.
Last step: CSS usage to hide the menu icon for large screen users and show it for those with low resolution. We also need to adjust the position of the menu icon and the appearance of the slideout. Copy and paste this CSS code into your theme's stylesheet.
@media screen and (min-width: 769px) ( #toggle ( display:none; ) ) @media screen and (max-width: 768px) ( #popout ( position: fixed; height: 100%; width: 250px; background : rgb(25, 25, 25); background: rgba(25, 25, 25, .9); color: white; top: 0px; left: -250px; overflow:auto; ) #toggle ( float: right; position : fixed; top: 60px; right: 45px; width: 28px; height: 24px; ) .nav-menu li ( border-bottom:1px solid #eee; padding:20px; width:100%; ) .nav-menu li :hover ( background:#CCC; ) .nav-menu li a ( color:#FFF; text-decoration:none; width:100%; ) )
Keep in mind that your theme's menus may use different CSS classes and they may conflict with the ones above. You can solve this problem by using the Inspector in Chrome or Firefox to find out which classes are conflicting with yours. Also, do not forget that you are free to customize the appearance of the panel to match the design of the site.
You may have noticed that most developers have begun to add custom Javascript-based pull-out panels to their websites, either at the very top of the site or in the footer. These panels are used to draw the user's attention to various promotions, interesting blog posts, and so on. The main reason why these panels have become so widespread is, of course, the focus on results. You can love or hate these panels, but you will definitely agree that they are up to the task assigned to them. There are many free and commercial plugins for adding slide-out panels to your blog; I will cover them later in this article.
Free plugins
hello bar
A simple and modest plugin that has all necessary tools in order to create a panel at the top of the site. Such a panel is sure to attract user attention.
Attention Bar
If you need to draw users' attention to some important message, you can create an alert panel that is a regular div with some extra styling. However, it is worth remembering that such a panel is very annoying, and users of your site are unlikely to like it. With the help of the Attention Bar plugin, you can display a nice bar at the top of the page that won't distract you from browsing the site. Rich settings will help the developer to control the layout of the panel.
Easy Heads Up Bar
The plugin adds a handy notification bar to the top of your website. In notifications, you can leave links to strengthen the call to action.
Notification Toolbar
A panel placed in the footer of your blog. Allows you to display custom notifications. The plugin is based on the Static Toolbar.
Quick Notice Bar
The plugin allows you to create a highlighted notification in the header of the site. Such a notification is sure to attract the attention of users, so you can place anything in it, from simple warnings to special offers.
Viper Bar
The plugin allows you to add a panel to the header area of the site, which can be used to increase the number of subscribers. The plugin includes inline styles, integration with Aweber and Feedburner, conversion tracking, split testing, and more.
Commercial plugins
A WordPress plugin that allows you to add custom panels to the top of your blog or website. You can display different notifications for different pages, set a standard panel that will be displayed on all pages, etc.
Attention Grabber
A plugin that allows you to add a notification panel to your site. With this plugin, you can easily display custom text, Twitter posts or RSS feeds. In addition, there is a huge list of features that allow you to customize the appearance of the notification.
http://wplift.com/wordpress-notification-bar-plugins/
Hello, dear readers of the blog site. Today I want to talk about a rather functional and convenient upPrev plugin, which can implement several types of page linking at once. You can observe his work (at least at the time of writing this article) at the bottom of each page with an article - a pop-up panel appears on the right with a list of similar materials.
The plugin can display not only similar materials, but also previous articles from the same category or tag archive (this is the one that we talked about in detail in the above article, and the practical implementation of which I described), previous materials in the format of the entire blog, as well as publications taken at random. In addition, the whole thing can be flavored with thumbnails, if you create them when writing posts.
What role does linking play now in website promotion?
In general, site optimization, for its further successful promotion, is task number one (number two is getting backlinks). Internal factors can block and reduce the influence of everything else. On the other hand, it is impossible (especially with keywords in content and anchors of internal links).
Now an integrated approach to promotion is driving, and linking occupies a rather significant place in it. Recently, it has become fashionable to use infographics to visualize anything. On the topic of Seo, you can find many similar flowcharts, for example, Seoprofi has an article on how to promote a site. Unfortunately, I am not yet ready to create such masterpieces, but referring to them will allow me not to pour too much water.
Which linking scheme to choose? A rather difficult question, because many of the previously well-working schemes (all also the notorious “ring”, links to the implementation methods of which I gave a little higher) no longer give those phenomenal results that were still observed a dozen years ago. Search engines also learn and try not to take into account what, from their point of view, is an obvious cheat.
Linking in the form of a series of rings, according to Peydrank's theory, should seriously increase the static weight of the site pages () that are involved in this ring.
However, this does not always work in practice. It is possible that when individual pages fall out of the index, the ring breaks, or it is possible that, in order to reduce markups, search has introduced a serious reduction factor into the classic formula for calculating stat weight.
Linking site pages has another task, which is no longer aimed at pleasing Yandex or Google, but at please the visitor. One article for him to try your blog will obviously not be enough - you must definitely invite him to go somewhere else in order to interest, delay and, possibly, make him your subscriber.
Thus, linking also affects behavioral factors , which the search also takes into account and every year to a greater and greater extent. Almost all webmasters understand this and add blocks to the site with similar materials, with the most read publications or with articles from the same category. There are probably other variations on the theme.
Naturally, the implementation options internal linking there is also a mass. You can even do without plugins (an example can be found in the article), but a lot of them have been written for linking. The most difficult thing is to choose an option that works perfectly on your blog.
I myself have tried a lot of them and even wrote reviews about some of them (). In fact, the mentioned plugin is one of the best for calculating related posts and listing them on blog pages.
But his data can also use other WordPress extensions, making them more colorful or pretentious. In the same article about YARP, I just gave an example of using its data by the Related Posts Slider plugin, which allowed displaying related posts in the form of this form:
Well, or like this:
Today's our hero called upPrev also knows how to take information from the Yet Another Related Posts Plugin database and does it right, because there is no need to reinvent the wheel every time. Let's, in fact, move on to describing the possibilities of this miracle of engineering.
Linking options with the upPrev plugin
I did not touch these styles, because I went the other way (not the most direct), which I will describe below in the text. For sim, go to the second tab:
Select the number of posts to which this plugin will generate links. But a little lower, we just choose the type of linking for our site. I have the related posts option selected using the Yet Another Related Posts Plugin base (it must be pre-installed), but you can set up a ring link by selecting the second or third option, as well as a large ring link by selecting the first .
I intended to organize this business only for posts, which is indicated by a tick in the corresponding field. In addition to the post title, this panel can also display several words (their number is set at the very bottom) from the beginning of the post or the quote area, if you fill it out. It seemed redundant to me.
The third tab is used to set up tracking the number of clicks on links in this panel, which I did not use. However, on the fourth tab, I still activated the cache. On the fifth tab, I prevented the panel from showing on mobile phones, but did not object to its leaving on tablets:
Well, that's all, the upPrev settings have finished, but I already changed the appearance of the panel in the settings of the Yet Another Related Posts Plugin.
Customizing the appearance of the contents of the slideout
There I chose a template file that will be responsible for displaying similar posts (see the link above for the essence and specifics of working with this extension):
That. now the appearance of the list of similar posts displayed by the upPrev plugin (in the sliding panel) is the responsibility of the code that is registered in my yarpp-template-list.php file from my theme folder (). If your blog generates thumbnails for posts, then it makes sense to choose a template from the Yet Another Related Posts Plugin arsenal with their support.
The code for this file is:
-
have_posts()): $postsArray = array(); while ($related_query->have_posts()) : $related_query->the_post(); $postsArray = "
- ".get_the_title()." "; endwhile; echo implode(" "."\n",$postsArray); // print out a list of the related items, separated by commas else:?>
No related posts.
As you can see, this is where the header of the outgoing panel lives, so you will need to convert (if necessary) this file to UTF-8 encoding without BOM in order to avoid bugs (). I don’t know about you, but I have been living for quite a long time as the main Notepad editor++ () and in it this transformation is done like this:
It is clear that this code forms only a banal html list(), and the CSS properties specified in the style file for the classes in the code are responsible for the appearance. In my case, these styles look like this:
A.oy (color: #333;font:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5px;margin: 5px 0;border: dotted 2px #ccc;) li.eto:hover (text-decoration:underline;) div.oyy (margin:0 0 0 0;padding:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial;color:#666;)
The lampochka class adds green checkmarks that css code are set for me using base64 code (I copied this code somewhere). If interested, take a look at my style.css. OK it's all over Now. If you forgot something, then ask. True, I set up this linking option a month ago and something has already disappeared from my head during this time.
Good luck to you! See you soon on the blog pages site
You may be interested
How to remove the transparent pixel http://yarpp.org/pixels in the Yet Another Related Posts plugin and change the inscription 
Creating a Related Posts List in WordPress (with Thumbnails) Using the Related Posts Plugin for Internal Linking 
How to Improve Website Behavioral Stats with Yet Another Related Posts and Related Posts Slider Plugins for WordPress 
Simple Counters and Category and Page Icons - beautiful RSS and Twitter counters, as well as icons for categories and pages in WordPress 
WordPress plugins on my blog (website) Sliders and slideshows for your site - what options are there and how to use jQuery Slider scripts 
Breadcrumbs in WordPress using the Breadcrumb NavXT plugin (strengthening linking) 
Reducing the memory consumption in WordPress when creating pages - WPLANG Lite plugin to replace the localization file 
WP-PageNavi - Page Navigation for a WordPress Blog - Installation, Configuration and Modification appearance pagination 
Calendarize it! - Event Calendar for WordPress 
Not sending mail from WordPress and not working visual editor- solution with Configure SMTP and Post Editor Buttons plugins
How navigation menu by site, user profile menu etc. you can hide and they will appear when you click and hover. Some might say that the usability of the page suffers from this. I don’t think so, as the page becomes cleaner, which means it’s easier to navigate. A person is not confused in the mountain of links.
Today I made a collection slide panels, which are hidden on the page by default. To call menu, you need to click or hover over the corresponding icon. This technique came to web design from mobile applications, where you can’t mark up many elements on one screen. Over time, such panels migrated to websites. This collection will be useful, first of all, for mobile developers, . With a small screen resolution, this will appear outbound navigation, and on normal, large monitors, you can make a regular menu that everyone is used to. Thus, a person with a mobile device will not get confused in your site, as he has long been accustomed to using slide panels, because all the applications in his smartphone work on the same principle.
I want to note that this collection includes plugins, which are sharpened only under mobile sites and on wide monitors their use will be inappropriate. Although there are universal panels that are suitable for any website. See the demo and choose what suits your needs.
Dropdown panels work on . Implementing such a menu into your site will not be difficult, and developers' sites have detailed instructions on using their product.
Soon we plan to redesign the Postovoy website and will use one of the jquery plugins which are presented below.
So. Here is a collection of 20 jquery dropdown slidebar plugins for your site. Don't forget to leave comments.
Swipeable Side Menu
A nice slide-out navigation menu in jquery. Ideal for both mobile and regular sites.
Transitions for Off-Canvas Navigations
An extremely powerful plugin that allows you to organize a slide panel that will be shown with various animation effects, including 3D. The plugin includes 14 animation effects.
jPanelMenu
The navigation bar is made in the style iOS Applications. A light and fast menu that will facilitate the development of a mobile site.
Recreate Google Nexus Menu
The sliding panel is made by analogy with the Google Nexus menu.
bigSlide - Jquery slide navigation bar
The slide panel is suitable for both a mobile site and a regular one. To call it, you need to click on the icon depicting three stripes.
Multi Level Push Menu
Jqutry plugin works similar to bigSlide. The panel is called when you click on the icon. The advantage of this menu is that it supports a multi-level structure.
Box Lid Menu
Very beautiful slide navigation bar with 3D effect.
Animated Border Menus
By clicking on the plus sign in the corner of the screen, a small side panel with icons. To hide it, you need to click on the icon with the "-" symbol.
Snap.js
The slide panel is designed for mobile devices. The menu is called up by dragging the screen with the mouse cursor or, if on mobile device, finger.
Slide and Push Menus
|
Meny
Jquery plugin allows you to implement a cool slide navigation bar with a 3D effect on your site.
mb.jquery
Unlike other panels, it appears on top of the screen instead of moving it. In the block, you can put any html, text, and in general anything you want.
Android Dock
The panel is sharpened for mobile sites and is located at the bottom of the screen. When pressed, icons appear in which you can place any links.
Content slide bar
Cool slide panel is made in the form of two levels. The first is the menu. The second is content. Now this effect is very popular among designers and web developers. You can find many applications. Microsoft's mailer works on a similar principle.Surely you often met on the pages of sites, retractable panels different kind and arrangements that say top, bottom, right or left on full auto, with a specified time interval, or activated by click. As a rule, in such panels, hidden from the eyes of the user for the time being, some Additional information important and not so important. For example, subscription forms, social media widgets, links, tags, contact details, etc., in short, anything.
Exists great amount ready-made solutions for the implementation of sliding panels in javascript, modules and plugins for various CMS, separate jQuery plugins, but quite a bit, caught my eye, fully working ways on pure CSS.
For a long time I wanted to stir up something like that, the mechanism for using hidden checkboxes is well known and understandable, but somehow my hands never reached it. And so, having stumbled upon one in the dusty storerooms of the CodePen, I decided to experiment and give it to the mountain, quite a working one, slightly modified and adapted for our brother, my version of the retractable top panel on pure CSS, it turned out what happened)).
We looked at the example, compared it with the original, and now, who needs it, let's take a look at how the whole thing works together. Once again, no js, just pristine html and "magic" css will do the job.
Html layout
It consists of three main elements: a base container, a content block, and a panel open/close button.
As you can see, the type=" " flag is present in the panel design, it is hidden and inactive by default. With a tag