Dropdown submenu selection - javascript

My Javascript
var selectmenu = function(index, sub){
$('.main-navigation-menu li:nth-child('+index+')').addclass('active');
}
In my view there are two li tags to select main menu and sub menu; so because of the above JS, it is always selecting a 1st main menu and the 1st sub menu; even when clicking the 2nd sub menu of the 1st main menu... anyone knows how to correct this behavior? Here I wanted to use the 'sub' variable and do something like this:
$('.sub-menu li:nth-child('+index+')').removeClass('active');
$('.sub-menu li:nth-child('+sub+')').addClass('active');
HTML
<ul class="main-navigation-menu ">
#foreach (var menu in mainmenu) {
var sublist = userContext.Menus.Where(m => m.Id == menu.Id);
if (sublist.Count == 0){
<li class="active open">
<a href="#Url.Content(menu.MenuUrl)">
<span class="title"> #menu.Name </span>
<span class="selected"></span>
</a>
</li>
}
else {
<li class="main-menu-selection">
<a href="#menu.MenuUrl">
<span class="title">#menu.Name</span>
<i class="fa fa-chevron-down pull-right"></i>
<span class="selected"></span>
</a>
#if (sublist.Count > 0) {
<ul class="sub-menu">
#foreach (var sub in sublist) {
<li class="sub-menu-selection">
<a href="#Url.Content(sub.MenuUrl)">
<span class="title"> #sub.Name </span>
</a>
</li>
}
</ul>
}
</li>
}
count++;
}
</ul>

Try using stopPropagation:
$('.main-navigation-menu').on('click', '.sub-menu-selection', function(e){
var index;
e.stopPropagation();
$('.min-navigation-menu .active').removeClass('active');
$(e.currentTarget).addClass('active');
});
More info here

Related

Not able to add active class that matches current open page to list item of menu

I am having problem while adding the active class to the currently open page. I tried other solutions available on StackOverflow, but nothing worked for me. I think it is because I have ~/ in my link href element. Thanks in advance.
<script>
$(document).ready(function () {
var current = location.pathname;
$('#indexmenu li a').each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
$this.addClass('active')
}
})
})
</script>
<div class="navbar-collapse collapse mancolor" id="adminmenu">
<ul class="nav navbar-nav mancolor" id="indexmenu">
<li><a href="~/Default.aspx" class="active" runat="server">
<span><i class="glyphicon glyphicon-dashboard"></i></span>
<span>Main Screen</span>
</a>
</li>
<li><a href="NewWorkShopVisit.aspx" runat="server">
<span class="fa fa-shopping-cart"></span>
<span>New Workshop Visit</span>
</a>
</li>
<li><a href="Index.aspx" runat="server">
<span><i class="fa fa-cogs"></i></span>
<span>Workshop Control Panel</span>
</a>
</li>
<li><a href="Employees.aspx" runat="server">
<span><i class="fa fa-user-circle-o"></i></span>
<span>Employees</span>
</a>
</li>
</ul>
</div>
You might check if the first character is a ~ and if it is, return the string without it:
$(document).ready(function () {
var current = location.pathname;
$('#indexmenu li a').each(function () {
var $this = $(this);
var href = $this.attr('href');
if (href.charAt(0) === '~') href = href.substr(1);
if (href.indexOf(current) !== -1) {
$this.addClass('active')
}
})
})
$(document).ready(function() {
var current = '/Default.aspx'
$('#indexmenu li a').each(function() {
var $this = $(this);
var href = $this.attr('href');
if (href.charAt(0) === '~') href = href.substr(1);
if (href.indexOf(current) !== -1) {
$this.addClass('active')
}
})
})
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse collapse mancolor" id="adminmenu">
<ul class="nav navbar-nav mancolor" id="indexmenu">
<li>
<a href="~/Default.aspx" runat="server">
<span><i class="glyphicon glyphicon-dashboard"></i></span>
<span>Main Screen</span>
</a>
</li>
<li>
<a href="NewWorkShopVisit.aspx" runat="server">
<span class="fa fa-shopping-cart"></span>
<span>New Workshop Visit</span>
</a>
</li>
<li>
<a href="Index.aspx" runat="server">
<span><i class="fa fa-cogs"></i></span>
<span>Workshop Control Panel</span>
</a>
</li>
<li>
<a href="Employees.aspx" runat="server">
<span><i class="fa fa-user-circle-o"></i></span>
<span>Employees</span>
</a>
</li>
</ul>
</div>

How to select value of dropdown with ul

Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?
First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>

How do I make my sidebar navigation child menus remain expanded and active on new HTTP request in Laravel?

I have an issue with my child menus.When I click a child menu it becomes active after http request but I want it to remain expanded after http request(page refresh).Menu structure is below.
<ul class="sidebar-navigation>
#foreach($parent as $parent)
<li>{{$parent->name}}
<ul>
#foreach($child as $child)
#if(isset($_GET['name']) && $_GET['name'] == $child->name)
<li class="active">
#endif
{{$child>name)}}
</li>
#endforeach
</ul>
</li>
#endforeach
</ul>
Here is an idea, and it's what i do to acheieve this effects. i use AdminLTE, you should base this code to change your code, Basic idea is judge current route if route need open sidebar then give a class 'active'
to html tag.
Html:
<div class="main-sidebar">
<div class="sidebar">
<ul class="sidebar-menu">
<li class="treeview {{ sidebar_open(['admin.roles.*']) }}">
<a href="#">
<i class="fa fa-user-secret"></i>
<span>角色管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>角色列表</li>
<li><i class="fa fa-circle-o"></i>新建角色</li>
</ul>
</li>
</ul>
define a helper functions:
<?php
if (!function_exists('sidebar_open')) {
function sidebar_open($routes = []) {
$currRoute = Route::currentRouteName();
$open = false;
foreach ($routes as $route) {
if (str_contains($route, '*')) {
if (str_contains($currRoute, substr($route, '-1'))) {
$open = true;
break;
}
} else {
if ($currRoute === $route) {
$open = true;
break;
}
}
}
return $open ? 'active' : '';
}
}

Perform jQuery action when clicked again

I have the basis of my menu working, where when I click a menu element, it opens (similar to JQuery accordion), and when I click on another element in the menu, the previously opened menu closes and the newly clicked on opens. Here's what it looks like:
Now, I'm trying to implement functionality to close the currently opened menu if it is clicked again. I'm using the slideUp(); method, but having a hard time figuring out where to put the additional code for the 2nd click on the same element.
Here's what I have:
navigation.html.erb
<!-- menu links -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>Dashboard
</li>
</ul>
</li>
<li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>General Elements
</li>
</ul>
</li>
<li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>Chart JS
</li>
</ul>
</li>
</ul>
</div>
</div>
custom.js
var URL = window.location,
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');
var setContentHeight = function () {
// reset height
$RIGHT_COL.css('min-height', $(window).height());
var bodyHeight = $BODY.height(),
leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;
// normalize content
contentHeight -= $NAV_MENU.height() + $FOOTER.height();
$RIGHT_COL.css('min-height', contentHeight);
};
$SIDEBAR_MENU.find('a').on('click', function(ev) {
var $li = $(this).parent();
if ($li.hasClass('.active')) {
$li.removeClass('active');
$('ul:first', $li).slideUp(function(){
setContentHeight();
});
} else {
$li.addClass('active');
$SIDEBAR_MENU.find('.side-menu li').not($li).removeClass('active');
$SIDEBAR_MENU.find('.side-menu li').not($li).find('.child_menu').removeClass('active').slideUp();
$('ul:first', $li).slideDown(function(){
setContentHeight();
});
}
});
Change if ($li.hasClass('.active')) to if ($li.hasClass('active')) and that should resolve the issue. Check this fiddle. I have created an empty setContentHeight function to make it work.

Menu behaves differently in IE

I'm working on a site that works as expected in Chrome but opening it in Internet Explorer a see that the navigation menu is out of place.
Investigating the problem a saw that not all the list items are wrapped inside the main ul and 2 list items do not have the correct class.
The one with the problem:
The correct one:
My project is made using ASP.NET MVC 4 and Umbraco CMS. The menu View looks like this:
<ul class="nav">
<li class="#(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="#item.Url">#item.Name</a>
#{ var subMenuItems = item.Children.Where("Visible"); }
#if (subMenuItems.Count() > 0)
{
<ul>
<li>
#foreach (var sub in subMenuItems)
{
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<img src="#Umbraco.Field(sub, "menuItemImage", recursive: true)">
</div>
<div class="NavItemDesc">
<a href="#sub.Url">
<span>#sub.Name</span><br>
<span>#sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<li><a class="parent" href="#sub.Url">#sub.Name</a></li>}
}
</li>
</ul>
}
</li>
}
</ul>
This works fine in Chrome, and cant seem to find the problem for IE.
You should have a new list item for each submenu rather than wrapping all the submenus in one list item (or otherwise nesting list items without separating them into proper nested lists with a ul wrapper).
<ul class="nav">
<li class="#(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="#item.Url">#item.Name</a>
#{ var subMenuItems = item.Children.Where("Visible"); }
#if (subMenuItems.Count() > 0)
{
<ul>
#foreach (var sub in subMenuItems)
{
<li>
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<img src="#Umbraco.Field(sub, "menuItemImage", recursive: true)">
</div>
<div class="NavItemDesc">
<a href="#sub.Url">
<span>#sub.Name</span><br>
<span>#sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<a class="parent" href="#sub.Url">#sub.Name</a>}
</li>
}
</ul>
}
</li>
}
</ul>

Categories

Resources