I am working on a web application with multiple pages, and am working on styling a navigation bar for my users to go through the different pages. However, when I try to link the navigation bar to the pages, something is going wrong. When I preview the code, clicking on the different tabs doesn't redirect me to the corresponding pages. Attached is my code so far.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li a:active {
background-color: #51014d;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Contact</li>
<li>About</li>
</ul>
<div id="home">
<h1>Welcome!</h1></div>
<div id="contact" style="visibility: hidden">
<h2>you can reach me
at:</h2></div>
<style>
#home {
background-color: honeydew;
}
</style>
<style>
#contact {
background-color: lightblue;
}
</style>
</body>
</html>
I am trying to make the navigation menu link to different pages of my website (for example, they can go to "contact", and view information regarding that topic). However, the links with this code aren't working. When I click on the different tabs, it does not show the corresponding page. How do I fix this?
Thank you!
try below code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li a:active {
background-color: #51014d;
}
#home {
background-color: honeydew;
}
#contact {
background-color: lightblue;
}
#about {
background-color: darkblue;
}
</style>
</head>
<body>
<ul>
<li><a onclick="showDiv('home');" class="active" href="#home">Home</a></li>
<li><a onclick="showDiv('contact');" href="#contact">Contact</a></li>
<li><a onclick="showDiv('about');" href="#about">About</a></li>
</ul>
<div id="home">
<h1>Welcome!</h1>
</div>
<div id="contact">
<h2>you can reach me
at:</h2>
</div>
<div id="about">
<h2>about us
at:</h2>
</div>
<script>
function showDiv(id) {
document.getElementById("home").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
document.getElementById(id).style.display = "block";
}
showDiv('home');
</script>
</body>
</html>
Related
I'm trying to make call a navigation bar(navbar.html) in to my index.html. Navbar.html has its own css and inside navbar.html is a script that changes the class of <li> when <a> is pressed.
I have managed to make the <li> to change highlight but when I press the <a> does not remain highlighted on the new page.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title></title>
</head>
<body>
<!--NAVIAGTION BAR-->
<div id="navbar-placeholder">
</div>
<script>
$(function(){
$("#navbar-placeholder").load("Files/navbar.html");
});
</script>
<!--END OF NAVIGATION BAR-->
</body></html>
navbar.html
<link rel="stylesheet" href="css/navbar.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="navigation">
<ul>
<li class="">Work</li>
<li class="active">Home</li>
<li class="">Contact</li>
</ul>
</div>
<script>
$(document).ready(function() {
$(".navigation li").click(function() {
$(".navigation li").removeClass("active");
$(this).addClass("active");
});
});
</script>
navbar.css
.navigation{
position: fixed;
top: 0;
width: 100%;
background-color:#262126;
text-align: center;
}
.navigation ul{
margin: 0;
}
.navigation li{
display: inline-block;
padding: 15px 30px;
margin: 10px 5px 0px 5px;
text-decoration: none;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.navigation a{
color: white;
text-decoration: none;
text-transform: capitalize;
}
.navigation li:hover{
background-color: #F2F2F2;
transition: 0.4s;
}
.navigation li:hover a{
color: black;
}
.navigation li.active{
background-color: #F2F2F2;
}
.navigation li.active a{
color: black;
}
The logic is backwards. Adding the class when click occurs is pointless since you are immediately leaving that page
When each page loads match the current location.href to the links and add class then.
var $navItems = $(".navigation li").removeClass("active");
$navItems.filter(function(){
return $(this).find('a').prop('href') === location.href;
}).addClass("active");
My hamburger menu doesn't seem to work. When I click on the hamburger icon itself nothing happens. I have used this exact same code before and it works perfectly fine there. The menu items just slide open when I click on the menu. I have a feeling that I'm doing something wrong with giving the javascript code the right Classes/ID's. But I'm not really sure.
Does anyone have a clue of whats wrong?
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stefan's menu's - 2</title>
<link href="main.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="hamburger.js"></script>
</head>
<body>
<nav>
<div id="hamburger-menu">
<div class="icon">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<ul id="menu">
<li><a>Home</a></li>
<li>
<ul class="submenu">
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
<li>
<ul class="submenu">
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
<li>
<ul class="submenu">
<li><a>Submenu</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS:
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
}
.icon {
width: 35px;
margin: auto;
}
ul#menu > li {
width: 100%;
display: block;
}
ul#menu > li > ul.submenu {
display: none;
border: 1px solid #FF6347;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
background-color: #f3f3f3;
}
ul#menu a {
display: block;
padding: 1em; /* met 1em word de ruimte tussen de list items 2x zo groot */
font-family: sans-serif;
color: #FF4136;
text-decoration-line: none;
font-weight: bold;
}
.submenu {}
JavaScript:
$(document).ready(function(){
$('.icon').on('click', function () {
$("#menu").slideToggle();
});
$('#menu a').on('click', function() {
$(this).siblings('.submenu').slideToggle();
});
});
could you help me improve this code below?! I´m trying to work a sidebar menu with jquery but i do´t know where I´m going wrong...
Here goes my codes:
html:
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="utf-8">
<title>Teste Menu c Javascript</title>
<link rel="stylesheet" href="css/style.css">
<link href="/js/jquery-3.2.0.min.js">
</head>
<body>
<div class="sidebar">
<ul>
<h2>Menu</h2>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="nav">
<img src="images/menu-icon.jpg" width="30px;" class="menu-bar"/>
</div>
<script src="js/script.js"></script>
</body>
</html>
css:
body{
margin: 0;
}
.sidebar{
position: absolute;
width: 250px;
height:100%;
background: #333;
color: white;
font-family: arial;
outline: 1px solid #2a2a2a;
}
.sidebar h2{
text-align: center;
margin: 0;
padding: 10px;
background: #2a2a2a;
}
.sidebar ul{
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li{
outline: 1px solid #2a2a2a;
transition: all 0.3s;
}
.sidebar li:hover{
background: #444;
border-left: 5px solid #eee;
}
.sidebar a{
text-decoration: none;
color: white;
display: block;
padding: 10px;
}
.nav{
width: 100%;
height: 100%;
position: absolute;
background: white;
padding: 30px;
transition: all 0.3s;
}
.menu-bar{
cursor: pointer;
}
.open{
transform: translateX(250px);
}
js:
$('.menu-bar').on('click', function(){
$('.nav').toggleClass('open');
});
I don´t know if the problem is the jquery link or something else...
Your code is not totally correct. From a semantic point of view, the h2 tag, and, nothing, should stay within the ul tag and outside a li tag.
Here simple example:
This example uses the css translate3d feature, that runs on GPU and not on CPU, this is a good thing for performance issues.
https://jsfiddle.net/c4hjhbp4/
html
<div class="nav">
<button id='show-hide-menu'>
Menu
</button>
</div>
<div class="sidebar-container">
<div class="sidebar" id='sidebar'>
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
javascript (jQuery)
$('#show-hide-menu').click(function() {
if ($('#sidebar').hasClass('visible')) {
$('#sidebar').removeClass('visible');
} else {
$('#sidebar').addClass('visible');
}
});
css
body, html {
margin: 0;
padding: 0;
}
.sidebar-container {
position: relative;
width: 0;
height: 0;
}
.sidebar {
position: absolute;
width: 230px;
height: 400px;
background: #ccc;
transform: translate3d(-230px,0,0);
transition: transform 0.5s;
}`enter code here`
I have the below style in my <head></head> to display my menu:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: none;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active {
background-color: red;
}
</style>
The problem now is, a:link, a:visited AND a:hover, a:active, is displaying a box menu on my div image link. Here is the code:
<div id="content1">
<a href="inside_page.html">
<img src="images/adeliepenguin_250x200.jpg" alt="Adenlie Penguin" height="200" width="250"></a>
</div>
My question is: Is there a way I can stop it to display that menu box my image div space?
Here is the full code of the index.html:
<!DOCTYPE html>
<html>
<head>
<title>Birds </title>
<link rel="stylesheet" type="text/css" href="birds2.css" />
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: none;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div class="menu">
<ul>
<li>Home</li>
<li>Birds In Danger</li>
<li>Birds Habitants</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="flash"> Flash messaging area</div>
<div id="content">
<div id="content1">
<a href="inside_page.html">
<img src="images/adeliepenguin_250x200.jpg" alt="Adenlie Penguin" height="200" width="250">
</a>
</div>
<div id="content2"><img src="images/American_Goldfinch_250x200.jpg" alt="American Goldfinch" height="200" width="250"></div>
<div id="content3"><img src="images/blue-jay-Glamour_250x200.jpg" alt="Blue Jay Glamour" height="200" width="250"></div>
<div id="content4"><img src="images/american-robin-250x200.jpg" alt="Blue Jay Glamour" height="200" width="250"></div>
</div>
<div class="footer_menu">
<ul>
<li>Home</li>
<li>Birds In Danger</li>
<li>Birds Habitants</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="footer"> Footer area</div>
</div>
</body>
</html>
Is this what your looking for?
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
.menu a:link,
a:visited {
display: block;
width: 120px;
font-weight: none;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
}
.menu a:hover,
a:active {
background-color: red;
}
Just prefix the CSS for your anchor tags with the .menu class so it only targets your menu.
Demo here: http://jsfiddle.net/3vdh2dxL/1/
Also, I have changed your footer menu to use the same .menu class.
I want to cause an overlay on mouseover for my three images. I believe it will be best to use jQuery after creating a div. However, when I add a new div to my layout (below each of the <img> in my code) My layout is screwed up; goes from horizontal list to vertical list if i try to add in any <div> below my <img>.
I mainly want the overlay just sitting there. Im sure I can figure out mouseover action, but main issue is I cannot generate initial overlay
stackoverflowers: please help me add in an overlay div that will ultimately be transparent.
home.html I have commented out my attempt at placing overlay divs
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
PROGRAM
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li>LOGIN
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
stylesheet.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
included jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
As per comments
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
CODE
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
Demo
http://jsfiddle.net/79zty3h7/