I apologize for my lack of coding knowledge as I am fairly new to web designing. I've searched for a solution for days, trying different methods, and realized I need help.
Basically my code is programmed to illustrate a hamburger icon when the browser is shrunk, this works perfectly fine. What I am having issues with is that when I click on my hamburger icon, the dropdown menu will not display.
It used to work when I didn't add the line in the beginning, but my site was really slow and laggy. After adding the line, my javascript does not work at all and I'm lost.
Here is my code for html, css and js:
$('.hamburger').on('click', function () {
if ($('.menu').hasClass('open')) {
$('.menu').removeClass('open');
} else {
$('.menu').addClass('open');
}
});
#media only screen and (max-width: 768px) {
.hamburger {
cursor: pointer;
padding: 30px;
display: block;
}
.line {
border-bottom: 5px solid #fff;
width: 35px;
margin: auto;
margin-bottom: 6px;
}
.line:last-child {
margin-bottom: 0;
}
/* Our styles here */
#nav li {
width: 100%;
border-bottom: 1px solid white;
text-align: center;
border-top: 1px solid white;
border-bottom: none;
background: rgba(204, 204, 204, 1);
}
.menu {
height: 0;
overflow: hidden;
transition: height 0.3s;
margin: 0;
padding: 0;
margin-top:-14;
}
.open {
height: 255;
}
<!DOCTYPE HTML>
<body>
<div id="nav">
<div href="#" class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="clearfix menu">
<li>About Us</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
please msg if I need to provide any more info!!
You are giving the ul.open a height of 255 but the browser needs to know the unit (px/em/rem etc.). Setting this to 255px will fix your issue.
The reason you are experiencing this after setting a doctype is because by doing so you are setting your document to be rendered in standards mode instead of quirks mode. In standards mode you must specify units for dimensions, in quirks mode the browser assumes px.
I'm sorry if the question title isn't specific enough... but I really have no idea about the name of the feature I'm aiming here...
Here is the basic stuff at jsfiddle
<style>
body { margin: 0; text-align: center; }
ul { margin: 0; padding: 0; list-style: none; position: fixed; top: 0; width: 100%; display: flex; }
li { flex: 1; padding: 10px; border-bottom: 1px solid black; background: #fff; }
.current { background-color: #eee; }
#content { margin-top: 50px; }
#content > div { padding: 500px 15px; }
#content > div + div { border-top: 1px solid black; }
</style>
<ul id="nav">
<li id="nav-1" class="current">No.1</li>
<li id="nav-2">No.2</li>
<li id="nav-3">No.3</li>
<li id="nav-4">No.4</li>
<li id="nav-5">No.5</li>
</ul>
<div id="content">
<div id="content-1">#01: “First Chapter”</div>
<div id="content-2">#02: “Second Chapter”</div>
<div id="content-3">#03: “Third Chapter”</div>
<div id="content-4">#04: “Fourth Chapter”</div>
<div id="content-5">#05: “Fifth Chapter”</div>
</div>
When the top of the viewport haven't passed #content-2, #nav-1 would have the 'current' class.
When the viewport passed #content-2, #nav-1 would lose the 'current' class and #nav-2 would get the 'current' class.
and so on.
Some of the sites which I've seen using such feature are all using specific scripts, where one would need to made minor changes to the javascript when the number on objects in the content/nav changed.
I'm hoping to know a script where it could handle dynamic number of objects in the content/nav.
Can anyone show me how to do it?
Thank You.
This should be what you're looking for :
Javascript
$(document).ready(function(){
$(window).scroll(function(e){
for (var i = 1; i < $('#nav li').length; i++) {
if($(window).scrollTop() > $('#content-'+i).position().top){
$('#nav li').removeClass('current');
$('#nav-'+i).addClass('current');
}
};
})
});
http://jsfiddle.net/f7fg9t6e/1/
Do not forget to add jQuery to your project ;)
I am having some trouble using jQuery to hide my vertical menu. I just learned jQuery, so I am fairly new to using it. I can't get jQuery to modify anything (change color for example, using any action.. mouseenter(), click() etc)
Help is much appreciated.
EDIT: I am getting errors in JSLint.. trying to use jQuery in brackets editor. Not sure what to do :/ First error is on line 1 using $ before defined.. any help would be awesome
This code is simply trying to change the green "link1, link2, link3" text from green to purple when mousing over "Program"
***also, is there a way to easily reduce the size of my ul li items? The area that I can currently click is larger than the text. I tried modifying my display: property, but that messes up the layout of my list.. *******
jQuery
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
('#headerMenu ul li a').Color('purple');
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type='text/javascript' src='script.js'></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
DROP
<ul>
<li><a href='#'>LINK 1</a></li>
<li><a href='#'>LINK 2</a></li>
<li><a href='#'>LINK 3</a></li>
</ul>
</li>
<li>LOGIN</li>
<li>ABOUT</li>
</ul>
</div>
<div class="wrapper">
<div id="mainPhoto"> fffffff
<div> change color</div>
</div>
<div id="mainScrollUp"> </div>
</div>
</body>
</html>
css code
.header {
background-color: skyblue;
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;
}
#headerMenu > li {
display: inline-block;
text-align: center;
}
#headerMenu li a {
text-decoration: none;
color: black;
padding: 2rem;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#headerMenu ul {
text-decoration: none;
list-style: none;
display: block;
color: red;
padding-left: 0;
position:absolute;
}
#headerMenu ul li a{
color:green;
}
#mainPhoto {
height: 650px;
width: 100%;
background-color: bisque;
color:palevioletred;
}
#mainScrollUp {
z-index: 1;
height: 1000px;
width: 100%;
background-color: aqua;
clear: both;
}
.fixed {
position: fixed;
top: 0;
}
error is on line 1 using $ before defined
You forgot to define jQuery. Try and add the following line to your header tag in your HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Put it before your own script.js please, that way jQuery is defined before calling it in your script.
Understanding your vertical submenu goal, I came up with this:
https://jsfiddle.net/wsj59p20/
Hope it helps!
I don't think this is what you want but it fixes some of your syntax
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
$(this).find('ul>li>a').css('color', 'purple');
});
});
Also, your "using $ before defined" error seems to because you aren't loading jQuery at all in your sample code.
I'm required to build a menu with 5 options, upon clicking a certain one a new sub menu is to appear. I have absolutely no idea how to do this.
/**Navigation */
nav {
border: 1px solid red;
float: left;
margin-right: 35px;
min-height: 280px;
}
nav li {
text-decoration: none;
font-weight: normal;
color: red;
list-style: none;
}
/**Content */
#section {
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left: 180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
<div class="clearfix"></div>
<nav>
<ul>
<li> Home </li>
<li> Portfolio </li>
<ul>
<li>Commercial </li>
<li>Residential </li>
<li>Heritage </li>
<li>Rennovations </li>
</ul>
<li> Services </li>
<li> About Us </li>
<li> Contact Us </li>
</ul>
</nav>
In addition to the already mentioned checkbox hack, you could also use a button as menu items, and use the :focus state to display the dropdown menu. A benefit over this is that the menu will close if you click outside of it. Some HTML elements do not naturally receive focus upon clicks; for those, you can add the "tabindex" attribute to allow them to gain focus.
ul {
list-style: none;
}
.menu > li {
float: left;
}
.menu button {
border: 0;
background: transparent;
cursor: pointer;
}
.menu button:hover,
.menu button:focus {
outline: 0;
text-decoration: underline;
}
.submenu {
display: none;
position: absolute;
padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
display: block;
}
<ul class="menu">
<li>
<button>Home</button>
<ul class="submenu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li><button>More</button></li>
<li><button>Info</button></li>
</ul>
CSS does not have a click handler. For this reason it is impossible to do with standard CSS. You could use something called the checkbox hack, but in my humble opinion, it's a bit clunky and would be awkward to work with inside a navigation menu like your use-case requires. For this reason I would suggest jQuery or Javascript... Here is a rather simple solution using jQuery.
Basically, we hide the sub-nav from the start using display: none; Then, using jQuery, when ".parent" is clicked we toggle a class ".visible" to the sub-nav element (the nested UL) with display: block; which makes it appear. When clicked again, it disappears as the class is removed.
Note that for this to work, every nested <UL> which is a "sub-nav" MUST have the .sub-nav class, and it's parent element (the <LI>) MUST have the .parent class. Also, since this uses jQuery, you will need to hook up a jQuery library to your site. You can do this by hosting it yourself and linking it like you normally would, or you can link it from google's library service (recommended).
JSFiddle Demo
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
Of course I am late but:
You can trigger a css click using a hack!!
Work with an checkbox!!
Sample:
ul{
display: none;
}
#checkbox{
opacity: 0;
}
#checkbox:checked + ul {
display: block;
}
<div class="container">
<label for="checkbox">Dropdown menu</label>
<input id="checkbox" type="checkbox" />
<ul>
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
</ul>
</div>
You can use transitions to animate the show an hide effect :)
This is just a very simple example!!
Mention: this is a CSS3 hack if you need borwser support for old browsers this is not working.
In fact, there is a possibility to get this working with pure CSS and browser element behaviour, using the checkbox hack, however at the time of writing this, it is pushing what SHOULD be done with CSS vs what COULD be done with CSS. Also It can cause some pretty terrible semantic code (after all there is a reason it is usually stated as the checkbox HACK).
Having said that, you could use it if you only have requirements for modern browsers, giving limited functionality to others and I have myself used this in production code, on an isolated chrome only project and it is pretty fun to play with.
Here is a link to read more on it:
http://css-tricks.com/the-checkbox-hack/
But again to stress, like others have on here already, that functional behaviour should really be done via JavaScript. Unless you actually want a hover based menu solution then that is a different question all together!
You will need to do this using javascript and registering a click event handler to perform your action.
If you're new to everything then you should look for some javascript tutorials (don't use W3Schools, look elsewhere) and then look at some jQuery tutorials as jQuery simplifies tasks like these.
There are many frameworks that you can use with good looking menus for your needs, not to mention they support all devices (tablets, phones and PCs).
For example in the twitter bootstrap framework there is exactly what you need, check this tutorial:
Twitter bootstrap - Navs
Read the whole Nav section, at the end they talk about Nav with dropdown for more options.
The menu of the tutorial itself is built with the Twitter bootstrap framework.
a pure css solution to your problem looks like this
Demo: http://jsfiddle.net/HyGZf/1/
you need input and label and you have to remove the href on portfolio if you only want to use css
you can add transition: all 1s ease-in-out; to the submenu if you want it to be animate
/**Navigation */
nav{
border: 1px solid red ;
float: left;
margin-right:35px;
min-height:280px;
}
nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}
/**Content */
#section{
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left:180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#Portfolio:checked +ul ul#submenu{
height:80px;
}
#submenu{
overflow:hidden;
height:0px;
margin:0;
}
a[accesskey="2"]{
color:blue;
cursor:pointer;
text-decoration:underline;
}
the markup
<div class="clearfix"></div>
<nav>
<input id="Portfolio" type="checkbox" name="menu" hidden>
<ul>
<li> Home </li>
<li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>
<ul id=submenu type="list">
<li>Commercial </li>
<li>Residential </li>
<li>Heritage </li>
<li>Rennovations </li>
</ul>
<li> Services </li>
<li> About Us </li>
<li> Contact Us </li>
</ul>
</nav>
$('#open').on('click', function(e) {
simple_showpopup("popup", e);
});
function simple_showpopup(id, evt) {
var _pnl = $("#" + id);
_pnl.show();
_pnl.css({
"left": evt.pageX - ($("#" + id).width() / 2),
"top": (evt.pageY + 10)
});
$(document).on("mouseup", function(e) {
var popup = $("#" + id);
if (!popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide();
$(this).off(e);
}
});
}
$("#popup").hide();
.defa-context-panel {
border: 1px solid black;
position: absolute;
min-width: 200px;
min-height: 150px;
background-color: #f8f8f8;
border: solid 1px #f2f2f2;
border-radius: 10px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Open <span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>
<div id="popup" class="defa-context-panel">Content
<div>DIV inside</div>
</div>
The CSS:
#divMainMenu ul {
list-style-type: none;
padding: 5px 0;
height:400px;
}
#divMainMenu li {
height: 17px;
margin: 3px 0;
padding: 14px 2px;
border: 1px solid #eee7cb;
background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{
display: none;
}
The html and script:
<script type="text/javascript">
function Show(pObj)
{
pObj = document.getElementById(pObj).id;
if (document.getElementById(pObj).style.display=='none')
document.getElementById(pObj).style.display='block';
else
document.getElementById(pObj).style.display='none';
}
</script>
<div id="divSidePanel">
<div id="divMainMenu">
<ul>
<li onclick="Show('Buyers')">Buyers
<ul id="Buyers" style="display:none;">
<li>Search</li>
<li>Submit request</li>
<li>Send message to owner</li>
</ul>
</li>
<li>Sellers</li>
<li>Contact Us</li>
</ul>
</div>
</div>
The problem:
When I click on the text Buyers, it shows the sub/nested list. However, the other items do not make space for the nested list. Thus the nested list writes over the space of the main list.
Is this a problem with my code or is it the standard way it's meant to work? And is there a way to let the other items 'push down' making way for the nested items?
Thanks!
You need to use min-height: instead of height: in the CSS. If you know jQuery, the .hide() and .show() functions will work MUCH better.
Take this out of your css:
#divMainMenu li ul{
display: none;
}
And change the height property to min-height on your #divMainMenu li selector
Resultant css:
#divMainMenu ul {
list-style-type: none;
padding: 5px 0;
height:400px;
}
#divMainMenu li {
min-height: 17px;
margin: 3px 0;
padding: 14px 2px;
border: 1px solid #eee7cb;
background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{
}
Example