Menus and Custom Menus in Bootstrap

Modified on Fri, Feb 9, 2018 at 9:19 AM

{Menu} Options

STANDARD MENU

{Menu} Replaced by a standard navbar menu. Code:

<nav class="navbar navbar-static-top" role="navigation">

<div class="navbar-header">

<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="collapse navbar-collapse navbar-ex1-collapse">

<ul class="nav navbar-nav">

<li><a href="/Store/Site/Home.aspx"><i class="fa fa-home text-primary"></i> Home</a></li>

<li><a href="/Store/Site/Layout/Catalogue.ashx">Store</a></li>

...

</ul>

</div>

</nav>

STANDARD MENU with Brand and Classes

{Menu:nav element class name: ul element class name:brand^url:all or list of cultures(en-us;fr-fr)^Size}

Example: {Menu:navbar-inverse navbar-fixed-top:container:RACAD^http%3A//www.racadtech.com^3}

Default Size in Menu is 2 (24px), 3 is for 32px.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="navbar-header">

<a class="navbar-brand" href="http://www.racadtech.com">RACAD</a>

<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<div class="collapse navbar-collapse navbar-ex1-collapse">

<div class="container">

<ul class="nav navbar-nav">

<li><a href="/Store/Site/Home.aspx"><i class="fa fa-home text-primary"></i> Home</a></li>

<li><a href="/Store/Site/Layout/Catalogue.ashx">Store</a></li>

...

</ul>

</div>

</div>

</nav>

Culture structure

<li class="dropdown ep-flag-menu-dropdown" style="display:inline-block;">

<a href="#" class="dropdown-toggle" id="dropdownMenuCul" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

<img src="/path to image/ca.png">

<span class="caret"></span>

</a>

<ul class="dropdown-menu ep-flag-ul" aria-labelledby="dropdownMenuCul">

<li class="">

<a href="/Store/Site/Home.aspx?QQ=1&CUL=en-us">

<img src="/ path to image /us.png" alt="English USA">

</a>

</li>

<li class="">

<a href="Store/Site/Home.aspx?QQ=1&CUL=en-ca">

<img src="/pathtoimage/ca.png" alt="English Canada">

</a>

</li>

<li class="">

<a href="/Store/Site/Home.aspx?QQ=1&CUL=en-gb">

<img src="/path to image/gb.png" alt="English UK">

</a>

</li>

<li class="">

<a href="/Store/Site/Home.aspx?QQ=1&CUL=fr-fr">

<img src="/path to image/fr.png" alt="français">

</a>

</li>

<li class="">

<a href="/Store/Site/Home.aspx?QQ=1&CUL=es-es">

<img src="/path to image/es.png" alt="español">

</a>

</li>

</ul>

</li>

CUSTOM MENU

{Menu_xx} Replace by a custom menu, xx represents a number that is generated when creating the menu.