If I define my block on the li tag, TBS only shows the first item in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="file" href="/logs/#[logs.key; block=li]">[logs.key]</a></li>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
If I define the block on the a tag, it shows all the items in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<a class="file" href="/logs/#[logs.key; block=a]">[logs.key]</a>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
What am I doing wrong here?
Related
My question is: how can I give mm-active class to the sidebar navigation on click event? (mm-active is class of jQuery metisMenu). The mm-active class must be at li tag, not on second level menu.
This is my sidebar navigation HTML structure which is inside of include folder.
<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
<div class="position-sticky sidebar-scroll">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
<span>Menu</span>
</h6>
<ul class="nav flex-column" id="metismenu">
<li class="nav-item mm-active">
<a class="nav-link" href="#" aria-expanded="true">
<span data-feather="home"></span>
<span class="category-name">Dashboard</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level" aria-expanded="true">
<li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" aria-expanded="true">
<span data-feather="settings"></span>
<span class="category-name">E-Commerce</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level mm-collapse" aria-expanded="true">
<li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
If it is in blade you can mix in some php like this:
<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
<div class="position-sticky sidebar-scroll">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
<span>Menu</span>
</h6>
<ul class="nav flex-column" id="metismenu">
#php
$activeDashboard = [
'home',
'dashboard-demographic',
'dashboard-project',
'dashboard-hospital',
'dashboard-hrm',
'dashboard-real-estate',
];
$isDashboard = Request::is($activeDashboard);
#endphp
<li class="nav-item {{ $isDashboard ? 'mm-active' : null }}">
<a class="nav-link" href="#" aria-expanded="{{ $isDashboard ? true : false }}">
<span data-feather="home"></span>
<span class="category-name">Dashboard</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level" aria-expanded="{{ $isDashboard ? true : false }}">
<li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
</ul>
</li>
#php
$activeEcommerce = [
'ecommerce-dashboard',
'ecommerce-products',
'ecommerce-product-detail',
'ecommerce-add-product',
'ecommerce-orders',
'ecommerce-cart',
'ecommerce-checkout',
];
$isEcommerce = Request::is($activeEcommerce);
#endphp
<li class="nav-item {{ $isEcommerce ? 'mm-active' : null }}">
<a class="nav-link" href="#" aria-expanded="{{ $isEcommerce ? true : false }}">
<span data-feather="settings"></span>
<span class="category-name">E-Commerce</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level mm-collapse" aria-expanded="{{ $isEcommerce ? true : false }}">
<li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
I hava a dynamic menu using VueJs and Laravel. It works fine.
But when I display one of them, all options are displayed.
The menu starts in foreach loop to check menu and assigned options.
Is there any way to restrict this?
My code is the next:
File sidebar.blade.php
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li #click="menu=0" class="nav-item">
<a class="nav-link active" href="#"><i class="icon-speedometer"></i> Escritorio</a>
</li>
<li class="nav-title">
Menú de opciones
</li>
<li class="nav-item nav-dropdown">
#foreach($menus as $menu)
<a class="nav-link nav-dropdown-toggle" href="#"><i class="{{ $menu->icono_menu }}"></i>{{ $menu->nombre }}</a>
#foreach($permisos as $permiso)
#if($menu->id==$permiso->idmenu)
<ul class="nav-dropdown-items">
<li #click="menu={{ $permiso->codigo }}" class="nav-item">
<a class="nav-link" href="#"><i class="{{ $permiso->icono_opcion }}"></i> {{ $permiso->nombre }}</a>
</li>
</ul>
#endif
#endforeach
#endforeach
</li>
<li #click="menu=27" class="nav-item">
<a class="nav-link" href="#"><i class="icon-book-open"></i> Ayuda <span class="badge badge-danger">PDF</span></a>
</li>
<li #click="menu=28" class="nav-item">
<a class="nav-link" href="#"><i class="icon-info"></i> Acerca de...<span class="badge badge-info">IT</span></a>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
I have a table and I want to find the xpath for a button that has multiple nodes to make the difference between rest of buttons
Here is the xpath
<div id="widget-results-tabs" class="">
<ul class="widget-results-list">
<li class="widget-results-list-item">
<li class="widget-results-list-item active">
<span class="active" data-action="widgetResults">Spania</span>
<ul class="widget-results-list">
<li class="widget-results-list-item">
<li class="widget-results-list-item active">
<span class="active" data-action="widgetResults">Clasament</span>
<ul class="widget-results-list widget-results-list-dropdown">
</li>
</ul>
</li>
<li class="widget-results-list-item">
<li class="widget-results-list-item">
<li class="widget-results-list-item">
<li class="widget-results-list-item">
<li class="widget-results-list-item">
<li class="widget-results-list-item">
</ul>
</div>
I want to find the xpath for "Clasament" from "Spania"
I've tried something like this
//ul/li/span[contains(.,'Spania')]/li/span[contains(.,'Clasament')]
but it doesn't work...
Can you help me with the right xpath that will contains the condition "Spania" and condition "Clasament" ?
Try below XPath to match required li node:
//li[./span='Spania']//li[./span='Clasament']
I have the top-bar nav all setup and the dropdowns are displaying as expected. However, when I click on a dropdown link, the dropdown just disappears. The page does not advance to the URI as expected.
I'm stumped...
<section class="top-bar-section second-row">
<ul>
<li class="active"><i class="fa fa-exclamation-triangle"></i><span> Alert Central</span></li>
<li class="has-dropdown">
<i class="fa fa-bar-chart"></i><span> Analytics</span>
<ul class="dropdown">
<li>System Status</li>
<li>My Use</li>
<li>My User's Use</li>
<li>Account Information</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-magic"></i><span> Filter Management</span>
<ul class="dropdown">
<li>Keywords</li>
<li>Categories</li>
<li>Locations</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-users"></i><span> User Management</span>
<ul class="dropdown">
<li>Users</li>
<li>Roles</li>
</ul>
</li>
</ul>
</section>
Did you try to add data-topbar in <section> tag ?
<section data-topbar class="top-bar-section second-row">
I'd like to make a split button dropdown with Bootstrap 3. I didn't find any working snippet.
My navbar looks like:
<header class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Example
</li>
<li>
Example
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</header>
You can place it inside the nav li and add navbar-btn to the btn-group..
<li>
<div class="btn-group navbar-btn">
<button class="btn btn-danger">Action</button>
<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</li>
Demo: http://bootply.com/100070