Blue Cyan Green Darkred Light Green Yellow Silver Orange



  1. - Automatic adding arrows to sub-menus
  2. - Responsive menu
  3. - Mega menu options
  4. - Right pane
  5. - Expandable top pane
  6. - 8 colors
  7. - Adaptable mobile version
  8. - Integrated bootstrap elements
  9. - Customizable rotating 'home' element with tooltip
  10. - Special 'roaming background' effect
  11. - Login panel fading slide effect
  12. - Search panel sliding
  1. 1.0.2.1 - Rewriten vars and removed unfinished code
  2. 1.0.2.0 - Added font ('sufont') variable
  3. 1.0.1.9 - Fixed IE drop down bugs
  4. 1.0.1.8 - Fixed dropdown margins
  5. 1.0.1.7 - Added box shadows
  6. 1.0.1.6 - Added transitions on selection of drop down links
  7. 1.0.1.5 - Fixed opacity filters for IE
  8. 1.0.1.4 - Updated to use hoverInt lib
  9. 1.0.1.3 - Fixed problem with background while hovering multiple menu links
  10. 1.0.1.2 - Updated jQuery to version 1.8.3 (from 1.8.2)
  11. 1.0.1.1 - Changed variables for compatibility
  12. 1.0.1.0 - Fixed tooltip and dropdown fonts
  13. 1.0.0.9 - Fixed mobile version width bug
  14. 1.0.0.8 - Relativity to the search bar was added
  15. 1.0.0.7 - Options to change width of background wrapper between 'fixed' and 'full'
  16. 1.0.0.6 - Script performance optimisation
  17. 1.0.0.5 - Fixed styles for typehead drop-down
  18. 1.0.0.4 - Added typehead functionality with fixed option
  19. 1.0.0.3 - Updated compatibility of the Bootstrap version to 2.2.1 (from 2.1.1)
  20. 1.0.0.2 - Fixed performance issues with search bar slider
  21. 1.0.0.1 - Fixed 1px left problem in responsive resolutions
  22. 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
  1. sui_txt = 'Solid Uber Menu CSS3/JQuery<br />Version: 1.0.2<br />Last updated: 22.11.2012';
  2. //Defines title message
  3. sui_siz = 'fixed';
  4. //Defines the width of menu background: 'fixed', 'full'. Default is 'fixed'.
  5. sui_col = 'orange';
  6. //Defines color scheme: 'blue', 'cyan', 'green', 'darkred', 'lightgreen', 'yellow', 'silver', 'orange'. Default is 'darkred'.
  7. sui_num = '5';
  8. //Number of suggestions shown in search input. Use '0' to disable.
  9. sui_obj = ['ALABAMA', 'ALASKA', 'AIONA', 'AIOVA', 'ALEXA', 'CSS', 'HTML5', 'CSS3', 'JSON'];
  10. //Items that will appear
  11. sufont = 'normal';
  12. //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
  1. <div id="suwrapbg">
  2.     <div id="suwrap">
  3.         <ul class="primary-nav">
  4.         <button class="nav-button">Toggle Navigation</button>
  5.         <div class="sulogo" rel="tooltip"><div></div></div>
  6.         </ul>
  7.     </div>
  8. </div>


Next we will put a link and a sub-menu with 3 Level 1 menu items in it
  1. <div id="suwrapbg">
  2.     <div id="suwrap">
  3.         <ul class="primary-nav">
  4.             <button class="nav-button">Toggle Navigation</button>
  5.             <div class="sulogo" rel="tooltip"><div></div></div>
  6.             <li><a href='#'><span>Menu</span></a>
  7.                 <ul>
  8.                     <li><a href='#'>Dropdown Level 1</a></li>
  9.                     <li><a href='#'>Dropdown Level 1</a></li>
  10.                     <li><a href='#'>Dropdown Level 1</a></li>
  11.                 </ul>
  12.             </li>
  13.         </ul>
  14.     </div>
  15. </div>


Next one is an example with the same but in it we will built 4 Level 2 menu items
  1. <div id="suwrapbg">
  2.     <div id="suwrap">
  3.         <ul class="primary-nav">
  4.             <button class="nav-button">Toggle Navigation</button>
  5.             <div class="sulogo" rel="tooltip"><div></div></div>
  6.             <li><a href='#'><span>Menu</span></a>
  7.                 <ul>
  8.                     <li><a href='#'>Dropdown Level 1</a></li>
  9.                     <li><a href='#'>Dropdown Level 1</a></li>
  10.                     <li><a href='#'>Dropdown Level 1</a>
  11.                         <ul>   
  12.                             <li><a href='#'><span>Dropdown Level 2</span></a></li>
  13.                             <li><a href='#'><span>Dropdown Level 2</span></a></li>
  14.                             <li><a href='#'><span>Dropdown Level 2</span></a></li>
  15.                             <li><a href='#'><span>Dropdown Level 2</span></a></li>
  16.                         </ul>
  17.                     </li>
  18.                 </ul>
  19.             </li>
  20.         </ul>
  21.     </div>
  22. </div>


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:
    1. <li><a href='#'>A label of something we love of something we honor</a></li>
    You can add:
    1. <span class="label">Default</span>
    to display the badge where you want it. Our examples are with starting badges and labels.
    1. <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
    1. <span class="label
    and it will become as it should be:
    1. <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:
    1. <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
    1. <a class='suright suright1'></a>
    2. <a class='suright suright2'>
    3.     <div class='loginbox'>
    4.         <form class="form-horizontal">
    5.           <div class="control-group">
    6.             <div class="controls">
    7.                 WEIRD LOGIN FORM :-)
    8.                 <input type="text" id="inputEmail" placeholder="Email">
    9.                 <input type="password" id="inputPassword" placeholder="Password">
    10.                
    11.                 <button class="btn btn-primary btn-small" type="button">Login</button>
    12.                 <label class="checkbox">
    13.                   <input type="checkbox" value="">
    14.                   Remember me ?
    15.                 </label>   
    16.                
    17.             </div>
    18.           </div>
    19.         </form>
    20.     </div>
    21. </a>
    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.