Javascript / Navigation / Plugins / Scripts & Applications / Tools & Widgets
3

Quick and Easy Hyperlinks Field Navigation Menu: BoxyMenu

by Skip McGraff · February 15, 2017

In case you are serious about giving a facelift to your website, experimenting with navigation menu is maybe the best method to do this. A well-designed navigation menu wouldn’t solely make your site secure and usable however it might additionally immediately change general structure of the website. There are some experiments that you can do along with your site navigation – colors, orientation, icons, fonts, type (vertical, sliding, collapsible, drop down and so forth.) and so forth. All of those menu kinds are efficient for a particular objective. As an illustration, when you may have a logical hierarchy of hyperlinks, you may group them and use a drop-down hierarchical menu type.

Equally, when you may have numerous hyperlinks to indicate in a restricted area, you may creatively use hyperlinks field as your navigation menu – identical to our as we speak’s freebie, BoxyMenu.

=> Jaw-Dropping WordPress Theme Designs for any type of site (Insanely Popular)

BoxyMenu is an easy and quick navigation menu plugin that renders efficiently in all primary net browsers. It’s easy to customize and plug into any website or net software.

BoxyMenu Parameters

itemDisplaySpeed: Menu merchandise scroll velocity
loadAnimationSpeed: Load animation velocity
menuItemWidth: Width of every field
menuItemHeight: Peak of every field
boxHorizontal: No of horizontal containers for load animation
boxVertical: No of vertical containers for load animation

Utilizing BoxyMenu

In your HTML file add the subsequent references within the head part.

Add a reference to newest jQuery script
Add a reference to boxymenu.js file
Add a reference to boxymenu.css file

Add the Markup/HTML code in your menu, and name boxymenu initializer operate. Right here is the entire code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Quick and Easy Hyperlinks Field Navigation Menu: BoxyMenu</title>
    <hyperlink href="css/demo.css" rel="stylesheet" sort="textual content/css" />
    <hyperlink href="css/boxymenu.css" rel="stylesheet" sort="textual content/css" />
    <script src="js/jquery.min.js" sort="textual content/javascript"></script>
        <script src="js/boxymenu.js" sort="textual content/javascript"></script>
    <script sort="textual content/javascript">
        $(doc).prepared(operate () );
    </script>
 
</head>
<physique>
  
    <div id="menu-wrapper">
        <ul class="boxy-menu">
            <li>
                <div class="boxy-menu-item-top">
                    Content material
                </div>
                <div class="boxy-menu-item-bottom">
                   Menu Gadgets right here
                </div>
            </li>
            <li>
                <div class="boxy-menu-item-top">
                    Portfolio
                </div>
                <div class="boxy-menu-item-bottom">
                  Menu Gadgets right here
                </div>
            </li>
            <li>
                <div class="boxy-menu-item-top">
                    Helpful
                </div>
                <div class="boxy-menu-item-bottom">
                Menu Gadgets right here
                </div>
            </li>
        </ul>
    </div>
  
</physique>
</html>

View Demo

Download Source