CSS:
ul.topnav {
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
}
ul.topnav li {
position: relative;
display: inline;
margin: 0px;
padding: 0px;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
display: none;
background-color: black;
margin: 0px;
padding: 0px;
border: 1px solid gray;
}
ul.topnav li ul.subnav li {
width: 170px;
margin: 0px;
padding: 0px;
}
HTML:
<ul class="topnav">
<li>Home</li>
<li>
Tutorials
<ul class="subnav">
<li>Sub Nav Link</li>
<li>Sub Nav Link</li>
</ul>
</li>
</ul>
Javascript/JQuery:
$(document).ready(function() {
$("ul.subnav").parent().append("<span>^</span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
The menu will show when the <span>^</span> is clicked, but the moment you want to select a sub item, the menu disappears.
What happens is you're no longer hovering so
$(this).parent().hover(function() {}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
this is being called. What you have to do is put an invisible div behind the nav of whatever size you see fit, then use .mouseout() to call the .slideup().
Related
We have the following html structure for our menu (see codepin). We would like to modify the menu without having to use JS on page load to move any elements around.
Here is what I tried, but cannot get the custom-dropdown to show like the screenshot below.
Here is my codepin that I have so far, but we are having hard time getting it to align in two columns like the screenshot. The goals below have been simplified, but should be applicable to other links like Category and Company as well since they follow similar structure.
Goal (see screenshot):
On hover of Testing 1, Collaboratively testing 1 and transition accurate should display
On hover of Collaboratively testing 1 then the Enthusiastically communicate cross-platform and Uniquely reconceptualize accurate should display
Screenshot:
Underline below Testing 1 is to simulate on hover effect
Grey background behind Collaboratively Testing is to indicate on hover effect, which results in goal #2 where they are display to the right.
Multi-Level Drop Down Menu with Pure CSS
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-bottom: 3px solid #1bc2a2
}
ul li a:hover {border-bottom: 3px solid #2c3e50}
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
li:hover a { background: #1bc2a2; }
li:hover li a:hover { background: #2c3e50; }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
here comes your html code
<h1>Multi-Level Drop Down Menu with Pure CSS</h1>
<ul class="main-navigation">
<li>Home</li>
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
</ul>
I am having a little difficult creating a navbar that when clicked it opens a small window on the same page like on the image.
Create the small window as it's own div:
<div id="myID"> This content will show when I click the navbar</div>
Add the following CSS:
#myID{
display: none;
}
Then use some script to show/hide the element:
$(document).ready(function(){
// change #nav to whatever the ID of the nav element is.
$('#nav').on('click', function(){
// show/hide pop up on click
$('#myID').toggle();
});
});
You can create a Navbar like this. This is the only dummy. In given image, they have one fix element and when you click on nav element according to that they are updating the content of that element.
$('#myNav').find('li a').click(function (e) {
$('li.active').removeClass('active');
$(this).parent('li').addClass('active');
$('#main').html($(this).html());
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #567;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ccc;
}
.active {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myNav">
<li class="active">Home</li>
<li>Service</li>
</ul>
<div id="main">
Home
</div>
It will help you to create a nav bar.
I am very new to javascript, so I apologize in advance if I waste anyone's time with a problem that may have a "duh" answer :-)
I am creating a navigation bar for a webpage. It starts off as an unordered list, and I am styling it to float the list items horizontally across the page. That part works fine for me.
I started to work at incorporating an unordered list as a submenu of one of my original list items. When I hover the mouse over the main list item, the submenu items appear, and when I mouse out, the submenu items disappear. The problem is that when the submenu items appear, they display on top of the navigation link to the left, instead of breaking out and dropping down below the link that I am hovering over. I tried setting the position to relative, but then it just shoved the submenu to the right.
I think the problem may be with my css. If I do not apply the external style sheet, then things seem to work better.
Here is my html:
<ul class="nav">
<li>Home</li>
<li>Department Members</li>
<ul id="menu" style="display:none;position:absolute">
<li>Brian Kendricks</li>
<li>Tim Jones</li>
<li>David Kline</li>
</ul>
<li>Systems Used</li>
<li>System Status</li>
<li>Projects</li>
</ul>
My css is:
.nav li {
float: left;
width: 20%;
font-family: verdana,arial,sans-serif;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
background-image:none;
background-color: #004E98;
display: block;
}
.nav a {
color: white;
}
.nav a:hover {
color: white;
}
.nav li:a:hover {
background-color: #093F6D;
}
And here is my javascript:
function drop(menu) {
document.getElementById(menu).style.display = 'block';
document.getElementById(menu).style.position = 'relative';
}
function hide(menu) {
document.getElementById(menu).style.display = 'none';
}
I would like to stick to using javascript, as the course that I am taking does not wish for me to incorporate things like JQuery at this time.
Thanks in advance for any assistance that you may offer in pointing me in the right direction.
Make your submenu a child of the <li> they are under - instead of currently you have it a child of the overall <ul>. Then you can give the parent item relative positioning, and the child list absolute positioning with top 100% (putting it under the parent item).
function drop(menu) {
document.getElementById(menu).style.display = 'block';
}
function hide(menu) {
document.getElementById(menu).style.display = 'none';
}
.nav li {
float: left;
width: 20%;
font-family: verdana,arial,sans-serif;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
background-image:none;
background-color: #004E98;
display: block;
position: relative;
}
.nav a {
color: white;
}
.nav a:hover {
color: white;
}
.nav li:a:hover {
background-color: #093F6D;
}
.dropmenu {
position: absolute;
top:100%;
left: 0;
}
.dropmenu li {
display: block;
float: left;
width:100%;
}
<ul class="nav">
<li>Home</li>
<li>Department Members
<ul id="menu" class="dropmenu" style="display:none">
<li>Brian Kendricks</li>
<li>Tim Jones</li>
<li>David Kline</li>
</ul>
</li>
<li>Systems Used</li>
<li>System Status</li>
<li>Projects</li>
</ul>
I need to finish javascript for load html page into div. I want load page1,page2 and so on into div id="content". If someone help me I will grateful. Thanks
Here is jsfiddle of this code
HTML
<div id="menu">
<nav>
<ul>
<li ><a class="active" href="1.html" ><b>Page1</b></a></li>
<li ><a href="2.html" ><b>Page2</b></a>
</li>
<li ><b>Page3</b>
</li>
<li ><b>Page4</b></li>
<li ><b>Page5</b></li>
</ul>
</nav>
</div>
<div id="content"> </div>
CSS
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: rgb(1, 1, 1);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-family: Times New Roman;
font-size: 70%;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li {
float: left;
font-family: Arial;
font-size: 1;
}
nav ul li a:hover, nav ul li a.active, nav ul li a.visited {
background: rgb(177, 2, 10);
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
nav ul li a {
display: block;
padding: 5px 45px;
color: rgb(255, 255, 255);
text-decoration: none;
position: relative;
}
#menu {
position: relative;
width: 780px;
height: 35px;
left: 50%;
margin-left: -388px;
overflow: hidden;
top: -20px;
}
#content {
position: relative;
float: center;
width: 770px;
height: 670px;
clear:both;
margin: 0 auto;
border-radius: 7px;
overflow: hidden ;
top: 0px;
border: 3px solid black;
}
JAVASCRIPT
$(document).ready(function(){
$('nav ul li a').click(function(){
$('nav ul li a').removeClass('active');
$(this).addClass('active');
});
});
Assuming your href reference the file with the contents that you want to show, you can use .load(). You can get the href property using .prop().
Prevent the default action (redirecting to a new page) when your anchors are clicked.
You may also want to trigger the this functionality on page load for the .active nav button. I've added a filter and a click trigger afterwards for this reason.
$(document).ready(function () {
var $navAnchors = $('nav ul li a');
$navAnchors.click(function (e) {
var $this = $(this);
e.preventDefault();
$navAnchors.removeClass('active');
$this.addClass('active');
$('#content').load($this.prop('href'));
}).filter('.active').click();
});
Notice I've assigned your matching jQuery collection to a variable, to save you making repeat selections. This way nav ul li a is only searched for once, on DOM load.
Use $.get.
$(document).ready(function(){
$('nav ul li a').click(function(e){ // when a nav link ('a' tag) is clicked...
$('nav ul li a').removeClass('active'); // remove the css class "active" from any nav links.
$(this).addClass('active'); // add the css class "active" to the one we clicked
e.preventDefault(); // <-- important! // prevent the page from navigating away
var page = this.href; // get the url the link would normally go to
$.get( page, function( data ) { // in the background, get the content of the page for the link we have clicked
$( "#content" ).html( data ); // load the content we have into the element with id "content"
});
});
});
If you're saying that the page is empty when you first load it, that's expected. If you want it to load something, you'll need to manually fire off the click event when the page loads.. something like:
$('nav ul li a.active').click(); // Get the nav link which has class "active", and fire the click() event.
... should do the trick.
Note -- fiddle won't work, as it doesn't support AJAX stuff very well.
Second Note - George's answer is a simpler version of this. Use that. :)
I have a webpage that uses jquery to display a submenu div while a user is hovering over an a:link in the main parent menu.
$('.menu ul li').hover(function() {
$(this).find('.dropnav').stop(true, true).fadeTo('fast', 1);
}, function() {
$(this).find('.dropnav').stop(true, true).fadeOut(800, 0);
});
The problem is, I want this webpage's navigation feature to be independent of javascript. So when users do not have javascript enabled, the menu will still display - just without the effects of scrolls or fades.
Thanks.
Use the :hover CSS pseudo-class.
.menu ul li:hover .dropnav {
opacity: 1;
/* display: block; ? */
}
Here is a pretty solid example of a CSS based menu. There is JavaScript that goes with it, if you are looking for backwards compatibility to IE6.
http://qrayg.com/learn/code/cssmenus/
HTML
<ul class="main-nav">
<li>main nav-1
</li>
<li>main nav-2
<ul class="sub-nav">
<li>sub-nav-2.1</li>
<li>sub-nav-2.2</li>
<li>sub-nav-2.3</li>
</ul>
</div>
</li>
<li>main nav-3
<li>main nav-4
</ul>
css
ul.main-nav > li { position: relative; display: block; float: left; margin: 0 15px;}
ul.main-nav > li > a {display: block; line-height: 40px; }
ul.sub-nav { display:none; position: absolute; top: 40px; left: 0; min-width: 200px;}
ul.main-nav > li:hover ul.sub-nav { display: block; z-index: 999; }
check this one for live demo http://jsfiddle.net/q9YZf/