Here is a jsbin link to my code. As you can see, the drop down closes as soon as I hover away from the trigger thus making the navigation useless.
Any simple solutions would be very welcome. Thanks in advance.
html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>
<p>Menu</p>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</header>
</body>
</html>
SASS
*
margin: 0
header
padding: 20px
background-color: tomato
p
display: inline
padding: 5px 10px
background-color: blue
color: white
&:hover
cursor: pointer
ul
padding: 10px
background-color: blue
list-style: none
color: white
width: 60px
display: none
JS
$(function(){
$("p").hover(function(){
$("ul").slideToggle();
});
});
$(function(){
$("p").hover(function(){
$("ul").show();
});
$("ul").hover(function(){}, function(){
$(this).hide();
});
});
You don't need JS for this. Use :hover in your css:
header:hover ul {
display:block;
}
http://jsfiddle.net/wfw1f9to/3/
Related
I try to load different pages using an ajax call. But the pages are not appearing on the main page.
This is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<script src="Scripts/jquery.min.js"></script>
<link href="Content/site.css" rel="stylesheet">
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script>
$(document).ready(function() {
$('#newslinks a').click(function () {
var url = $(this).attr('href');
$('#healines').load(url + ' #newsItem');
//evt.pr.preventDefault();
return false;
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li>Today’s News</li>
<li>Yesterday’s News</li>
<li>Last Week’s News</li>
</ul>
<div id="headlines"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
So you see three links. But if you click on one of the links nothing happens. I am using IIS. And yes it is enabled.
Thank you
Misspelled headlines in $('#healines').load(url + ' #newsItem');.
I am attempting to make a second dropdown navigation here, all i want it to do is slide down nicely once its been triggered to show and it does slide down. However it disappears just after a second or so, why does it do that??
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header></header>
<nav>
Toggle
</nav>
<div id="lower_nav">
This is some text.
</div>
<div></div>
<footer></footer>
</body>
</html>
SASS
*
margin: 0
header
background-color: tomato
height: 120px
nav
background-color: brown
padding: 20px
a
color: white
div
background-color: f0f0f0
#lower_nav
background-color: blue
padding: 20px
color: white
display: none
Jquery
$(function() {
$("a").on("click", function() {
$("#lower_nav").slideDown();
});
});
I realised that by clicking a link i am reloading a page, therefore my bar is disappearing. I solved this with jquery's preventDefault function.
I have been searching for an answer for this question but still, my problem exists. I tried all the answers from here (StackOverflow) and from other websites but it still didn't solved my problem.
Additional Information:
There's no error on DevTools.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<script src="sample.js"></script>
</body>
</html>
CSS:
/*Nav Styles*/
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu {
color: red;
}
JS:
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(x);
Thanks a lot!
The issue is because your CSS rule for .activeMenu is not specific enough to override the colour set on the a element. You need to make the rule more specific:
.activeMenu a {
color: red;
}
Or set !important on it. The former is better practice.
Example fiddle
You must change your css too:
.activeMenu a {
color: red;
}
var x = function(){
$('.nav li').click(function(){
//alert($(this).text()); <-- It's working
$(this).addClass('activeMenu');
return false;
});
};
$(document).ready(function() {
x();
});
.nav li {
text-transform: uppercase;
list-style-type: none;
display: inline;
}
.nav a {
text-decoration: none;
color: black;
}
/*Active Menu*/
.activeMenu a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<div class="container">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
I'm a newbie to web development. And so, I've just created a sample webpage. It contains an html page, a css file and a JavaScript file. But whenever this JavaScript is linked to the html page, the css formattings are removed. This happens only after linking the JS file. If the same link is removed, css works fine. could u tell me the problem. i'm using windows xp sp3 and google chrome latest. is it the problem with the browser.
Here are my codes
HTML
<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body
<div>
<ul id="nav">
<li id="click" Contact</li>
<li Blog</li>
<li Work</li>
<li About</li>
<li Home</li>
</ul>
</div>
</body>
</html>
JS
var list = document.getElementById("nav")
list.addEventListener("click", function(event) {
switch(event.target.id) {
case "click":
document.title="I changed the document title";
break;
}, false);
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: left;
text-align: center;
display: inline;
}
#nav li a {
line-height: 40px;
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
First of all you are not closing your link tag, it should be:
<link rel="stylesheet" type="text/css" href="Style.css" media="all" />
Now regarding your issue. I think you have a problem with the your JavaScript source. Ensure in development tools that your <script type="text/javascript" src="JavaScript.js"></script> actually returns a script - ensure that srs points to the correct location of the script
Made this an answer, since after testing in JSFiddle and comparing it to a fixed version, I suspect it's the source of your problems:
I'd recommend fixing your <body> and <li> opening tags - currently they are being shown as <body and <li respectively, missing their ending braces (>).
This is what your HTML should look like after you fix the problem:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body>
<div>
<ul id="nav">
<li id="click">Contact</li>
<li>Blog</li>
<li>Work</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
I just want to add a side menu that links to various pages on my site. I would like to use image buttons or simple hrefs that the user clicks on to navigate. I think I need to use a div somehow ?
Thanks
You can use a div element and float it left with CSS.
HTML:
<div id="nav">
<ul>
<li>A Link</li>
<li>Another Link</li>
</ul>
</div>
<div id="content">
<p> Here's some stuff </p>
</div>
CSS:
#nav {
width: 20%;
float: left;
background-color: gray;
}
#content {
width: 80%;
}
I would also run through the HTML and CSS tutorials at HTML Dog. It will make your life so much easier.
Listamatic has various examples of how to style a list of links
HTML :
<!Doctype html>
<html projectReviver="leftmenu.html">
<head>
<title>My Left Menu</title>
<link rel="StyleSheet" href="design.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<div id="main">
<ul>
<li>First page</li>
<li>2<sup>nd</sup>page</li>
</ul>
</div>
</nav>
</body>
</html>
design.css :
#mainu ul {
list-style: none;
background-color: red;
}
#nav {
width: 20%;
float: left;
background-color: red;
}
#content {
list-style: none;
}