Quick and Easy Hyperlinks Field Navigation Menu: BoxyMenu
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.
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>
Boxy Menu Revieew
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
Ottimo Menu complimenti from italy
Is it possible that each block with a another color ?
Yes you can do it with CSS, no issue. Add classes dynamically using script.