A bit new to HTML, trying to create a dashboard. The state (ON, OFF, OPEN, or CLOSED) of a room or door should be indicated using an icon.
Have an open/close door image & lightbulbs Need help adding element to all the existing “li” elements.
Tried watching tutorials but they were too confusing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"> </script>
<script src="dashboard.js"> </script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<li class="dashboard_item kitchen">
<h4>Kitchen</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item frontdoor">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item balconydoor">
<h4>Balcony Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item livingroom">
<h4>Livingroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bedroom">
<h4>Bedroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bathroom">
<h4>Bathroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item studyroom">
<h4>Studyroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item hall">
<h4>Hall</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
</ul>
</body>
</html>
you either use onclick event to trigger a function when the tag is clicked
or add an Event listener to the tag, this is how you can solve the problem in two ways, here.
it's better here to use variables as a state to manage the current state of each item you have instead of relying on the text
checkout these resources:
https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/js/js_htmldom_eventlistener.asp
// use variables as state of each item you have
var livingRoomState = true;
function toggleKitchenLights() {
var status = document.getElementById("kitchen-light").innerHTML;
if (status === "OFF")
document.getElementById("kitchen-light").innerHTML = "ON";
else if (status === "ON")
document.getElementById("kitchen-light").innerHTML = "OFF";
}
var el = document.getElementById("livingroom-btn");
el.addEventListener('click', function() {
document.getElementById("livingroom-light").innerHTML = livingRoomState ? "ON" : "OFF";
livingRoomState = !livingRoomState;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"></script>
<script src="dashboard.js"></script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<li class="dashboard_item kitchen">
<h4>Kitchen</h4>
<p id="kitchen-light">OFF</p>
<button onclick="toggleKitchenLights()">Toggle</button>
</li>
<li class="dashboard_item frontdoor">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item balconydoor">
<h4>Balcony Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item livingroom">
<h4>Livingroom</h4>
<p id="livingroom-light">OFF</p>
<button id="livingroom-btn">Toggle</button>
</li>
<li class="dashboard_item bedroom">
<h4>Bedroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bathroom">
<h4>Bathroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item studyroom">
<h4>Studyroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item hall">
<h4>Hall</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"> </script>
<script src="dashboard.js"> </script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<li class="dashboard_item kitchen">
<h4>Kitchen</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<ol class="b"> <!-- in style.css add .b(list-style=none) do same for all lists add images as SVG add width and height as you need -->
<li class="dashboard_item frontdoor" >
<img src="./frontdoor.svg" width="50px" height="50px" alt="">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
</ol>
<li class="dashboard_item balconydoor">
<h4>Balcony Door</h4>
<p>CLOSED</p>
</li>
<li class="dashboard_item livingroom">
<h4>Livingroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bedroom">
<h4>Bedroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item bathroom">
<h4>Bathroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item studyroom">
<h4>Studyroom</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
<li class="dashboard_item hall">
<h4>Hall</h4>
<p>OFF</p>
<button>Toggle</button>
</li>
</ul>
</body>
</html>
Related
I have single page app where user should be able to select the value from the main menu and display container on the screen. If they select different value then everything but that container should not be visible. Here is example of my html.
$("#mainpg-menu li a").on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hearing Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id="keep-alive-config" content="<cfoutput>#Application.sessionMinutes#</cfoutput>"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="CSS/Main.css">
</head>
<body>
<div class="container" style="background-color:red; height:600px;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<p class="navbar-text"><b>Welcome to My Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu" id="mainpg-menu">
<li>Container 1</li>
<li>Container 2</li>
<li>Container 3</li>
<li>Container 4</li>
</ul>
</li>
<li>
<a href="#" data-toggle="popover">
<span class="glyphicon glyphicon-user"></span> jcrew</a>
</li>
<li>
<a href="#" data-toggle="confirmation">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container4"></div>
</div>
</body>
</html>
Each container should use the entire space of the main container and show the content. Every time user selects different container all other containers should be invisible. I have used this method:
$('.container > div[id=' + id + ']').show();
$('.container > div:not([id=' + id + '])').hide();
Where id should have currently selected element id. This works in majority of the browsers but I found some issues in Safari. For some reason previous container is not set to display:none. Since I'm using Bootstrap-twitter and JQuery I'm wondering if there is better way to handle this situation? I need something reliable and compatible in cross browsers. If anyone knows the best way to do this please let me know. Thank you.
You are using id's multiple times, an id should be used only once since it has to be unique. So I removed the id's from the navigation items!
I added the classname testclass to the divs that should be shown/hidden based on the decision made in the navigation, when an navigation item is clicked it will hide all elements with the class testclass.
Then I added the attribute data-target-id to the navigation items, this attribute will contain the id of the element (div) that should be shown again.
Still don't understand? Take a look at: https://codepen.io/joostm020/pen/YeRwJG
Example code:
$("#mainpg-menu li a").on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
$(".testclass").hide();
$("#" + $(this).attr("data-target-id")).show();
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hearing Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id="keep-alive-config" content="<cfoutput>#Application.sessionMinutes#</cfoutput>"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="CSS/Main.css">
</head>
<body>
<div class="container" style="background-color:red; height:600px;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<p class="navbar-text"><b>Welcome to My Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu" id="mainpg-menu">
<li>Container 1</li>
<li>Container 2</li>
<li>Container 3</li>
<li>Container 4</li>
</ul>
</li>
<li>
<a href="#" data-toggle="popover">
<span class="glyphicon glyphicon-user"></span> jcrew</a>
</li>
<li>
<a href="#" data-toggle="confirmation">
<span class="glyphicon glyphicon-log-in"></span> Logout</a>
</li>
</ul>
</div>
</nav>
<div class="testclass" id="container1">Test container1</div>
<div class="testclass" id="container2">Test container2</div>
<div class="testclass" id="container3">Test container3</div>
<div class="testclass" id="container4">Test container4</div>
</div>
</body>
</html>
You could simply put another identifier on all of the containers to reliably match them.
<div id="container1" container></div>
<div id="container2" container></div>
<div id="container3" container></div>
<div id="container4" container></div>
Then you can hide every container and only show the ID accordingly.
$('[container]').hide();
$('#' + id).show();
That should work in all but the most ancient browsers. If you need support for ancient browsers, instead of the custom attribute, you could use a custom class on those containers and select via that.
(Also note that, if you want to select by ID, you do not need to be unnecessarily specific. IDs are required to be unique)
I am trying to create a web page where there is a navigation bar containing three tabs. Each navigation tab contains a web page. I can't seem to display the website when the user clicks the tab. Can someone help me display the various web pages when a user clicks the different tab buttons? Note i am using bootstrap.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('#home').load('home.html');
$('#data').load('data/data.html');
$('#sauce').load('sauce/sauces.html');
</script>
</head>
<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Home</a></li>
<li><a data-toggle="tab" href="#data"> Data </a></li>
<li><a data-toggle="tab" href="#sauce"> Sauce </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container-fluid">
<div class="row">
<div id= "mapContainer" class="col-md-12">
<div id="map-canvas"></div>
</div>
<div id = "panelContainer" class="col-md-3 hidden">
<div id="right-panel"></div>
</div>
</div>
</div>
</body>
</html>
updated code as per your requirement.
//onloading
$("#myTab a").each(function () {
var target = $(this).attr("href");
$(target).load($(this).attr("data-page"))
});
//This is for tab click to load page
/*
$("#myTab a").click(function () {
debugger
var target = $(this).attr("href");
alert($(this).attr("data-page"))
$(target).load($(this).attr("data-page"))
});
*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home" data-page="home.html"> Home</a></li>
<li><a data-toggle="tab" href="#data" data-page="data.html"> Data </a></li>
<li><a data-toggle="tab" href="#sauce" data-page="sauce/sauces.html"> Sauce </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active"></div>
<div id="data" class="tab-pane fade in"></div>
<div id="sauce" class="tab-pane fade in"></div>
</div>
I'm having difficulty having my off-canvas menu in Foundation 5 toggle on and off, or at least not always appear on canvas. Below is a picture of the current site.
As shown, the offcanvas is very much on canvas
This is the HTML I am running so far. The content is not included as it is on a separate YAML file, but it should be unnecessary.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }} | Paly SJP</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/syntax.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/foundation/css/foundation.css">
<link rel="stylesheet" href="/assets/foundation/css/normalize.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
</head>
<body>
<div class="site">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="header">
<!-- Top Bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Paly SJP</h1>
</li>
</ul>
<!-- All tabs on right side -->
<section class="top-bar-section">
<ul class="right">
<li class="name">
ABOUT US
</li>
<li class="name">
CALENDAR
</li>
<li class="has-dropdown not-click">COHORTS
<ul class="dropdown">
<li>COHORT 1</li>
<li>COHORT 2</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<!-- Side bar -->
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>
Paly SJP
</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Menu</label>
</li>
<li>
Paly SJP
</li>
<li>
About Us
</li>
<li>
Calendar
</li>
<li>
<label>Cohorts</label>
</li>
<li style="background-color: #3B3B3B">
Cohort 1
</li>
</ul>
</aside>
<div class="content">
{{ content }}
</div>
<div class="footer">
<div class="row">
<div class="large-12 columns">
<h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
<a href="https://twitter.com/palysocjustice" target="_blank">
<img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
<a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
<img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
<a href="http://palysocialjustice.blogspot.com/" target="_blank">
<img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
If you inspect the aside element using the developer tools in Chrome or whatever browser you're using, the styles associated with the left-off-canvas-menu class are not present.
Re-upload the complete foundation.css file to ensure the appropriate styles are applied.
Hi guys i am new for foundation 5 and i tried to make a top bar for my website but drop down is not working here is my code please help
i was googling all the day but i was not able to find a solution for this. please help me. is it possible to occur issue like this due to foundation issue?
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel = "icon" href = favi.gif type="image/x-icon"/>
<link rel="stylesheet" href="css/normalize.css">
<script src="js/jquery.js"></script>
<script src="js/foundation.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/foundation.js"></script>
<script src="js/foundation.dropdown.js"></script>
<script src="js/foundation.topbar.js"></script>
<title>Music Eka</title>
</head>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
you haven't initialized foundation
add this at the end of your body.
<script>
$(document).foundation();
</script>
Bootstrap dropdown isn't working for me. I did everything correctly as you can see it there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<header>
<div class="header">
<div class="container">
<ul class="menu">
<li class="current"><span style="color: #bde2e1;">Home</li>
<li class="dropdown"><a class="dropdown-toggle" href="#">Servers</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
Bootstrap is a ready framework with features like grid system, rows, ready js menus and more.
There's an explanation of how it works:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
It doesn't work for me.
Yes, my src links correctly to the JS files.
your missing the body in your html.
put your script at the bottom of the page or after ready:
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>
demo: http://jsfiddle.net/rLL75/
EDIT:
use a newer version of jquery.
<header>
<div class="navbar navbar-static header">
<div class="navbar-inner container">
<ul class="nav" role="navigation">
<li class="brand"><span style="color: #bde2e1;">Home</span></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
<div id="logo"><img src="img/logo.png" /></div>
</div>
</div>
</header>
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>