making movable menu items in html - javascript

Making movable menu items in html,
I have four menu items arranged in right corner of my site vertically one below the other like
Home
Services
Contact
About
Now i need On click of second element(services) the second element has come to top and first element(home) has to push down, similarly click on third element has to come to top and first has to push down .
Any help and any reference links Thanks ?

Here is how you could have the options jump straight to the top when you click them:
$(function() {
$('#menu').on('click', 'li', function(event) {
$(event.target).prependTo('#menu');
});
});
ul {
padding: 0;
}
li {
display: block;
list-style-type: none;
height: 30px;
line-height: 30px;
color: darkblue;
font-family: sans-serif;
background-color: #ddd;
padding-left: 10px;
margin: 5px 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>About</li>
</ul>
jsFiddle link

Related

JQuery - Navigation items change to 'current' based on section, scroll

I have a navigation bar that when clicked takes the user to the specific section (via id). I was wondering how I could manipulate this to make it so that the nav items change to the 'current' when the corresponding view of the section is present. I have followed many original posts however, since I already have a design, it doesn't seem to work effectively. Any help would be greatly appreciated.
HTML:
<nav id="primary-menu" class="dark">
<ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">
<li class="current"><div>Home</div></li>
<li><div>About</div></li>
<li><div>Website</div></li>
<li><div>Mobile App</div></li>
<li><div>Portfolio</div></li>
<li><div>Pricing</div></li>
<li><div>Testimonials</div></li>
<li><div>Contact</div></li>
<!--<i class="icon-angle-down infinite animated fadeInDown"></i>-->
</ul>
</nav>
CSS:
#primary-menu {
float: right;
}
#header.full-header #primary-menu > ul {
float: left;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #EEE;
}
#primary-menu ul {
list-style: none;
margin: 0;
}
#page-menu nav {
position: relative;
float: right;
}
#page-menu nav ul {
margin-bottom: 0;
height: 44px;
}
Using bootstrap scrollspy can help with this
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_scrollspy_js&stacked=h
Please refer to this link which has the example which you are looking for

Wordpress slide down menu

i tried to implement a jquery slide down menu in my wordpress blog.
Sadly it is not working at all. I will show the submenu when i click on the parent menu point. Here is my html code:
<ul id="menu-sidebarmenue" class="menu">
<li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-37">Parentmenu
<ul class="sub-menu">
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">Submenu 1</li>
</ul>
</ul>
my Css:
ul{
margin:0;
padding:0;
list-style-type: none;
}
li{
margin:0;
padding:0;
list-style-type: none;
}
.menu-item {
width: 225px;
display: inline-block;
color: black;
text-decoration: none;
font-size: 11px;
font-weight: normal;
padding: 5px 0;
cursor: pointer;
border-top: black dotted 1px;
}
.sub-menu {
float: left;
display: inline-block;
color: black;
padding: 10px 0px 15px 5px;
text-decoration: none;
font-size: 11px;
font-weight: normal;
}
and my Javascript:
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.menu-item-has-children').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.menu-item-has-children').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.sub-menu').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.menu-item-has-children').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/
$('.sub-menu').hide();
});
can anyone help me with my code?
Would be very nice. Thank you a lot!
EDIT::
Hi, i got the problem now when i have more than one dropdown menu and i click on one, that all other open as well. can you help me how i can fix this that just .this object slides down?
That's because the jQuery you are using is referencing to HTML elements that you do not use.
In your HTML, there are no classes on or off.
Also, you only have one slide, so the functions for closing slides do not work correctly.
If you just want to toggle the .slideDown() and .slideUp() animations on the submenu, you can do this:
$(document).ready(function() {
$('.sub-menu').hide();
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.menu-item-has-children').click(function() {
$('.sub-menu').slideToggle('normal');
});
});
This works for a simple sliding animation. See what I mean in this demo:
DEMO

Menu won't slide back up once user go to new page

I'm creating a web app that has a custom responsive menu. It's just your basic three list-item menu dropdown. When user clicks "hamburger" icon, it slides down. When they click on the "X", it slides up.
The problem having is that when the user clicks the "hamburger" icon in the mobile menu's closed state and then they click another link on the page outside of the mobile menu, the menu stays in its open/slid down state and becomes unusable unless the user reloads the page.
What do I need to put in my JS function or my CSS to prevent this behavior? I appreciate the help.
The code:
HTML:
<nav class="home-header-content__nav--menu">
<ul>
<li>About</li>
<li>Terms</li>
<li>Help</li>
</ul>
</nav>
<nav class="home-header-content__nav--mobile-menu">
<i class="fa fa-bars"></i>
<i class="fa fa-times"></i>
<ul>
<li>About</li>
<li>Terms</li>
<li>Help</li>
</ul>
</nav>
CSS (only the relevant stuff):
.home-header-content__nav--menu {
#media (max-width: $site-screen__iphone5s--landscape + 1px) {
display: none;
}
}
.home-header-content__nav--mobile-menu {
display: none;
text-align: right;
position: relative;
.fa {
font-size: 28px;
&:hover {
color: $site-color__secondary;
#include transition(0.2s ease-in);
cursor: pointer;
}
}
.fa-times {
display: none;
}
ul {
text-align: right;
font-weight: 700;
position: absolute;
top: 40px;
right: 0px;
background-color: $site-color__secondary;
border-radius: 5px;
padding: 10px 10px 10px 20px;
font-size: 18px;
}
a {
color: $site-color__white;
&:hover {
color: $site-color__secondary--darker;
}
}
#media (max-width: $site-screen__iphone5s--landscape) {
display: inline-block;
}
}
Javascript:
$(function responsiveHomeMenu(){
// Store content nodes in DOM
var $menuIcon = $('.home-header-content__nav--mobile-menu .fa');
var $menuList = $('.home-header-content__nav--mobile-menu ul');
// Hide menu links by default
$menuList.hide();
// Toggle menu with icon
$menuIcon.on("click", function(e){
$menuIcon.toggle();
$menuList.slideToggle(300);
$(document).off("click",function(){
$menuList.toggle();
})
});
});
Try this
// Toggle menu with icon
menuIcon.on("click", function(e){
menuIcon.slideToggle();
menuList.slideToggle(300);
});
$(document).on("click",function(){
menuList.slideUp();
});
});

JQuery not working properly in firefox and chrome

I am currently developing an ASP.NET webpage and I have run into the most irritating problem I have ever encountered.
I have been researching this problem for the past three days, and cannot find anybody who has even had this problem, let alone any solutions.
I have created a menu/submenu with HTML/CSS, and I am adding some kind of toggling effect to the submenu to make it either slide down or fade in (I've tried both, and both yield the same result).
In Internet Explorer, it works great. I can hover over the menu, it'll slide down or fade in correctly, then when I move the mouse away it'll disappear.
In Chrome/Firefox, I'm not so lucky. The submenu starts out hidden, then if I hover over it once, it will appear. If I move the mouse away, it instantly closes and then re-opens on its own. At this point, it's beyond return. If I hover over it, it disappears, and if I move the mouse away again, it'll re-appear. This will continue to happen until the page reloads.
Here is the menu in HTML...
<ul id="menu">
<li>Home</li>
<li>Services
<ul id="submenu">
<li>Custom CRM</li>
<li>Website Development</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
</ul>
As for the CSS pertaining to this menu, this is it...
#menu
{
padding:0;
text-align: center;
margin: 0;
width: 100%;
}
#menu li
{
height: 35px;
float: left;
list-style: none;
width: 25%;
font-size: larger;
cursor: pointer;
position: relative;
}
#menu li a
{
display: block;
height: 35px;
text-decoration: none;
color: White;
font-weight: bold;
padding-top: 5px;
}
#menu li:hover
{
background-color: #4CC417;
}
#menu li:hover ul
{
display: block;
}
#menu ul
{
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
top: 36px;
width: 140%;
display: none;
list-style: none;
left: 0;
}
#menu ul li
{
text-align: left;
font-size: medium;
width: auto;
float: none;
background-color: #387C44;
color: White;
font-weight: bold;
padding-left: 5px;
}
#submenu ul
{
display: none;
z-index: 999;
}
#submenu
{
display: none;
}
And finally, here is the JQuery code I created for this...
<script type="text/javascript">
$(document).ready(function () {
$("#menu ul").parent().hover(function () {
$("#submenu").stop(true, true).fadeToggle("slow");
});
});
</script>
Any help is greatly appreciated. Thank you!
--Mark
http://jsfiddle.net/9LEMZ/3/
Is this what your after? (If not please feel free to direct me further!)
I've changed the jquery completely to fade in the sub elements, initially hiding the submenu. Also removed the display:none from the css to aid in this (as its now hidden through .hide() )
Cheers,
Primarily, hover accepts two function parameters (one for mouseover and one for mouseout). Second, I'm going to recommend using on:
$('#menu > li').on({
mouseover: function() {
$(this).children('ul').slideDown(300);
},
mouseout: function() {
$(this).children('ul').stop(true, false).hide();
}
});
Through jQuery's checks and balances, it will return if the li has no child ul.

Problem with sub-menu showing/hiding on click

I followed a great example of how to make a sub-menu appear/disappear on click here and made it work. Quite an accomplishment since I'm just starting with javascript. But just as I made it work a few other problems came up, I'll try to explain:
1.- I have a vertical main menu and one of the options, 'Products' has a sub-category that opens on hover below the parent item. When selecting one of its sub-categories, a bigger menu shows up in a new div to the right of the main menu. When this happens, the selected sub-category changes color and displays a bullet so the user knows which sub-category they are viewing. I was doing this using PHP to detect the current page and assign an "active" id. But when I had it like that the sub-menu show/hide didn't work and all the options were showing when first entering the page. So I changed the link reference from "page.php" to "#" ­---which makes more sense since that option is not meant to be a link rather than just display another sub-menu but had to include it for the sake of displaying the 'active' id--- and now the show/hide works except after I click a sub-category, the menu to the right opens, but the previously selected sub-category that opens on hover closes and the php detect function doesn't work because I changed the reference to "#" and the link doesn't show an 'active' status; in fact, the 'home' option stays selected even when the second div is already showing.
It sounds confusing, I know. Here's the example, I hope it's clear what I'm trying to do. I'd appreciate if anyone knows a way around this.
2.- Once I can get this fixed, is there a way to make the second div slide from left to right instead of fading in?
Thanks in advance :)
See my update to your code.. http://jsfiddle.net/Jaybles/tkVfX/4/
CSS
.mainNav {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #e21a22;
}
.active{
font-weight:bold;
}
.mainSide {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 40px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
.mainSide li a, .mainSide li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
.mainSide ul li a {
width: 125px;
list-style: none;
padding: 6px 0 2px 18px;
}
.mainSide li a:hover {
color: #fdb046;
}
.mainSide li a#active, .mainSide ul li a#active {
color: #fdb046;
background: url("../img/bullet.jpg") right center no-repeat;
}
#subNavSys, #subNavApp, #subNavAcc {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #414143;
display:none;
}
#subSideSys, #subSideApp, #subSideAcc {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 163px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover {
color: #fdb046;
HTML
<div class="mainNav">
<img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" />
<ul class="mainSide">
<li>Home</li>
<li>About us</li>
<li>Products
<ul>
<li>By system</li>
<li>By application</li>
<li>Accesories</li>
</ul>
</li>
</ul>
</div>
<div id="subNavSys">
<ul id="subSideSys">
<li>Sub-menu-1.1</li>
<li>Sub-menu-1.2</li>
<li>Sub-menu-1.3</li>
</ul>
</div>
<div id="subNavApp">
<ul id="subSideApp">
<li>Sub-menu-2.1</li>
<li>Sub-menu-2.2</li>
<li>Sub-menu-2.3</li>
</ul>
</div>
<div id="subNavAcc">
<ul id="subSideAcc">
<li>Sub-menu-3.1</li>
<li>Sub-menu-3.2</li>
<li>Sub-menu-3.3</li>
</ul>
</div>
JS
$(document).ready(function(){
$("#sys").click(function() {
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#app").click(function() {
$("#subNavSys").hide();
$("#subNavAcc").hide();
$("#subNavApp").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#acc").click(function() {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
});

Categories