I am refining a responsive navigation menu, and would like to have the menu icon clicked to have the drop down menu instead of the hover effect. I am using a Google jquery so I am not sure if that is all ready scripted in the script src or not, and would I have to create the drop down menu manually in jquery or just an easy CSS or html5 fix. Thanks for any feedback.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dan Meier Website</title>
<meta name="description" content="Responsive Header Nav">
<meta name="author" content="Treehouse">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="layoutnew.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
header {
background: #404040;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #4C9CF1;
z-index: 100;
}
#logo{
margin: 20px;
float: left;
width: 200px;
height: 40px;
background: img src="images/menuicon.png" no-repeat center;
display: block;
}
nav {
float: right;
padding: 20px;
}
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
/*MEDIA QUERY*/
#media only screen and (max-width : 640px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
Use CSS to style and hide your menu and do the following:
Load jQuery (I can't see that in your code)
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
And you can do something like this (to show and hide the menu on click)
$('#menu-icon').click( function(){
$('nav ul').toggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
Where "menu" is the variable value of your menu. you can declare it like.....
$(function() {
var menu = $('ul li');
});
hope it will help you..... :D
Rj
Related
I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.
I have set the message to appear in a position of ‘left: 75%’ and ‘top:0’
The problem is that I fixed that position when I was testing the style on a 25 '' screen but when I went to my laptop that is 14 '' the message has 'hidden' and I can only see part of it.
Is there any way that the position of the posted message works for all the inches of the screens?
How could I solve this? Can someone tell me if this has a solution? Thank you.
Here is my code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg,duration)
{
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style","" );
styler.innerHTML = "<h1>"+msg+"</h1>";
setTimeout(function()
{
styler.parentNode.removeChild(styler);
},duration);
document.body.appendChild(styler);
}
</script>
<style>
#welcomeMessage{
font-family: Arial, Helvetica, sans-serif;
color:#4d4d4d;
background: rgba(0, 0, 255,0.6);
position:fixed;
padding:10px;
text-align:center;
left: 75%;
top:0;
margin-left:-5px;
width:500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
}
#div2 { /* Style the header */
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333; /*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white; /*#f9f9f9*/ /*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script> customAlert("Hello!", 2000)</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab 2</a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>
We say that 'responsive'. You can google it and find many examples about that.
If you want a quick tutorial:
Add this inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
And you can define your styles in css with media
#media only screen and (min-width: 768px) {
#welcomeMessage {
left: 50%;
}
}
This code will only work if window size is larger then 768px
I'm trying to do a static HTML & CSS webpage using flexbox but my conten doesn't fit into the window in Chrome browser. I can scroll horizontally, so I have more space horizontally than the browser window size.
This is an screenshot showing the problem. The margins are the same in the two sides of the wrapper, but the content is not fitted to 100% width of the browser window, so I can scroll horizontally, which is not what I want.
I've tried the same code in Safari and works perfectly. Is this an issue with flexbox in Chrome or what am I missing? Thanks.
This is my HTML:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS Stylesheets-->
<link rel="stylesheet" href="css/vendor/normalize.css">
<link rel="stylesheet" href="css/vendor/font-awesome.css">
<link rel="stylesheet" href="css/vendor/devicons.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- Header -->
<header>
<nav>
<ul>
<li>ELEMENT 1</li>
<li>ELEMENT 2</li>
<li>ELEMENT 3</li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<div class="main-wrapper">
<div class="search-bar">
<form>
<input type="text" placeholder="Search">
</form>
</div>
</div>
</main>
</body>
And this is my SCSS:
/* 2. HEADER */
nav {
width: 100%;
text-align: center;
background-color: $dark-grey;
& ul {
max-width: $width;
margin: auto;
display: flex;
}
& li {
flex: 1 1 0;
}
& a {
display: block;
color: $white-alpha;
padding: 30px 0px;
transition: color 0.3s ease;
}
& a:hover {
color: $white;
transition: color 0.3s ease;
}
& a.active {
color: $white;
}
}
/* 3. MAIN*/
main {
background-color: $light-grey;
padding: 30px 0px;
}
.main-wrapper {
max-width: $width;
margin: auto;
}
/* 3.1. SEARCH BAR */
.search-bar {
padding-bottom: 20px;
& input {
height: 45px;
width: 100%;
border-bottom: 1px solid $medium-grey;
border-radius: 2px;
text-indent: 20px;
}
}
As far as I can tell, your margins and box-model are likely the problem + you are using the & improperly.
You may also want to look into the default page margin and setting the box-model to border-box site wide.
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
For questions like these, make a CodePen or jsFiddle etc, with only the bare bones of what is needed to recreate the situation you are having trouble with. http://codepen.io/sheriffderek/pen/e76eb24c23c789accffe6a18fcfdd8c0 - even my example has more style than needed...
One more suggestion - if you are new to flex-box, it really helped me to write out the individual properties like flex-grow flex-shrink flex-basis instead of the short-hand + always explicitly set the flex-direction or any other defaults.
html { // sort out box-model
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body { // reset body margin default
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
html {
background: lightblue;
}
header, main {
padding: 1rem;
}
header {
background: white;
}
nav {
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
#media (min-width: 500px) {
flex-direction: row;
}
}
li {
flex: 1 1 0;
}
a {
display: block;
padding: 1rem;
&:hover {
background: black;
color: white;
}
&.actiive {
color: red;
}
}
}
main {
background: gray;
}
.main-wrapper {
max-width: 960px;
margin: auto;
}
.search-bar {
//
input {
height: 45px;
width: 100%;
text-indent: 20px;
background: black;
color: white;
border: 1px solid black;
}
}
After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!
There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar
This is my code:
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: gray;
}
#wrapper {
margin: 32px 160px 0 160px;
background-color: white;
height: 90%;
}
#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;
}
#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;
}
#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;
}
#nav ul li:hover {
background-color: #40E0D0;
}
#right {
margin: 0;
width: 15%;
height: 10px;
color: black;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li>Home</li>
<li>Help</li>
<li>Contact</li>
<li>Forum</li>
<li>Info</li>
</ul>
</div>
a
<noscript>Please enable JavaScript, you have it disabled</noscript>
</div>
</body>
</html>
I am not sure why this happens, so some help would be great to have.
Your ul has a 16px bottom margin
#nav ul {
margin-bottom: 16px;
}
NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour
Your <ul> tag is adding padding by default. Override it by adding:
ul{
margin-bottom: -1px;
}
would you be able to help me to position my navigation - "wrapperNav" completely left in the browser so there would be no gap between the blue navigation and the browser edge?
thanks a lot.
code: http://codepen.io/anon/pen/hKsCe
<header>
<div id="logo"><img src="images/logo.jpg" alt="logo"/></div>
<h1 id="adminHeader">Administrace webu</h1>
<div id="wrapperNav">
<nav>
<ul>
<li>Vložit obrázek</li>
<li>Editovat odkazy</li>
<li>Nahrát soubor</li>
<li>Editovat text</li>
</ul>
</nav>
</div>
</header>
#logo,
#adminHeader {
float: left;
display: inline;
width: 45%;
}
nav li {
list-style: none;
height: 100px;
color: #7E8AA2;
background: #263248;
min-width: 100px;
}
nav li:hover {
background: #000;
}
#wrapperNav {
margin-top: 70px;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
padding: 0;
position: fixed;
float: left;
display:block;
}
Fixed, you just needed to add in padding-left: 0px; to nav ul
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Administrace odkazů</title>
<link href="adminstyle2.css" rel="stylesheet" type="text/css">
<style type="text/css">
#logo, #adminHeader {
float: left;
display: inline;
width: 45%;
}
nav li {
list-style: none;
height: 100px;
color: #7E8AA2;
background: #263248;
min-width: 100px;
}
nav li:hover {
background: #000;
}
#wrapperNav {
margin-top: 70px;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
padding: 0;
position: fixed;
float: left;
display:block;
}
nav ul {
padding-left:0px;
}
</style>
</head>
<body>
<header>
</header>
<div id="logo"><img src="images/logo.jpg" alt="logo"/></div>
<h1 id="adminHeader">Administrace webu</h1>
<div id="wrapperNav">
<nav>
<ul>
<li>Vložit obrázek</li>
<li>Editovat odkazy</li>
<li>Nahrát soubor "credentials"</li>
<li>Editovat text</li>
</ul>
</nav>
</div>
</body>
</html>
#wrapperNav ul {
margin: 0;
padding: 0;
}
As need to be updated, I did on your example, try it once.
As a best practice you have to use css re-set for better styling. Because HTML tags has its own padding and margins, so using a re-set css, you can re--set them and control by yourself. Use following link for more. http://meyerweb.com/eric/tools/css/reset/
You are missing a reset. For example, put in your css:
* {
padding: 0;
margin: 0;
}
I have changed your code check it.
[http://codepen.io/anon/pen/Dvcgr][1]
I have a div, like this:
<div id="div1" name="div1" style="display:none;">
hello world
</div>
Thats on the bottom of my page. Now, when putting the mouse on an image, I want to show that div below the image. The problem is, I have 10 images next to each other and the div should be displayed below each of them dynamically, meaning putting the mouse on image 6 should display the div below image 6.
How can I do that?
Thanks!
This could be an approach if you want to use jQuery and want to move the div inside your DOM:
$(function() {
var div1 = $('#div1').remove();
$('img')
.bind('mouseenter', function() {
$(this).parent().append(div1);
})
.bind('mouseleave', function() {
div1.remove();
});
});
This can be accomplished by only CSS here is an working example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* { margin: 0; padding: 0; }
body { font: 12px Helvetica, Sans-Serif; }
img {width: 125px;}
#page-wrap { width: 125px; margin: 62px auto; }
h1 { font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0; }
.people { position: relative; width: 125px;}
a { text-decoration: none; color: #222; display: block; outline: none; padding: 5px; }
a img { border: 1px solid #ccc; }
a .name { font: 12px Georgia, Serif; width: 125px; display: none;}
a:hover .name { color: #900; font-weight: bold; position: relative; display: block;}
a:hover img { border: 1px solid #000; margin: 0px; }
a .photo { display: block; position: absolute; width: 125px; height: 125px; }
#toby .photo { top: 0; left: 0; position: relative;}
</style>
</head>
<body>
<div id="page-wrap">
<div class="people">
<a href="#toby" id="toby">
<div class="photo">
<img src="http://www.style-makeover-hq.com/images/what-is-my-face-shape-and-what-is-the-best-haircut-for-it-21276689.jpg" alt="Toby Pic" />
</div>
<div class="name">Toby Yong<br />
Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table.
</div>
</a>
</div>
</div>
</body>
</html>
Here is jsfiddle of it: http://jsfiddle.net/Ek4Ej/
Code is based on this article: http://css-tricks.com/remote-linking/
you can easily add more images with this effect on page or apply any style to it.
try this DEMO
$(function() {
$("#main").on("hover",".img img", function(){
pos = $(this).offset();
$(".box").css({"left":pos.left,"top":(pos.top + $(this).height())});
$(".box").show();
});
});