Blog Post Icon
Blog
09/12/2016

WordPress plugin for a mobile friendly sticky navigation menu

Hello!

Creating a unique, original and flexible navigation menu in WordPress can be challenging. There are many commercial and free plugins out there to establish navigation systems, however many of the commercial options seem to be “overkill” providing many bloated options with embedded CSS that can be difficult to adjust by a novice user.

What we wanted to do is put together a very simple and clean navigation menu that sticks to the top of the screen and is mobile friendly in a simple yet flexible way.

We created a plugin, which you can view by clicking here, to do just that!

The plugin utilizes FontAwesome, Modernizr, Google Fonts and CSS from Codyhouse to put together a simple and clean navigation menu solution. Below I’ll walk through the different components that went into this plugin in order to tie everything together in an easy to use solution.

Register settings to customize the menu

We wanted to give enough flexibility to customize the look and feel of the navigation menu so that novice users could style the menu elements themselves. More advanced users can easily overwrite the classes in their stylesheet to customize further if they wish. Future versions of the plugin may include even more styling options and behavior.

        //register our settings
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_enabled' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_logo' );
        // options for menu fonts
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_bar_font' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_bar_font_col' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_ovr_font' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_ovr_font_col' );
        // options for menu bar and overlay color and opacity
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_design_bar_col' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_design_bar_tra' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_design_ovr_col' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_design_ovr_tra' );
        // options for social media accounts
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_facebook' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_twitter' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_instagram' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_googleplus' );
        register_setting( 'shift8-fullnav-settings-group', 'shift8_fullnav_social_linkedin' );

We have a total of 15 menu options in the back-end administration area. The options include choosing your Google font as well as overlay and menu bar color as well as opacity.

Some of the options above, when defined, perpetuate inline styling via the plugin in order to dynamically apply the CSS to the menu :

        $shift8_fullnav_custom_css = "
                .fn-header {
                        background-color: {$shift8_fullnav_bar_color};
                }
                .fn-primary-nav {
                        background-color: {$shift8_fullnav_ovr_color};
                }
                .fn-secondary-nav a, .fn-menu-text {
                        font-family: '{$shift8_fullnav_bar_font[0]}';
                        color : {$shift8_fullnav_bar_font_color};
                }
                .fn-primary-nav-trigger {
                        color: {$shift8_fullnav_bar_font_color};
                }
                .fn-menu-icon, .fn-menu-icon::after, .fn-menu-icon::before, .fn-primary-nav-trigger .fn-menu-icon.is-clicked::before, .fn-primary-nav-trigger .fn-menu-icon.is-clicked::after {
                        background-color: {$shift8_fullnav_bar_font_color};
                }
                .fn-menu-icon.is-clicked {
                        background-color: transparent;
                }
                .fn-primary-nav a {
                        font-family: '{$shift8_fullnav_ovr_font[0]}';
                        color : {$shift8_fullnav_ovr_font_color};
                }
                .shift8-social {
                        color: {$shift8_fullnav_ovr_font_color};
                }
";
        wp_add_inline_style( 'shift8-fullnav-style', $shift8_fullnav_custom_css );

The last line in the above snippet wp_add_inline_style is what injects the CSS.

Use Google Fonts for your Menu

For an advanced user, you should be able to overwrite the fonts used for this navigation menu with whatever you want. Alternatively we have provided the ability to select any Google font from a list. Future versions will include weight and size selections. What we want is to build a list of Google fonts, return it as an array and then use that array as a select list for the user to choose in the administration settings for the plugin.

What was implemented was a function that gets the list of fonts straight from google, but saves the results in a cached file so that we dont have to query google every time the page is refreshed :

// Function to get list of Google Fonts
function shift8_get_google_fonts() {
        $apikey = '';
        $fontFile = plugin_dir_path( __FILE__ ) . 'cache/fonts.json';

        //Total time the file will be cached in seconds, set to a week
        $cachetime = 86400 * 7;
        if(file_exists($fontFile) && $cachetime < filemtime($fontFile)) { $content = json_decode(file_get_contents($fontFile)); } else { $googleApi = 'https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=' . $apikey; $ch = curl_init(); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_HEADER, false); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_URL, $googleApi); curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); $fontContent = curl_exec($ch); curl_close($ch); $fp = fopen($fontFile, 'w'); fwrite($fp, $fontContent); fclose($fp); $content = json_decode($fontContent); } if($amount == 'all') { return $content->items;
        } else {
                return array_slice($content->items, 0, $amount);
        }
}

You can see above that we are making a simply query via curl to get the data, but before that we are checking to see if the cache file is out of date otherwise we will use the local file (which is much quicker anyways).

Once we store the returned array into a variable, we can simply loop through the array and build a simple select dropdown :

                                foreach ($fullnav_google_fonts as $fullnav_google_font) {
                                        $fullnav_google_font_item = esc_attr( $fullnav_google_font->family ) . ":" . implode(',', $fullnav_google_font->variants );
                                        $selected = ($fullnav_google_font_item == get_option('shift8_fullnav_bar_font') ? 'selected' : '');
                                        echo "" . esc_attr( $fullnav_google_font->family ) . "";
                                }

Color selector

The other interesting thing we did was implement a simple html color selector to easily choose your overlay, font and menu bar colors. In the plugin code when defining the options for the administration settings of the plugin, we implemented color options :

Menu Overlay Font color : 

 

What you need to do is to load the wp-color-picker style and scripts so that you can utilize it.

wp_enqueue_style( 'wp-color-picker' );

Then you need to load your own jquery to implement the trigger for the color selection popup :

wp_enqueue_script( 'fullnav-color-picker-script', plugins_url('js/shift8_fullnav_color.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

Inside the script you will see the jQuery trigger :

jQuery(document).ready(function($){
    $('.fullnav-color-field').wpColorPicker();
});

color-picker
There are a few other components but this should give a good overview of how we put everything together! Clean and modern sticky navigation menus are pretty straightforward to implement with pure HTML & CSS. In WordPress there are many bloated navigation menu plugins and systems integrated within themes. A clean, small and versatile menu system is always nice to have and hopefully will be useful šŸ™‚

At Shift8, we cater to all sorts of businesses in and around Toronto from small, medium, large and enterprise projects. We are comfortable adapting to your existing processes and try our best to compliment communication and collaboration to the point where every step of the way is as efficient as possible.

Our projects are typically broken into 5 or 6 key “milestones” which focus heavily on the design collaboration in the early stages. We mock-up any interactive or unique page within your new website so that you get a clear picture of exactly how your design vision will be translated into a functional website.

Using tools like Basecamp and Redpen, we try to make the process simple yet fun and effective. We will revise your vision as many times as necessary until you are 100% happy, before moving to the functional, content integration and development phases of the project.

For the projects that are more development heavy, we make sure a considerable amount of effort is spent in the preliminary stages of project planning. We strongly believe that full transparency with a project development plan ensures that expectations are met on both sides between us and the client. We want to ensure that the project is broken into intelligent phases with accurate budgetary and timeline breakdowns.

Approved design mock-ups get translated into a browse-ready project site where we revise again and again until you are satisfied. Client satisfaction is our lifeblood and main motivation. We aren’t happy until you are.

Need Web Design?

Fill out the form to get a free consultation.

shift8 web toronto – 416-479-0685
203A-116 geary ave. toronto, on M6H 4H1, Canada
Ā© 2023. All Rights Reserved by Star Dot Hosting Inc.

contact us
phone: 416-479-0685
toll free: 1-866-932-9083 (press 1)
email: sales@shift8web.com

Shift8 Logo