i need to know, how to recreate the same effect that you can see on this page:
http://www.google.it/#q=meteo
There is a nice "widget" meteo, that i'm trying to recreate on my website.
When you click on one of the next day (bottom space of the widget) the middle content change.
How i can do it the same?
P.s.: sorry for my bad english.
If you don't have to load dynamic data, you can see this widget as a simple slider. Here's an example I made for you :
$('#widget .nav li').click(function(e) {
$('#widget .nav li').removeClass('active');
$(this).addClass('active');
$('#widget .content').animate({
left: $('#widget .nav li').index(this) * -265
}, 300);
});
#widget {
position: relative;
width: 265px; height: 200px;
overflow: hidden;
border: 1px solid #bcbcbc;
}
#widget ul {
list-style: none;
margin: 0; padding: 0;
}
#widget .nav {
position: absolute; bottom: 0; left: 0;
}
#widget .nav li {
display: block;
float: left; margin: 5px 0 5px 5px;
width: 30px; height: 30px;
text-align: center; line-height: 30px;
cursor: pointer;
border: 1px solid #dedede;
}
#widget .nav li:hover,
#widget .nav li.active {
background: #efefef;
border-color: #bcbcbc;
}
#widget .content {
position: absolute; top: 0; left: 0;
display: block;
width: 1855px; height: 150px; /* 1820 = 265*7 */
}
#widget .content li {
display: block;
float: left; padding: 5px;
width: 255px; height: 150px;
text-align: center; line-height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="widget">
<ul class="content">
<li>Content Monday</li>
<li>Content Tuesday</li>
<li>Content Wednesday</li>
<li>Content Thursday</li>
<li>Content Friday</li>
<li>Content Saturday</li>
<li>Content Sunday</li>
</ul>
<ul class="nav">
<li class="active">Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
</div>
Related
how can I achive something similar to the above ?
I tried adding active-item::bofore and positioning it absolute, with top:-28px. But my arrow doesn't display. I tried giving it z-index 1000; no luck it doesn't show:
#choose-cat {
width: 100%;
overflow: hidden;
box-sizing: border-box;
background: #fff;
border: 2px solid#b6d5e2;
border-radius: 4px;
margin: 0 auto;
padding: bottom 20px;
}
css:.cat-items {
position: relative;
}
.cat-items .active-item::before {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #397707;
bottom: -28px;
left: calc(50% - 10px);
}
.cat-items .active-item::before {
content: "";
display: block;
position: absolute;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="choose-cat">
<ul class="cat-items list-group list-group-horizontal list-unstyled" >
<li class="col-sm-3 active-item active cat-col">
<div class="cat-item">
<div class="cat-icon">
<i class="fa fa-car cat-icon main-color" aria-hidden="true">
</i>
</div>
<div class="cat-text">
Automative Vehicles
</div>
</div>
</li> ....
</ul>
</div>
Here is a concept on how you can achieve the desired result. Of-course not the only way.
.menu {
border-bottom: 1px solid orange;
}
.menu ul {
margin: 0;
list-style: none;
}
.menu ul li {
display: inline-block;
padding-bottom: 25px;
}
.menu ul li span {
border: 1px solid red;
display: inline-block;
padding: 10px 20px;
}
.menu ul li:hover span,
.menu ul li.active span {
background-color: green;
}
.menu ul li:hover,
.menu ul li.active {
background-image: url("https://cdn4.iconfinder.com/data/icons/geomicons/32/672416-triangle-up-256.png");
background-size: 15px;
background-repeat: no-repeat;
background-position: 50% 110%;
}
<div class="menu">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li class="active"><span>Team</span></li>
<li><span>Contact Us</span></li>
</ul>
</div>
I've added class cat-item to li element instead of div, then
.cat-item {
position: relative;
width: 140px;
}
.cat-items .active-item::before {
content: '';
display: block;
position: absolute;
top: 40px;
left: calc(50%);
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #397707;
transform: translateX(-50%);
}
I am trying to get my nav bar dropdown list to work using JavaScript.
I got everything working except for when I hover over the rest of the items, the dropdown only shows up under the first link? I tried working around it and putting it in lists but I'd rather not and when I do I just then end up ruining the whole nav bar.
Here's what I mean:
style.css
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#title {
background-color:white;
float: left;
padding-left: 2%;
position: absolute;
padding-top: 1.5%;
}
#nav {
background-color: white;
height: 79px;
min-width: 600px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 2;
}
#nav a {
text-decoration: none;
}
#nav a:link {
color: grey;
}
#nav a:hover {
background-color: lightgrey;
}
#nav a:visited {
color: maroon;
}
#nav a:active {
color: maroon;
}
#navLink {
padding-top: 2.5%;
padding-right: 2%;
letter-spacing: 3px;
float: right;
}
#navLink div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: whitesmoke;
}
#navLink div a {
position: relative;
display: block;
margin: 0;
width: auto;
padding: 5px 10px;
text-align: left;
}
.container {
width: 100%;
}
#content {
padding-top: 10%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom:0px;
left:0xp;
width:100%;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.stopFloat {
clear:both;
left: 0px;
right: 0px;
bottom: 0px;
}
Here's my navbar code snippet:
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<a href="index.html"
onmouseover="dropDown('dd1')"
onmouseout="closeddtime()">Home</a>
<div id="dd1"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
<a href="02_advLayout/index.html"
onmouseover="dropDown('dd2')"
onmouseout="closeddtime()">Content</a>
<div id="dd2"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
About Us
Coffee
Shop
Class
</div>
<a href="05_js_fw/index.html"
onmouseover="dropDown('dd3')"
onmouseout="closeddtime()">JS Framework</a>
<div id="dd3"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
Labs
</div>
</div>
The issue is with your DOM structure. In your code, you have to give separate left offsets for each drop-down to display it properly under the parent. But in case you are changing the navigation later, you have to adjust the css also to maintain alignment.
So i feel it is better to restructure your code. May be you can refer the below navigation. It is a simple css navigation with out any js.
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
li{
position: relative;
display: inline;
margin: 0 20px;
}
li ul{
position: absolute;
width: 150px;
left: 0;
top: 100%;
display: none;
}
li:hover ul{
display: block;
}
li ul li{
display: block;
margin: 10px 0;
}
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Sub menu</li>
<li>Sub menu
</li>
<li>Sub menu</li>
<li>Menu</li>
</ul>
</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</div>
</div>
I don't know how much of this code is necessary to show you, but I honestly can not figure out how to fix my problem so I'll just list it all. I have a dropdown menu for my mobile version of my site that is ALMOST complete. This is what it looks like when I pull up the menu (menu div):
Home
About
Contact
My problem now is the sub-menus. When I click on them I see something like this (empty space at top of li ul and next menu item covered up):
Home
<---empty space
My dropdown li
My dropdown li 2
My dropdown li 3
Contact
I've tried messing with margins, I've tried changing around display types, I've tried changing position types... The closest I've come to getting it to work correctly is to use a negative margin on the li ul to get rid of the empty space, but it still covers up the "about". I just don't understand what I can do to fix the css! Any help is greatly appreciated!!
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function() {
$("#nav").toggle();
});
$(window).resize(function() {
if (window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
ul {
width: 100%;
position: absolute;
top: 51px;
left: 0 !important;
z-index: 100;
}
li ul {
display: block;
width: 100%;
position: relative;
}
li ul li {} li {
width: 33%;
float: left;
list-style: none;
padding-left: 0;
}
li:last-child {
border-right: none;
}
li a {
display: block;
background: #879270;
padding: 4% 10%;
font-size: 1.35em;
text-decoration: none;
list-style: none;
text-align: left;
color: #000000 !important;
}
#media screen and (min-width: 768px) {
#menu {
display: none;
}
}
#media screen and (max-width: 768px) {
#menu {
width: 1.4em;
display: block;
background: #879270;
font-size: 1.35em;
text-align: center;
position: absolute;
z-index: 1000;
top: 15px;
right: 10px;
border-radius: 3px;
border: 1px solid #000000;
padding-top: 5px;
}
#nav.js {
display: none;
}
ul {
width: 100%;
}
li {
width: 100%;
border-right: none;
}
}
li.dropdown ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul id="nav">
<li class="dropdown">Home
<ul>
<li>My Dropdown li
</li>
<li>My Dropdown li 2
</li>
<li>My Dropdown li 3
</li>
</ul>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
You hava top value (top: 51px;) on ul which is inheriting to your sub-menus. Add top: 0; to li ul so that isn't iniherited on sub-menus.
ul {
width: 100%;
position: absolute;
top: 51px;
left: 0 !important;
z-index: 100;
}
li ul {
display: block;
width: 100%;
position: relative;
top: 0;
}
li ul li {}
li {
width: 33%;
float: left;
list-style: none;
padding-left: 0;
}
li:last-child {
border-right: none;
}
li a {
display: block;
background: #879270;
padding: 4% 10%;
font-size: 1.35em;
text-decoration: none;
list-style: none;
text-align: left;
color: #000000 !important;
}
#media screen and (min-width: 768px) {
#menu {
display: none;
}
}
#media screen and (max-width: 768px) {
#menu {
width: 1.4em;
display: block;
background: #879270;
font-size: 1.35em;
text-align: center;
position: absolute;
z-index: 1000;
top: 15px;
right: 10px;
border-radius: 3px;
border: 1px solid #000000;
padding-top: 5px;
}
#nav.js {
display: none;
}
ul {
width: 100%;
}
li {
width: 100%;
border-right: none;
}
}
li.dropdown ul {
display: none;
}
<ul id="nav">
<li class="dropdown">Home
<ul>
<li>My Dropdown li</li>
<li>My Dropdown li 2</li>
<li>My Dropdown li 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
$('li.dropdown').click(function() {
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
</script>
The navigation bar appears to be centered on my 15 inch laptop. But when I view it on a 27inch mac it is floated to the left and it is off center. I'm not totally sure how to center this so it appears to be centered on all monitors.
SITE ON SERVER
.navContainter{
width: 960px;
}
.nav {
height:60px;
background-color: rgba(0, 0, 0, 0.7);
position: -webkit-sticky;
list-style-type: none;
}
.nav ul {
float: left;
margin: 0 auto;
padding-left: 0px;
padding-top: 10px;
}
ul{
display: inline;
padding: 0;
}
li{
display:inline;
padding:5px;
font-size: 1.5em;
float: left;
margin-right: 50px;
margin-left: 100px;
position: relative;
font-family: "Josefin Slab",serif;
}
a{
width:60px;
color: #fff;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
<head class="navContainer">
<nav class="nav">
<ul>
<li>WEB</li>
<li>PHOTOGRAPHY</li>
<li><img src="img/demo/_small/logo.png"></li>
<li>DESIGN</li>
<li>VIDEO</li>
</ul>
</nav>
For .nav add text-align: center;
For .nav ul remove float: left; and add display: inline-block;;
I have a problem in my drop-down-menu (here's my fiddle: http://jsfiddle.net/iamthestig/Vhs2v/). When you click products there's a drop-down-menu on the left side, but the other navigation elements in the bottom slide down too. Is there a way to stop that from happening? I've been reading some tutorials for the drop-down-menu for a couple of hours. And that's why I have this code. But I can't achieve what I want to happen. Hope you guys can help me out. Thanks!
Here's my code:
HTML
<body>
<nav>
<ul class="nav">
<li>Home</li>
<li class="products">
Products
<ul class="subnav-products clearfix">
<li>Product One</li>
<li>Product Two</li>
<li>Product Three</li>
<li>Product Four</li>
<li>Product Five</li>
<li>Product Six</li>
</ul>
</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background: darkgray;
}
.nav {
width: 100px;
position: absolute;
top: 30px;
right: 20px;
list-style: none;
}
.nav li {
margin: 0 0 10px 0;
font-family: Helvetica;
font-size: 11px;
text-align: right;
text-transform: uppercase;
line-height: 1;
}
.nav li:nth-child(5) {
margin: 0;
}
.nav li a {
padding: 10px 10px 10px 0;
color: white;
text-decoration: none;
background: dimgray;
display: block;
}
.subnav-products {
width: 300px;
position: relative;
top: -31px;
left: -300px;
display: none;
}
.subnav-products li {
width: 150px;
margin: 0;
text-align: center;
float: left;
}
.subnav-products li a {
display:block;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
JS/JQUERY
$(".products").on("click", function(){
$(".subnav-products").slideToggle();
$(this).toggleClass("active");
});
I gave the a elements relative positioning, and then the .subnav elements absolute positioning. After a bit of messing with the position this is what I came up with...
http://jsfiddle.net/Vhs2v/2/
CSS
.nav li a {
padding: 10px 10px 10px 0;
color: white;
text-decoration: none;
background: dimgray;
display: block;
position: relative;
}
.subnav-products {
width: 300px;
position: absolute;
top: 41px;
left: -300px;
display: none;
}