i'm trying to change the active class to the selected item but i could not did it right i've searched on google and here on stack overflow as well and i found the toggle() method so i give it a go on my code but i think i didn't use it right
here is my code:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item active" onclick="active()">home</li>
<li class="main-nav-item active" onclick="active()">contact</li>
<li class="main-nav-item active" onclick="active()">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
.main-nav{
display: flex;
align-items: center;
}
.main-nav-items{
display: flex;
width: 1200px;
list-style-type: none;
justify-content: flex-end;
align-items: center;
font-size: 18px;
padding: 10px;
}
.main-nav-item{
font-size: 18px;
padding: 10px;
border-radius: 10px;
}
.main-nav li.active{
background-color: #542188;
padding: 10px;
border-radius: 10px;
color: white;
}
.main-nav-item:hover{
background-color: #ddd;
color: white;
}
JS:
function active(){
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList=items[i].classList.replace("active","")
}
document.querySelector(".main-nav-item").classList.toggle("active");
}
thank you in advance
first add Jquery to your html doc like this
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item" onclick="active(1)" id="1">home</li>
<li class="main-nav-item" onclick="active(2)" id="2">contact</li>
<li class="main-nav-item" onclick="active(3)" id="3">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- here is jquery plugin -->
<script>
function active(id){
$("#"+id).on("click",function(){
$(this).toggleClass("active");
});
}
</script>
</body>
</html>
<li class="main-nav-item active" onclick="active(this)">home</li>
<li class="main-nav-item active" onclick="active(this)">contact</li>
<li class="main-nav-item active" onclick="active(this)">about</li>
you need to pass the element that was clicked, to get a reference on which element would remain to be active.
function active(target){
/* this block is to remove all the active class on all main-nav-item
* [if this scenario is the one you really needed to do
* else remove this part]
*/
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
/* use the parameter "target" on which you passed using the html code
* "onclick(this)" and toggle the class "active"
*/
target.classList.toggle("active");
}
PS.
if all your main-nav-item has the same flow,
you could use, "querySelectorAll" to get all the main-nav-item and from there, add an event listener for click, and you remove all the "onclick" on your HTML
<ul class="main-nav-items">
<li class="main-nav-item active">home</li>
<li class="main-nav-item active">contact</li>
<li class="main-nav-item active">about</li>
</ul>
var mainNavItems = document.querySelectorAll(".main-nav-item");
Array.forEach(mainNavItems, function( navItem ) {
navItem.addEventListener("click", function(){
/* again, you could remove this block of codes, if you
* just intend to toggle the active class */
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
this.classList.toggle("active");
});
});
Related
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" href = "style.css"/>
<meta charset="UTF-8">
<title>Book Fair</title>
</head>
<body>
<div class= "page">
<header class="header">
<div class="name">
<button class="sidebarbtn" onclick="Menu()">
→
</button>
Book Fair
</div>
<div class="left-side">
Cart
SignIn
</div>
</header>
<!-- Side bar -->
<aside class = "sidebarcon">
<h3>Book Categories</h3>
<ul>
<li>Action</li>
<li>Romance</li>
</ul>
</aside>
</main>
</div>
<!-- JS -->
<script>
function Menu(){
document.querySelector(".sidebarbtn").classList.add(".sidebarcon.open");
}
</script>
</body>
</html>
CSS code
.sidebarbtn{
font-size: 30px;
border: none;
color: brown;
padding: 10px;
background: none;
}
.sidebarcon{
position: fixed;
transform: translateX(-10rem);
width: 10rem;
}
.sidebarcon.open{
transform: translateX(0);
}
I have create a navbar, from that I wanted to create a sidebar. I suspect there is a problem with my JS script but I am unable to find the fault. I am trying to use the classList.add() method here. I have searched everywhere and tried all possibility.
Unlike querying a selector, when you add a style class to an element using classList.add() you do not include the leading .. Additionally, in this case, you want to add the opening style class to the sidebar, not the button.
Try something like this:
.sidebarbtn{
font-size: 30px;
border: none;
color: brown;
padding: 10px;
background-color: blue;
}
.sidebarcon{
position: fixed;
transform: translateX(-10rem);
width: 10rem;
background-color: red;
}
.openSidebar{
transform: translateX(0);
}
ML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" href = "style.css"/>
<meta charset="UTF-8">
<title>Book Fair</title>
</head>
<body>
<div class= "page">
<header class="header">
<div class="name">
<button class="sidebarbtn" onclick="Menu()">
→
</button>
Book Fair
</div>
<div class="left-side">
Cart
SignIn
</div>
</header>
<!-- Side bar -->
<aside class = "sidebarcon">
<h3>Book Categories</h3>
<ul>
<li>Action</li>
<li>Romance</li>
</ul>
</aside>
</div>
<!-- JS -->
<script>
function Menu(){
document.querySelector(".sidebarcon").classList.add("openSidebar");
}
</script>
</body>
</html>
.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
background-color: #7F613F;
}
.icon-color {
color: #282828;
}
.nav {
display: flex;
}
#media (max-width: 768px) {
.nav > li {
float: left;
}
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="navbar-header">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
What i want is that if element has class icon-change, that class can get effect something like my css effects.
In other words, What i want to know is how can i change that element's background color when mouse is on that element, or when mouse over that element.
For more example,
when mouse is in the class icon-change, i want icon-change's background color be 'red'.
when mouse is over the class icon-change, i want icon-change's color be 'blue'.
when i mouse click on the class icon-change, i want icon-change's color be 'pink', and it's last until i re-click the class icon-change. In this re-clicked moment, re-clicked class icon-change is returned to fist status like there's nothing happened yet.
How can i do this through jQuery?
You can use .on() see reference here to attach an event handler function
then use mouseenter - use when mouse enter the object
mouseeleave - use when mouse leave the object
click- use when click on the object
$('.icon-change').on('mouseenter',function(){
$('.icon-change').css("background-color","red");
});
$('.icon-change').on('mouseleave',function(){
$('.icon-change').css("background-color","blue");
})
$('.icon-change').on('click',function(){
$('.icon-change').css("background-color","pink");
});
.nav > li > a:hover,
.nav > li > a:focus,
.navbar-header > a:hover,
.navbar-header > a:focus {
background-color: #7F613F;
}
.icon-color {
color: #282828;
}
.nav {
display: flex;
}
#media (max-width: 768px) {
.nav > li {
float: left;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top" style="background-color: #b39369; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="navbar-header">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li><a class="icon-change" href="#" style="padding: 15px;"><i class="glyphicon glyphicon-comment icon-color"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
keep using css, just add a class like 'selected' with background-color: pink and toggle it on click
$('.icon-change').click((e) => { e.target.toggleClass('selected'); }
you can handle mouse effect via jquery.
$(selector).on('mouseover mouseleave', function(e){
console.log(e.type)
})
check the console.
you use this methods to achieve
$(".icon-change").mouseover(function(){
$(this).css("background-color","red")
});
similarly you can use other methods.
Try this :
var flag = true;
$(".icon-change").mouseover(function(){
if(flag) {
$(".icon-color").css("color", "blue");
}
});
$(".icon-change").mouseleave(function(){
if(flag) {
$(".icon-color").css("color", "#282828");
}
});
$(".icon-change").click(function(){
if(flag) {
$(".icon-color").css("color", "pink");
flag = false;
} else {
$(".icon-color").css("color", "#282828");
flag = true;
}
});
I have got a code for navbar which is working perfectly... Also i have got the code for a collapsable side bar which is also working perfectly. But now i dont understand how to add these two together so that i get a page with navbar and sidebar together.
This is my code for navbar - (complete with html):
<html>
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
<!-- Font styles -->
<style type="text/css">
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
</style>
</head>
<body style="background-color:#E6E6FA">
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
</body>
</html>
Those links in the head tag - i got it by simply googling.
Also, my sidebar code is here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
But not now. how do I combine these? I want a page which will have both the top navbar and the sidebar. I have all combinations of pasting the codes but with no luck. What i have latest now - after combining these two is this -
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<link rel="stylesheet" href="styles.css">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Sidebar nav -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Sidebar Ends -->
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
By combining it like this, The side bar is working correctly but the top navbar is just a big white block. Nothing in there.
Divide both the sections differently. Put both in one row and give col-2 to the sidebar side and col-10 to the nav-bar side. This way you'll be having a side and nav-bar both side by side, you can also use the nav-bar side for creating a normal webpage. All the best!
First of all, your missing an opening style tag just after your <title>both</title>. (You have a closing /style tag just before your nav). This will apply inline styles for the time being. You should see what you want to achieve now.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
/* styles */
</style>
</head>
But ultimately, you need to copy these styles into a CSS file and then link the CSS file in your HTML like this: <link rel="stylesheet" href="css/styles.css">. That is presuming, your stylesheet is called "styles.css" and is inside a 'CSS' folder.
Have a look at the HTML link tag for linking your external CSS file.
I am creating a website on github pages using bootstrap, but the drop-down does not seem to be working on the nav bar (sometimes works, sometimes not). I am using $("#nav").load("url");
to load the nav bar so I can change it and have the changes apply to many pages. The drop-downs work on the page that I am loading if I go there directly. The web page is http://scratchos.github.io/index2.html
/resorces/navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css, i do not know if it is used on the page, i think not-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--meta-->
<meta charset="utf-8">
<!--get url parameters for adding classes to set items to make it applicable to all pages-->
<script>
function getParameter(theParameter) {
var params = window.location.search.substr(1).split('&');
for (var i = 0; i < params.length; i++) {
var p=params[i].split('=');
if (p[0] == theParameter) {
return decodeURIComponent(p[1]);
}
}
return false;
}
</script>
<!--bootstrap dropdown code-->
<script>
$(document).ready = function () {
$('.dropdown-toggle').dropdown();
};
</script>
</head>
<body>
<!--bootstrap nav bar-->
<div class="nav nav-tabs">
<li id="home">Home</li>
<li id="projects">My Projects</li>
<li id="hfb">
<!--JQuery-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Hungry-For-Blocks<span class="caret"></span></button>
<ul class="dropdown-menu">
<li id="hfb-home">Home</li>
<li id="hfb-about">About</li>
<li id="hfb-doc">Documentation</li>
<li id="hfb-ins">Instalation</li>
</ul>
</div>
</li>
<li id="tut">Tutorials</li>
</div>
<!--script to apply the classes based on url params once page has loaded; it is done in this way because github does not support php:(-->
<script>
window.onload = function () {
$("#" + getParameter("active")).addClass("active");
if (getParameter("dis") !== false) {
$("#" + getParameter("dis")).addClass("disabled");
};
};
</script>
</body>
</html>
/stylesheets/main2.css
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
color: #ff6600;
}
.jumbotron .container {
position: relative;
top: 100px;
}
.jumbotron h1 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotronm p {
font-size: 20px;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.forum {
padding: 20px;
}
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--rendering script in css and jquery for the site, not relevent i think?-->
<link rel="stylesheet" href="//scratchos.github.io/ScratchBlocks/scratchblocks2.css">
<script src="//scratchos.github.io/ScratchBlocks/scratchblocks2.js"></script>
<script>
$(document).ready(function() {
scratchblocks2.parse();
});
</script>
<!--bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--main.css custom page css i don't think it is needed in this, because everything it formats has been omitted from this code?-->
<link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
<!--set jubmotron background, probably an inefficient way of doing it?-->
<style>.jumbotron{background-image:url('https://scratchos.github.io/images/jumbotron.png');}</style>
<!--bootstrap metas-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--title-->
<title>-ScratchOs|Home</title>
<!--loading the nav bar-->
<script>
$(function(){
$("#nav").load("http://scratchos.github.io/resorces/navbar.html");
});
</script>
<!--bootstrap dropdown code-->
<script>
$('#hfb a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</head>
<body>
<!--nav bar-->
<div id="nav"></div>
<!--the rest of the page is not included-->
</body>
</html>
If you can fix the dropdowns it would be excellent. Thanks :)
I would consider using a script.js file instead of embedding it. If you go to http://scratchos.github.io/resorces/navbar.html it works just fine, the problem is that you're defaulting to your index.html (as you should), but it's not getting the code that you put straight into your navbar.html. Making a script file that both pages reference should fix your issue.
Just remove the plugins that are common in both the pages and that will fix it.
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;
}