Fast and Simple Links Box Navigation Menu: BoxyMenu

If you are thinking about giving a facelift to your website, experimenting with navigation menu is perhaps the most effective way to do that. A well-designed navigation menu would not only make your website simple and usable but it would also instantly change overall layout of the website. There are a lot of experiments that you can do with your website navigation – colors, orientation, icons, fonts, style (vertical, sliding, collapsible, drop down etc.) etc. All of these menu styles are effective for a particular purpose. For instance, when you have a logical hierarchy of links, you can group them and use a drop down hierarchical menu style.

Similarly, when you have a large number of links to show in a limited space, you can creatively use links box as your navigation menu – just like our today’s freebie, BoxyMenu.

BoxyMenu is a simple and fast navigation menu plugin that renders smoothly in all major web browsers. It is simple to customize and can be plugged in to any website or web application.

BoxyMenu Parameters

itemDisplaySpeed: Menu item scroll speed
loadAnimationSpeed: Load animation speed
menuItemWidth: Width of each box
menuItemHeight: Height of each box
boxHorizontal: No of horizontal boxes for load animation
boxVertical: No of vertical boxes for load animation

Using BoxyMenu

In your HTML file add the following references in the head section.

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

Add the Markup/HTML code for your menu and call boxymenu initializer function. Here is the complete code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fast and Simple Links Box Navigation Menu: BoxyMenu</title>
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/boxymenu.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/boxymenu.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menu-wrapper').boxymenu();
        });
    </script>

</head>
<body>

    <div id="menu-wrapper">
        <ul class="boxy-menu">
            <li>
                <div class="boxy-menu-item-top">
                    Content
                </div>
                <div class="boxy-menu-item-bottom">
                   Menu Items here
                </div>
            </li>
            <li>
                <div class="boxy-menu-item-top">
                    Portfolio
                </div>
                <div class="boxy-menu-item-bottom">
                  Menu Items here
                </div>
            </li>
            <li>
                <div class="boxy-menu-item-top">
                    Useful
                </div>
                <div class="boxy-menu-item-bottom">
                Menu Items here
                </div>
            </li>
        </ul>
    </div>

</body>
</html>

View Demo

Download Source

EGrappler

Development Resources for Entrepreneurs

Fast and Simple Links Box Navigation Menu: BoxyMenu

BoxyMenu Parameters

Using BoxyMenu

Related Posts

24 comments

Leave a Reply Cancel reply

Premium WordPress/HTML Themes