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
Related
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
I was wondering if anyone could help me out. I'm trying to make a simple folio site, and I have this link in the top nav that when clicked on would appear a horizontal menu underneath the header. So far I have goten it to work with just css, but I don't like how the menu appears when hovered, it would look much more professional if it appeared when clicked and stayed there until you click on the same link again. if anyone could help me that'll be great. I've tried all sorts of java tutorials and won't very successful I didn't fully understand it.
<header>
<a class="home" href="../index.htm" title="Home Page"></a>
<a class="to_nav" href="#nav" ></a>
<div class="logo">
<a href="#top">
<h1>Deeran</h1>
<span>Graphic Design</span>
</a>
</div>
<nav>
<ul class="drop">
<li>
<a id="menu"></a>
<ul class="hide">
<li>Portfolio</li>
<li>About</li>
<li>Contact/Hire</li>
</ul>
</li>
</ul>
</nav>
</header>
And here's the css
nav {margin: 0; padding: 0;}
nav ul li a#menu {
display: block;
width: 67px;
height: 50px;
position: absolute;
right: 0px;
top: 0px;
margin-top: 9px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}
nav ul ul.hide {
display: none;
list-style: none;
margin: 10px 0 0;
text-indent: none;
clear: both;
width: 100%;
position: absolute;
left: 0px;
}
nav ul ul.hide li {margin: 0;}
nav ul li:hover > ul {
display: block;
list-style-type: none;
}
if there was one simple way to convert that one :hover function to onClick I would be very grateful :)
make
nav ul li:hover > ul {
display: block;
list-style-type: none;
}
to
nav ul li.active > ul {
display: block;
list-style-type: none;
}
Then use javascript to add a class active onClick.
What makes SO wonderful is that we can refer to similar cases easily :)
For javascript part please refer this answer .
Add/Remove class onclick with JavaScript no librarys
The 'click' event cannot be listened for with css. Remove your :hover rule and add some JavaScript. In the code you provided, you don't have anything in the #menu element for the user to click on, so I added some text for the fiddle.
http://jsfiddle.net/Fc75u/
JavaScript:
var toggle = document.getElementById('menu');
var menu = document.getElementsByClassName('hide');
toggle.addEventListener('click', function(event) {
menu[0].style.display == "block" ? menu[0].style.display = "none" : menu[0].style.display = "block";
});
jQuery:
$('#menu').click(function () {
$('.hide').toggle();
});
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.
At the moment, I'm developing a layout for work, and I'm just a tiny bit stuck with a dynamic drop down menu. I'm using a child 'ul' within an 'li' element that will display the children of the navigation links - but the 'li' above (so the main one, that you hover on to view the children), stretches to the length of the 'ul', which is, of course, defined by the width of the 'li' elements inside that.
Also, I'm using jQuery to display the child items when the user hovers over the parent navigation item.
However, I need this not to happen! Here's a screenshot link: http://d.pr/v5Wk (I'm sorry - I'm not registered, so I can't post images! D: )
Basically, I need to get rid of the gap on the right of 'Section One', dynamically, without defining any preset widths.
Here's the HTML:
<div class="menu">
<ul class="navigation">
<li>
Section One
<ul class="children">
<li>
Child Item One
</li>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</li>
<li>
Section Two
</li>
<li>
Section Three
</li>
<li>
Section Four
</li>
<li>
Section Five
</li>
<li>
Section Six
</li>
</ul>
</div>
And here's the CSS:
.menu { width: 100%; overflow: hidden; display: block; position: absolute; margin: 75px auto; background: #666 url('../image/stripe.png'); }
ul.navigation { list-style-type: none; width: 900px; margin: 0 auto; }
ul.navigation li a { color: #fff; text-decoration: none; display: block; padding: 10px; }
ul.navigation li a:hover { color: #fff; background: #444 url('../image/stripe_active.png');}
ul.navigation li { float: left; }
ul.navigation li ul.children { list-style-type: none; display: block; overflow: hidden; position: relative; z-index: 1; }
ul.navigation li ul.children li { color: #fff; float: left; font-size: 11px; white-space: nowrap; }
Any help on this would be great!
Many thanks,
Matt
ul.navigation li ul.children {
list-style-type: none;
display: block;
overflow: hidden;
position: absolute;
z-index: 1;
top: 2em;
left: auto;
right: auto;
}
If you still can't see them, add height: 5em to ul.navigation
Position:Absolute causes an element to be rendered at a specific spot on the page, taking it out of the normal flow. Since it is no longer being rendered inside the topnav li, it doesn't cause it's width to be too large.
Have you tried to position:absolute the children?
Does it need to be an ul/li solution? wouldn't it be easier to update the contents of the submenu with javascript when you hover over the top nav?
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');
});
});