remove label of menu - javascript

Is it possible on JS to remove a label of a menu? I want to remove the text on the anchor menu without changing anything on the html. In replace of removing the menu I will add a new label via CSS using pseudo element before.
HTML:
<div class="navlink">
<ul>
<li class="page_item page-item-2 current_page_item active">About</li>
<li class="page_item page-item-6">Skills</li>
<li class="page_item page-item-4">Project</li>
<li class="page_item page-item-8">Contact</li>
</ul>
</div>
CSS:
.navlink li a:before { content:'1'; }
I think using CSS can achieve this. Fiddle


Using CSS only.
HTML:
<div class="navlink">
<ul>
<li class="page_item page-item-2 current_page_item active">About</li>
<li class="page_item page-item-6">Skills</li>
<li class="page_item page-item-4">Project</li>
<li class="page_item page-item-8">Contact</li>
</ul>
</div>
CSS:
.navlink li a:before { content:'1'; visibility: visible; }
.navlink li a { content: ''; visibility: hidden; }
FIDDLE

Related

jquery menu with slide from left for sub menus

I wanted to slide sub menus from left or right if i click on li.menu-items for each item of a menu which have sub menus. here is my html markup
<ul class="menu">
<ul>
<li class="menu-item">
<a href="#">item 1
</a>
<ul class="sub-menu">
<li class="menu-item">
item 2
</li>
<li class="menu-item">
<ul class="sub-menu">
<li><a href="">item 1</li></li>
<li><a href="">item 1</li></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
item 4
<ul class="sub-menu">
<li class="menu-item">
item5
</li>
<li class="menu-item">
item 6
</li>
</ul>
</li>
<li class="menu-item">item 7</li>
<li class="menu-item">item 8</li>
</ul>
</ul>
if I click on menu item which have sub-menu then the sub menu will open from slide left or right and other menu items should be hide and a back button should be there at top left to back on main menu
here is my js
$('.menu-item').click(function(e){
if ($('.sub-menu', this).length >=1) {
e.preventDefault();
}
$(this).siblings().find('> .sub-menu').hide();
$(this).find('> .sub-menu').slideLeft();
e.stopPropagation();
});
please help me for this

I don't think is there any function in jQuery like slideLeft as far as I know. although you can do it with jQuery UI with a little trick like this.
$(this).show("slide", { direction: "left" }, 1000);
but I will prefer a custom CSS example based on jQuery classes.
check below code example. if you need anything else. please let me know.
and yes you also did a small mistake: you are having a UL direct child of your Menu UL, Ul can only have LI as a direct child, Correct it and pls close all the tags properly.
$('.menu-item').click(function(e) {
if ($('.sub-menu', this).length >= 1) {
e.preventDefault();
}
debugger;
$(this).siblings().find('> .sub-menu').removeClass('open');
$(this).find('> .sub-menu').addClass("open");
e.stopPropagation();
});
$('.back').click(function(e){
$(this).closest('.sub-menu').removeClass('open');
e.stopPropagation();
})
.menu {
background: #cccccc;
position: relative;
}
* {padding :0; margin: 0; box-sizing: border-box;}
.sub-menu {
display: block;
position: absolute;
height: auto;
width: 100%;
left: -100%;
transition: all 0.5s;
top: 0%;
}
.sub-menu.open {
left: 0;
background: #666;
}
.back {cursor: pointer; margin-bottom: 20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item">
item 1
<ul class="sub-menu">
<li class="back">back</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
<ul class="sub-menu">
<li class="back">back</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
item 4
<ul class="sub-menu">
<li class="back">back</li>
<li class="menu-item">
item5
</li>
<li class="menu-item">
item 6
</li>
</ul>
</li>
<li class="menu-item">item 7</li>
<li class="menu-item">item 8</li>
</ul>

My code is not jQuery but I hope it works for you.
var x = document.getElementsByClassName('menu');
var y = x[0].getElementsByTagName('a');
for (let i = 0; i < y.length; i++) {
y[i].addEventListener("click", function () {
var z = this.nextElementSibling;
if(z){
var s = z.getAttribute('style');
if(s === 'display:none;') {
z.setAttribute('style', 'display:block;')
} else {
z.setAttribute('style', 'display:none;')
}
}
});
}
<ul class="menu">
<ul>
<li class="menu-item">
item 1
<ul class="sub-menu">
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
<ul class="sub-menu">
<li class="menu-item">
item 4
</li>
<li class="menu-item">
item 5
</li>
</ul>
</li>
<li class="menu-item">
item 6
</li>
</ul>
</li>
</ul>
</ul>

Filter li elements in ul and preserve path

I'm trying to expand my filtering function for li elements in ul.
My ul structure looks like this:
<ul>
<li class="root"><span class="text">Root1</span>
<ul>
<li class="list"><span class="text">li1.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="text">Root2.1</span>
<ul style="display: block;"></ul>
</li>
<li class="root"><span class="text">Root2.2</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.2.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.1</span></li>
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="root"><span class="text">Root3</span>
<ul>
<li class="list"><span class="text">li3.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root4</span>
<ul>
<li class="list"><span class="text">li4.1</span></li>
<li class="list"><span class="text">li4.2</span></li>
</ul>
</li>
</ul>
Currently I have filter function that filters based on query among .list elements. Now I'm trying to implement it in a way, that while filtering list (still only .list elements), there would be structure history.
For example: searching for "li2.3.2" would return:
<ul>
<li class="root"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
EDIT: For clarification and since I failed to mention that in original post...I'm trying to filter by users input (partial matching counts).
My current method works by taking users input in text input box, taking all .list elements in ul and comparing for each element if span.text contains searching text.

you should give class every floor,and use CSS filter :parent and :nth-chiled find what you want

#pc9529, yes it is possible. but here you want o display only parent li node html. So give different class to the li which is belonging from your parent UL. Look at the given solution,
$(document).ready(function(){
$("li").click(function(e){
e.stopPropagation();
if($(this).hasClass("root1"))
{
alert($('<div>').append($(this).clone()).html());
}
else{
alert($('<div>').append($(this).closest(".root1").clone()).html());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="root1"><span class="text">Root1</span>
<ul>
<li class="list"><span class="text">li1.1</span></li>
</ul>
</li>
<li class="root1"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="fa fa-chevron-down"></span><i class="fa root-checkbox fa-square-o"></i><span class="text">Root2.1</span>
<ul style="display: block;"></ul>
</li>
<li class="root"><span class="text">Root2.2</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.2.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.1</span></li>
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="root1"><span class="text">Root3</span>
<ul>
<li class="list"><span class="text">li3.1</span></li>
</ul>
</li>
<li class="root1"><span class="text">Root4</span>
<ul>
<li class="list"><span class="text">li4.1</span></li>
<li class="list"><span class="text">li4.2</span></li>
</ul>
</li>
</ul>

Please have a look at this JSFiddle
The JQuery finds your item by text, then find all parents that contain the ".root" class, and finally gets the last parent i.e. the root ul element of the hierarchy.
$('.list:contains("li2.3.2")').parents('.root').last().html()

Jquery Focus on dropdown is not functioning

I have trouble trying to figure out the dropdown for my list.It is similar to ul li:hover ul li.What im trying to figure out is like ul li:focus ul li but in jquery since i dont think doing it in css works.The goal im trying to get at is when i click on the ul li the ul li drops down.
Html
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Home</li>
<li class="navbar-tab-1 select">Searches
<ul class="hover-list select">
<li><a>Search</a></li>
<li><a>Rocks</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Engagement Rings
<ul class="hover-list select">
<li><a>Verragio</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Services
<ul class="hover-list select">
<li>Repair</li>
</ul>
</li>
</ul>
</nav>
jquery
$(".navbar-tab-1").focus(function(){
$(".hoverlist li").css("display","block").fadeOut();
});

You have several issues in your code:
focus do not work with the ul element. You can use hover for that.
You need to change your class selector to .hover-list instead of .hoverlist
You should initially set display:none to all .hover-list elements so that when you hover over the ul they are displayed.
Use fadeIn() to show them in fade in effect.
You can use cursor: pointer; css for you ul elements to have a proper cursor pointer for the links
$(".navbar-tab-1").hover(function(){
$('.hover-list').css("display","none");
$(this).find(".hover-list").css("display","block").fadeIn();
});
.hover-list{
display: none;
}
.navbar-tab-1{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Home</li>
<li class="navbar-tab-1 select">Searches
<ul class="hover-list select">
<li><a>Search</a></li>
<li><a>Rocks</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Engagement Rings
<ul class="hover-list select">
<li><a>Verragio</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Services
<ul class="hover-list select">
<li>Repair</li>
</ul>
</li>
</ul>
</nav>
If you also want to hide the li items when mouse is not hovering over the ul then you can use the mouseover and mouseout event instead of hover:
$(".navbar-tab-1").mouseover(function(){
$('.hover-list').css("display","none");
$(this).find(".hover-list").css("display","block").fadeIn();
});
$(".navbar-tab-1").mouseout(function(){
$('.hover-list').css("display","none");
});
.hover-list{
display: none;
}
.navbar-tab-1{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
<div class="dropdown-btn">Go To...</div>
<ul class="navbar-tab">
<li class="navbar-tab-1 selected">Home</li>
<li class="navbar-tab-1 select">Searches
<ul class="hover-list select">
<li><a>Search</a></li>
<li><a>Rocks</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Engagement Rings
<ul class="hover-list select">
<li><a>Verragio</a></li>
</ul>
</li>
<li class="navbar-tab-1 select">Services
<ul class="hover-list select">
<li>Repair</li>
</ul>
</li>
</ul>
</nav>

make child ul slide-down on page load

My HTML is like this
<div id="cssmenu">
<ul>
<li class="has-sub open ">
<a href="/rigging.aspx " > rig </a>
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
</ul>
on page load if any <li> has class open I want its child <ul> element to be slide down. I have written something like this
$(document).ready(function () {
if ($('#cssmenu li').hasClass('open')) {
$(this).children('ul').slideDown();
}
}
But its not working (slide down not happens) can any one point out what I am missing here?

This selects all ul children of li which have the class .open and applies slideDown.
$('#cssmenu li.open > ul').slideDown();
$('li.has-sub > ul').slideDown();
.has-sub > ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="has-sub open ">
rig
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
<li class="has-sub open ">
rig
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
<li class="has-sub">
rig
<ul>
<li class="has-sub ">
rigging
</li>
<li class="has-sub ">
rig-3
</li>
</ul>
</li>
</ul>

Drop down menu animation gets stuck

The animation of the drop down menu gets stuck while it is supposed to create a slide effect animation
JSFiddle link: http://jsfiddle.net/uqcLn/73/
This is the css that may have caused the problem but it is necessary to my code
(it makes the bottom div's of my site stationary) so it cannot be changed.
#nav ul ul {
display: none;
z-index: 1000;
}
#nav ul li:hover > ul {
position: absolute;
display: block;
}

With this your code is already more valid
<div id="top_menu">
<div id="logo"><img src="images/logo.png"></div>
<div id="nav">
<ul>
<li class="links_wrapper">ABOUT US
<ul class="dropdown">
<li>About us</li>
<li>Our Vision</li>
<li>Our Technology</li>
<li>Our Customers</li>
</ul></li>
<li class="links_wrapper">SOLUTIONS
<ul class="dropdown">
<li> Solutions</li>
<li>General Descreption</li>
<li>Detailed Descreption</li>
</ul></li>
<li class="links_wrapper">CUSTOMERS
<ul class="dropdown">
<li> Solutions</li>
<li>General Descreption</li>
<li>Detailed Descreption</li>
</ul></li>
<li class="links_wrapper">CONTACT US
<ul class="dropdown">
<li>Solutions</li>
<li>General Descreption</li>
<li> Descreption</li>
</ul></li>
</ul>
<div id="login">LOGIN</div>
<div id="lang_btn">He En
</div><!--close nav-->
</div><!--top menu-->
You should from time to time test your code inside W3C's validator
http://validator.w3.org/

Categories

Resources