- - Automatic adding arrows to sub-menus
- - Responsive menu
- - Mega menu options
- - Right pane
- - Expandable top pane
- - 8 colors
- - Adaptable mobile version
- - Integrated bootstrap elements
- - Customizable rotating 'home' element with tooltip
- - Special 'roaming background' effect
- - Login panel fading slide effect
- - Search panel sliding
- 1.0.2.1 - Rewriten vars and removed unfinished code
- 1.0.2.0 - Added font ('sufont') variable
- 1.0.1.9 - Fixed IE drop down bugs
- 1.0.1.8 - Fixed dropdown margins
- 1.0.1.7 - Added box shadows
- 1.0.1.6 - Added transitions on selection of drop down links
- 1.0.1.5 - Fixed opacity filters for IE
- 1.0.1.4 - Updated to use hoverInt lib
- 1.0.1.3 - Fixed problem with background while hovering multiple menu links
- 1.0.1.2 - Updated jQuery to version 1.8.3 (from 1.8.2)
- 1.0.1.1 - Changed variables for compatibility
- 1.0.1.0 - Fixed tooltip and dropdown fonts
- 1.0.0.9 - Fixed mobile version width bug
- 1.0.0.8 - Relativity to the search bar was added
- 1.0.0.7 - Options to change width of background wrapper between 'fixed' and 'full'
- 1.0.0.6 - Script performance optimisation
- 1.0.0.5 - Fixed styles for typehead drop-down
- 1.0.0.4 - Added typehead functionality with fixed option
- 1.0.0.3 - Updated compatibility of the Bootstrap version to 2.2.1 (from 2.1.1)
- 1.0.0.2 - Fixed performance issues with search bar slider
- 1.0.0.1 - Fixed 1px left problem in responsive resolutions
- 1.0.0.0 - First version generated
First of all I won't start with "It's soo easy to build a beautiful menu with few elements" - this menu took our team dozens of hours to make it user friendly
and soo customizable. You can read the full
bootstrap documentation for more functions integrated.
Main variables - read the '//'-commented lines for information
sui_txt = 'Solid Uber Menu CSS3/JQuery<br />Version: 1.0.2<br />Last updated: 22.11.2012';
//Defines title message
sui_siz = 'fixed';
//Defines the width of menu background: 'fixed', 'full'. Default is 'fixed'.
sui_col = 'orange';
//Defines color scheme: 'blue', 'cyan', 'green', 'darkred', 'lightgreen', 'yellow', 'silver', 'orange'. Default is 'darkred'.
sui_num = '5';
//Number of suggestions shown in search input. Use '0' to disable.
sui_obj = ['ALABAMA', 'ALASKA', 'AIONA', 'AIOVA', 'ALEXA', 'CSS', 'HTML5', 'CSS3', 'JSON'];
//Items that will appear
sufont = 'normal';
//As defined there are 'bold' and 'normal'. You can add your own font without editing the CSS just type the name here after adding it
Defining the menu
Next we will put a link and a sub-menu with 3 Level 1 menu items in it
<li><a href='#'>Dropdown Level 1
</a></li>
<li><a href='#'>Dropdown Level 1
</a></li>
<li><a href='#'>Dropdown Level 1
</a></li>
Next one is an example with the same but in it we will built 4 Level 2 menu items
<li><a href='#'>Dropdown Level 1
</a></li>
<li><a href='#'>Dropdown Level 1
</a></li>
<li><a href='#'>Dropdown Level 1
</a>
You are able easly to create items with labels..
Default A label of something we love of something we honor
Success A success label
Warning A warning label
Important A important label
Info A info label
Inverse A inverse label
..or badges
1 A badge
2 A success badge
4 A warning badge
6 A important badge
8 A info badge
10 A inverse badge
As you see their colors match so we need to change only the form. In a normal linked element:
<li><a href='#'>A label of something we love of something we honor
</a></li>
You can add:
to display the badge where you want it. Our examples are with starting badges and labels.
<li><a href='#'><span class="label">Default
</span>A label of something we love of something we honor
</a></li>
The result:
Default A label of something we love of something we honor
You can use classes:
label-success
label-warning
label-important
label-info
label-inverse
after the
and it will become as it should be:
<li><a href='#'><span class="label label-success">Success
</span> A success label
</a></li>
Remember the class `label` is used for labels and `badge` for the form of badges. Here is the same example with badge:
<li><a href='#'><span class="badge label-success">Success
</span> A success label
</a></li>
Right pane. Before the closing </div> of 'suwrap' you can add the right element
<a class='suright suright1'></a>
<a class='suright suright2'>
<form class="form-horizontal">
<div class="control-group">
WEIRD LOGIN FORM :-)
<input type="text" id="inputEmail" placeholder="Email">
<input type="password" id="inputPassword" placeholder="Password">
<button class="btn btn-primary btn-small" type="button">Login
</button>
<input type="checkbox" value="">
Remember me ?
To use this pane there is required minimum HTML knowledge and if you have it, there is no explanation needed.
Just to explain a bit the two buttons are RTL configured. That means 'suright2' is the user panel and 'suright1' is the search pane.