Suffusion Selectik Menu Plugin

May 212014

Posted by Ciprian on 21/05/2014 Our Plugins Tagged with: dropdown, jQuery, plugin, responsive, select list, Suffusion, WordPress Add comments

Often, last days, Suffusion users expressed frustration about the look of navigation menus on mobile devices. On small screens the navigation bars of Suffusion are transformed in small, unstyled select lists.

Even if is possible to use another kind of menus (like collapsible ones), for making these to work are necessary to use some widget areas, not the navigation bars. So, because those select dropdowns are already generated and they replace the regular navigation bars on mobile devices I tried to find a solution to style them.

And I found the Selectik jQuery plugin created by Ivan Kubrakov which make easy to style our existing select dropdowns. Now, even if is not so hard to add Selectik in Suffusion like any other jQuery Plugin as I wrote often on this site, this time I tried another approach. Because I don’t have more places for linking the Javascripts at Suffusion Options -> Back-end -> Custom Includes, I wrote a WordPress plugin which contain only one php file, which just register and enqueue the scripts and styles of Selectik. It is up to you to style more the list at Suffusion Options -> Backend -> Custom Includes -> Custom Styles. If you want to see the code, it is heavily commented in the file.

== Installation Instructions ==

1. **Download the plugin** from WordPress Repository

2. **Unzip** and load the folder “suffusion-selectik-menu” in to the “/wp-content/plugins/” directory (or install the zip from WordPress dashboard).
2. **Activate the Plugin** from plugin menu in the WordPress dashboard
3. **ADD YOUR OWN STYLES** at SUFFUSION OPTIONS -> BACK-END -> CUSTOM INCLUDES -> CUSTOM STYLES. Mine are as follows:

.custom-select {width:210px;clear:both;float:none;margin:0 auto;}
.custom-select .custom-text, .custom-select.disabled span.custom-text:hover {height:28px !important;}
.custom-select ul, .custom-select li {clear:both;}
.custom-select.open-list .custom-scroll {top:40px !important;}
/* The next media query is really important, as it hide the menu on desktops screens */
@media screen and (min-width: 480px) {
.custom-select {display:none;}
}

.custom-select {width:210px;clear:both;float:none;margin:0 auto;}

.custom-select .custom-text, .custom-select.disabled span.custom-text:hover {height:28px !important;}

.custom-select ul, .custom-select li {clear:both;}

.custom-select.open-list .custom-scroll {top:40px !important;}

/* The next media query is really important, as it hide the menu on desktops screens */

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

.custom-select {display:none;}

}

https://drafie-design.nl/suffusion-selectik-menu-plugin/trackback/Trackback URI:

Ciprian

Experienced web developer and graphic designer. Former consultant for Suffusion theme and former moderator on Suffusion Support forum. I teach others while learning myself.

Google+ Profile

Google+ Page

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Responses to “Suffusion Selectik Menu Plugin”

Comments (2) Pingbacks (1)

[…] I chose this solution for solving also the problem of 2 select lists which are displayed on mobile devices in Navigation Bar Above Header. However, if you have too much menu items, in complicated structures, with many levels of dropdowns, maybe better is to remain on select lists and style them with my other plugin: Suffusion Selectik Menu. […]

Suffusion Collapse Menu Plugin | Drafie's Design

14/06/2014 at 04:45

Ciprian

Leave a Reply

3 Responses to “Suffusion Selectik Menu Plugin”