Smartmenus




Smartmenus er en jQuery/JavaScript/CSS/Liste baseret menu der grundlæggende kan anvendes på tre forskellige måder:

  1. Horisontal, responsiv menu med valg mellem fuld bredde (venstre stillet / jævnt fordelt) / indenfor 'container' (højre, venstre, centreret)
  2. Vertikal (venstre / højre side)
  3. Responsiv erstatning for Bootstrap egen menu (udvidet funktionalitet). Kan placeres på 4 forskellige måder.


Den 'tekniske' opbygning kan styres via godt 30 JavaScript-parametre.

Det visuelle layout for 1 og 2 kan styres via 4 forskellige medleverede CSS-'themes'. De kan enten bruges direkte eller danne grundlag for egen template.

Udover at benytte Bootstrap's visuelle CSS-styring af menuer, er der også en CSS-fil med yderligere styring til rådighed.


Muliggør et i princippet ubegrænset antal niveauer med undermenuer. Er de medleverede ikke nok, kan man selv udvide.


Hver undermenu kan indeholde et i princippet ubegrænset antal menupunkter.


Udover traditionelle menupunkter kan der også indsættes "Mega"-menupunkter.


Lokal styring af, hvornår der skiftes fra vertikal menu til 'burger'-menu.


Smartmenus kan downloades herfra: .


Filen jQuery.smartmenus.js kan ses her




Installation

Efter download og udpakning skal der foretages installation af CSS, JavaScript og HTML-data.

Templates for installation kan hentes her: . Nedenfor er gengivet templaten for "vertikal sm-simple".


CSS

Den CSS-mæssige opsætning af Smartmenus:


Primære CSS fil
Filen sm-core-css.css (se nedenfor) skal placeres et passende sted, og der linkes til den.
Template fil
CSS fil for det valgte tema (se sm-simple-css nedenfor) skal placeres et passende sted, og der linkes til den.
CSS-fil med egne tilpasninger kan oprettes og der linkes til den lige efter temalinket.
Burger-menu
I style-sheetet styres, ved hvilken pixelbredde der skal skiftes fra horisontal menu til burger-menu.
< IE9
Såfremt IE8 og lavere ønskes understøttet indsættes de to anførte CDN-links.


<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />

<!-- "sm-simple" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-simple/sm-simple.css" rel="stylesheet" type="text/css" />

<!-- #main-menu config - instance specific stuff not covered in the theme -->
<!-- Put this in an external stylesheet if you want the media query to work in IE8 (e.g. where the rest of your page styles are) -->
<style type="text/css">
    @media (min-width: 768px) {
       #main-menu {
          float: left;
          width: 12em;
       }
    }
</style>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


JavaScript

Den JavaScript-mæssige opsætning af Smartmenus:


jQuery
Den medleverede jquery.js (minified) placeres et passende sted, og der linkes til den.
Alternativt kan der etableres CDN-link til f.eks. Google eller Maxcdn. Afklar også, om der allerede er etableret et sådant link på sitet.
Smartmenus script
Filen jquery.smartmenus.js (se parameterdelen af den nedenfor) skal placeres et passende sted, og der linkes til den.
Eventscript
('#main-menu'): id-selektor, der etablerer forbindelsen mellem smartmenus.js og menulisten. Navnet kan være et andet, men skal være det samme begge steder.
parametre: Mulighed for overstyring af default parametrene i js-filen. (Se nedenfor).


<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery init -->
<script type="text/javascript">
    $(function() {
       $('#main-menu').smartmenus({
          mainMenuSubOffsetX: 10,
          mainMenuSubOffsetY: 0,
          subMenusSubOffsetX: 10,
          subMenusSubOffsetY: 0
       });
    });
</script>


HTML

Den HTML-mæssige opsætning af Smartmenus:


id="main-menu"
id-selektor, der etablerer forbindelsen mellem smartmenus.js og menulisten. Navnet kan være et andet, men skal være det samme begge steder.
sm sm-vertical sm-simple
Temaafhængige selektorer.


<nav id="main-nav" role="navigation">
<ul id="main-menu" class="sm sm-vertical sm-simple">
...
</ul>
</nav>




Filer


jquery.smartmenus.js

JavaScript program til styring af den fysiske afvikling af menuen - bygget ovenpå Jquery. Programmet er på ialt ca 1200 linier, hvoraf de sidste ca. 40 indeholder 32 styrende parametre (default settings), der kan tilpasses efter behov:

Udover //-forklaringerne kan yderligere dokumentation ses i 'Options'-afsnittet her: smartmenus


Parametre


jquery.smartmenus.js indeholder følgende parametre med de viste default værdier. Defaultværdierne kan overstyres i event scriptet.

// default settings
$.fn.smartmenus.defaults = {
    isPopup: false,
// is this a popup menu (can be shown via the popupShow/popupHide methods) or a permanent menu bar

    mainMenuSubOffsetX: 0,
// pixels offset from default position

    mainMenuSubOffsetY: 0,
// pixels offset from default position

    subMenusSubOffsetX: 0,
// pixels offset from default position

    subMenusSubOffsetY: 0,
// pixels offset from default position

    subMenusMinWidth: '10em',
// min-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored

    subMenusMaxWidth: '20em',
// max-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored

    subIndicators: true,
// create sub menu indicators - creates a SPAN and inserts it in the A

    subIndicatorsPos: 'prepend',
// position of the SPAN relative to the menu item content ('prepend', 'append')

    subIndicatorsText: '+',
// [optionally] add text in the SPAN (e.g. '+') (you may want to check the CSS for the sub indicators too)

    scrollStep: 30,
// pixels step when scrolling long sub menus that do not fit in the viewport height

    scrollAccelerate: true,
// accelerate scrolling or use a fixed step

    showTimeout: 250,
// timeout before showing the sub menus

    hideTimeout: 500,
// timeout before hiding the sub menus

    showDuration: 0,
// duration for show animation - set to 0 for no animation - matters only if showFunction:null

    showFunction: null,
// custom function to use when showing a sub menu (the default is the jQuery 'show')
// don't forget to call complete() at the end of whatever you do
// e.g.: function($ul, complete) { $ul.fadeIn(250, complete); }

    hideDuration: 0,
// duration for hide animation - set to 0 for no animation - matters only if hideFunction:null

    hideFunction: function($ul, complete) { $ul.fadeOut(200, complete); },
// custom function to use when hiding a sub menu (the default is the jQuery 'hide')
// don't forget to call complete() at the end of whatever you do
// e.g.: function($ul, complete) { $ul.fadeOut(250, complete); }

    collapsibleShowDuration: 0,
// duration for show animation for collapsible sub menus - matters only if collapsibleShowFunction:null

    collapsibleShowFunction: function($ul, complete) { $ul.slideDown(200, complete); },
// custom function to use when showing a collapsible sub menu
// (i.e. when mobile styles are used to make the sub menus collapsible)

    collapsibleHideDuration: 0,
// duration for hide animation for collapsible sub menus - matters only if collapsibleHideFunction:null

    collapsibleHideFunction: function($ul, complete) { $ul.slideUp(200, complete); },
// custom function to use when hiding a collapsible sub menu
// (i.e. when mobile styles are used to make the sub menus collapsible)

    showOnClick: false,
// show the first-level sub menus onclick instead of onmouseover (i.e. mimic desktop app menus) (matters only for mouse input)

    hideOnClick: true,
// hide the sub menus on click/tap anywhere on the page

    noMouseOver: false,
// disable sub menus activation onmouseover (i.e. behave like in touch mode - use just mouse clicks) (matters only for mouse input)

    keepInViewport: true,
// reposition the sub menus if needed to make sure they always appear inside the viewport

    keepHighlighted: true,
// keep all ancestor items of the current sub menu highlighted (adds the 'highlighted' class to the A's)

    markCurrentItem: false,
// automatically add the 'current' class to the A element of the item linking to the current URL

    markCurrentTree: true,
// add the 'current' class also to the A elements of all ancestor items of the current item

    rightToLeftSubMenus: false,
// right to left display of the sub menus (check the CSS for the sub indicators' position)

    bottomToTopSubMenus: false,
// bottom to top display of the sub menus

    overlapControlsInIE: true
// make sure sub menus appear on top of special OS controls in IE (i.e. SELECT, OBJECT, EMBED, etc.)
};




Generel CSS


Fil (sm-core-css.css) med de centrale og temauafhængige CSS-selektorer.

/* Mobile first layout SmartMenus Core CSS (it's not recommended editing these rules)
You need this once per page no matter how many menu trees or different themes you use.
-------------------------------------------------------------------------------------------*/

.sm{position:relative;z-index:9999;}
.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
.sm ul{display:none;}
.sm li,.sm a{position:relative;}
.sm a{display:block;}
.sm a.disabled{cursor:not-allowed;}
.sm:after{content:"\00a0";display:block;height:0;font:0px/0 serif;clear:both;visibility:hidden;overflow:hidden;}
.sm,.sm *,.sm *:before,.sm *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}




Temaspecifik CSS

Hvert at de fire default temaer styres af sin egen specifikke CSS-fil; her 'sm-simple.css'.

Den første del af filen relaterer sig til den generelle menu, mens den sidste del relaterer sig til 'burger'-menuen.

Nederst i den første del kan der indsættes data til styring af submenuer udover nr. 5.

.sm-simple {
    border: 1px solid #bbbbbb;
    background: white;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   }
.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active {
    padding: 13px 20px;
    /* make room for the toggle button (sub indicator) */
    padding-right: 58px;
    color: #555555;
    font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 17px;
    text-decoration: none;
   }
.sm-simple a.current {
    background: #555555;
    color: white;
   }
.sm-simple a.disabled {
    color: #cccccc;
   }
.sm-simple a span.sub-arrow {
    position: absolute;
    top: 50%;
    margin-top: -17px;
    left: auto;
    right: 4px;
    width: 34px;
    height: 34px;
    overflow: hidden;
    font: bold 14px/34px monospace !important;
    text-align: center;
    text-shadow: none;
    background: rgba(0, 0, 0, 0.08);
   }
.sm-simple a.highlighted span.sub-arrow:before {
    display: block;
    content: '-';
   }
.sm-simple li {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
   }
.sm-simple > li:first-child {
    border-top: 0;
   }
.sm-simple ul {
    background: rgba(179, 179, 179, 0.1);
   }
.sm-simple ul a, .sm-simple ul a:hover, .sm-simple ul a:focus, .sm-simple ul a:active {
    font-size: 14px;
    border-left: 8px solid transparent;
   }
.sm-simple ul ul a,
.sm-simple ul ul a:hover,
.sm-simple ul ul a:focus,
.sm-simple ul ul a:active {
    border-left: 16px solid transparent;
   }
.sm-simple ul ul ul a,
.sm-simple ul ul ul a:hover,
.sm-simple ul ul ul a:focus,
.sm-simple ul ul ul a:active {
    border-left: 24px solid transparent;
   }
.sm-simple ul ul ul ul a,
.sm-simple ul ul ul ul a:hover,
.sm-simple ul ul ul ul a:focus,
.sm-simple ul ul ul ul a:active {
    border-left: 32px solid transparent;
   }
.sm-simple ul ul ul ul ul a,
.sm-simple ul ul ul ul ul a:hover,
.sm-simple ul ul ul ul ul a:focus,
.sm-simple ul ul ul ul ul a:active {
    border-left: 40px solid transparent;
   }

@media (min-width: 768px) {
    /* Switch to desktop layout
    -----------------------------------------------
       These transform the menu tree from
       collapsible to desktop (navbar + dropdowns)
    -----------------------------------------------*/
    /* start... (it's not recommended editing these rules) */
    .sm-simple ul {
       position: absolute;
       width: 12em;
       }
    .sm-simple li {
       float: left;
       }
    .sm-simple.sm-rtl li {
       float: right;
       }
    .sm-simple ul li, .sm-simple.sm-rtl ul li, .sm-simple.sm-vertical li {
       float: none;
       }
    .sm-simple a {
       white-space: nowrap;
       }
    .sm-simple ul a, .sm-simple.sm-vertical a {
       white-space: normal;
       }
    .sm-simple .sm-nowrap > li > a, .sm-simple .sm-nowrap > li > :not(ul) a {
       white-space: nowrap;
       }
    /* ...end */
    .sm-simple {
       background: white;
       }
    .sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
       padding: 11px 20px;
       color: #555555;
       }
    .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
       background: #eeeeee;
       }
    .sm-simple a.current {
       background: #555555;
       color: white;
       }
    .sm-simple a.disabled {
       background: white;
       color: #cccccc;
       }
    .sm-simple a.has-submenu {
       padding-right: 32px;
       }
    .sm-simple a span.sub-arrow {
       top: 50%;
       margin-top: -8px;
       right: 20px;
       width: 8px;
       height: 16px;
       font: 14px/16px monospace !important;
       background: transparent;
       }
    .sm-simple a.highlighted span.sub-arrow:before {
       display: none;
       }
    .sm-simple > li {
       border-top: 0;
       border-left: 1px solid #eeeeee;
       }
    .sm-simple > li:first-child {
       border-left: 0;
       }
    .sm-simple ul {
       border: 1px solid #bbbbbb;
       background: white;
       -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       }
    .sm-simple ul a {
       border: 0 !important;
       }
    .sm-simple ul a.has-submenu {
       padding-right: 20px;
       }
    .sm-simple ul a span.sub-arrow {
       right: auto;
       margin-left: -12px;
       }
    .sm-simple ul > li {
       border-left: 0;
       border-top: 1px solid #eeeeee;
       }
    .sm-simple ul > li:first-child {
       border-top: 0;
       }
    .sm-simple span.scroll-up,
    .sm-simple span.scroll-down {
       position: absolute;
       display: none;
       visibility: hidden;
       overflow: hidden;
       background: white;
       height: 20px;
       }
    .sm-simple span.scroll-up-arrow, .sm-simple span.scroll-down-arrow {
       position: absolute;
       top: -2px;
       left: 50%;
       margin-left: -8px;
       width: 0;
       height: 0;
       overflow: hidden;
       border-width: 8px;
       border-style: dashed dashed solid dashed;
       border-color: transparent transparent #555555 transparent;
       }
    .sm-simple span.scroll-down-arrow {
       top: 6px;
       border-style: solid dashed dashed dashed;
       border-color: #555555 transparent transparent transparent;
       }
    .sm-simple.sm-rtl a.has-submenu {
       padding-right: 20px;
       padding-left: 32px;
       }
    .sm-simple.sm-rtl a span.sub-arrow {
       right: auto;
       left: 20px;
       }
    .sm-simple.sm-rtl.sm-vertical a.has-submenu {
       padding: 11px 20px;
       }
    .sm-simple.sm-rtl.sm-vertical a span.sub-arrow {
       right: 20px;
       margin-right: -12px;
       }
    .sm-simple.sm-rtl > li:first-child {
       border-left: 1px solid #eeeeee;
       }
    .sm-simple.sm-rtl > li:last-child {
       border-left: 0;
       }
    .sm-simple.sm-rtl ul a.has-submenu {
       padding: 11px 20px;
       }
    .sm-simple.sm-rtl ul a span.sub-arrow {
       right: 20px;
       margin-right: -12px;
       }
    .sm-simple.sm-vertical a span.sub-arrow {
       right: auto;
       margin-left: -12px;
       }
    .sm-simple.sm-vertical li {
       border-left: 0;
       border-top: 1px solid #eeeeee;
       }
       .sm-simple.sm-vertical > li:first-child {
       border-top: 0;
       }
}


jquery-smartmenus-bootstrap.css

/*
You probably do not need to edit this at all.

Add some SmartMenus required styles not covered in Bootstrap 3's default CSS.
These are theme independent and should work with any Bootstrap 3 theme mod.
*/
/* sub menus arrows on desktop */
.navbar-nav:not(.sm-collapsible) ul .caret {
    position: absolute;
    right: 0;
    margin-top: 6px;
    margin-right: 15px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px dashed;
   }
.navbar-nav:not(.sm-collapsible) ul a.has-submenu {
    padding-right: 30px;
   }
/* make sub menu arrows look like +/- buttons in collapsible mode */
.navbar-nav.sm-collapsible .caret, .navbar-nav.sm-collapsible ul .caret {
    position: absolute;
    right: 0;
    margin: -3px 15px 0 0;
    padding: 0;
    width: 32px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
   }
.navbar-nav.sm-collapsible .caret:before {
    content: '+';
    font-family: monospace;
    font-weight: bold;
   }
.navbar-nav.sm-collapsible .open > a > .caret:before {
    content: '-';
   }
.navbar-nav.sm-collapsible a.has-submenu {
    padding-right: 50px;
   }
/* revert to Bootstrap's default carets in collapsible mode when the "data-sm-skip-collapsible-behavior" attribute is set to the ul.navbar-nav */
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret, .navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] ul .caret {
    position: static;
    margin: 0 0 0 2px;
    padding: 0;
    width: 0;
    height: 0;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-left: 4px solid transparent;
   }
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret:before {
    content: '' !important;
   }
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] a.has-submenu {
    padding-right: 15px;
   }
/* scrolling arrows for tall menus */
.navbar-nav span.scroll-up, .navbar-nav span.scroll-down {
    position: absolute;
    display: none;
    visibility: hidden;
    height: 20px;
    overflow: hidden;
    text-align: center;
   }
.navbar-nav span.scroll-up-arrow, .navbar-nav span.scroll-down-arrow {
    position: absolute;
    top: -2px;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    overflow: hidden;
    border-top: 7px dashed transparent;
    border-right: 7px dashed transparent;
    border-bottom: 7px solid;
    border-left: 7px dashed transparent;
}
.navbar-nav span.scroll-down-arrow {
    top: 6px;
    border-top: 7px solid;
    border-right: 7px dashed transparent;
    border-bottom: 7px dashed transparent;
    border-left: 7px dashed transparent;
   }
/* add more indentation for 2+ level sub in collapsible mode - Bootstrap normally supports just 1 level sub menus */
.navbar-nav.sm-collapsible ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul .dropdown-menu .dropdown-header {
    padding-left: 35px;
   }
.navbar-nav.sm-collapsible ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul .dropdown-menu .dropdown-header {
    padding-left: 45px;
   }
.navbar-nav.sm-collapsible ul ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul ul .dropdown-menu .dropdown-header {
    padding-left: 55px;
   }
.navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu .dropdown-header {
    padding-left: 65px;
   }
/* fix SmartMenus sub menus auto width (subMenusMinWidth and subMenusMaxWidth options) */
.navbar-nav .dropdown-menu > li > a {
    white-space: normal;
   }
.navbar-nav ul.sm-nowrap > li > a {
    white-space: nowrap;
   }
.navbar-nav.sm-collapsible ul.sm-nowrap > li > a {
    white-space: normal;
   }
/* fix .navbar-right subs alignment */
.navbar-right ul.dropdown-menu {
    left: 0;
    right: auto;
   }


jquery.smartmenus.bootstrap.js

Program på ca. 175 linier, der skal anvndes, når SMARTMENUS skal anvendes i Bootstrap-mode. Der er ingen parametre til programmet.
























x
x