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;
}
Related
I want to create Y-axis like line in HTML and CSS. I want this line should look like Y-axis only.
I tried the following approach. It is working as per my expectation but it doesn't look good.
#mySpan{
writing-mode: vertical-lr;
transform: rotate(180deg);
}
<table >
<tr>
<td><span style="writing-mode: vertical-lr;
transform: rotate(180deg);"> <b>Secondary Axis</b></span></td>
<td>
<ul>
<br><br><br>
<li>3</li><br><br><br><br>
<li>2</li><br><br><br><br>
<li>1</li><br><br><br><br>
<li> 0</li><br><br><br><br>
</ul>
</td>
<td>
<div style="border-left: 1px solid black; height:250px;position:left;left: 50%;">
</div>
</td>
</tr>
</table>
Also it is consuming space in the top or bottom. May be it is because I have used br tag.
Does anyone suggest what changes/modification I need to do, so that it looks like Y-Axis.
Thanks
Here is the way you can create it,
Use display: flex; on parent to make child flexible
flex-direction: column; to show items in a column, if you will not give this then items will appear on single line like X asix.
justify-content: space-between; to devide the equal gap between items
Note: You can increase and decrease the numbers in LI, they will auto adjust.
.wrapper {display: flex;}
ul {list-style:none; height: 250px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid; }
li {
text-align:right;
position: relative;
padding-right: 5px;
}
li:after {
content: "-";
position: absolute;
top: 50%;
right: 0;
transform: translate(60%, -50%);
}
<div class="wrapper">
<ul>
<li>0.0005</li>
<li>13</li>
<li>12.44</li>
<li>1</li>
<li>.100</li>
</ul>
</div>
I think there are a lot of mistakes in your code..
The space problem is because your
The second problem is because you have used the vertical line as div with height style (you can enlarge the 250px (to catch the you have added))
in button line, if you planning to use this for adding formula or something this will not work for you.
start with html canvas or svg
ul {
list-style:none;
border-right: 1px solid;
width: 20px;
}
li {
margin-bottom: 125px
}
li:after {
content: "-";
padding-left: 9px;
}
<ul>
<li>3</li>
<li>2</li>
<li>1</li>
<li>0</li>
</ul>
You can use Pseudo elements and CSS counters
*{
box-sizing: border-box;
padding: 0;
margin:0;
}
body{padding: 6rem}
ul{
position: relative;
counter-reset: timeline-counter -1;
border-left: 1px solid black;
transform: scale(-1) rotateY(180deg);
}
ul li{
position: relative;
counter-increment: timeline-counter;
height: 32px;
color: white;
background-color: grey;
margin-bottom: 1rem;
list-style: none;
transform:rotateX(180deg);
line-height: 32px;
padding-left: 1rem
}
ul li:before {
content: "0" counter(timeline-counter);
position: absolute;
top: 8px;
left: -32px;
font-size: 1rem;
color: black;
line-height: 1;
}
ul li:after {
content: "";
--height-lenght: 1px;
position: absolute;
top: calc(50% - var(--height-lenght));
left: -6px;
width: 12px;
height: var(--height-lenght);
background-color: hsl(0deg 0% 0%);
}
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
<li>Line 6</li>
</ul>
Or using flex box
*{
box-sizing: border-box;
padding: 0;
margin:0;
}
body{padding: 6rem}
ul{
position: relative;
counter-reset: timeline-counter -1;
border-left: 1px solid black;
flex-direction: column-reverse;
display: flex;
}
ul li{
position: relative;
counter-increment: timeline-counter;
height: 32px;
color: white;
background-color: grey;
margin-bottom: 1rem;
list-style: none;
padding-left: 1rem;
line-height: 32px;
}
ul li:before {
content: "0" counter(timeline-counter);
position: absolute;
top: 8px;
left: -32px;
font-size: 1rem;
color: black;
line-height: 1;
}
ul li:after {
content: "";
--height-lenght: 1px;
position: absolute;
top: calc(50% - var(--height-lenght));
left: -6px;
width: 12px;
height: var(--height-lenght);
background-color: hsl(0deg 0% 0%);
}
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
</ul>
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>
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>
I'd like to create a navigation menu like this:
|main-item1|
|main-item2| |sub-item1| |sub-item2| |sub-item3|
|main-item3|
|main-item4|
what I see now is this:
|main-item1|
|main-item2|
|sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4|
I've found another question like this here on stackoverflow, but I couldn't manage to adapt the code.
The html code I have is this:
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li>Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
And this is the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative
}
It would be ok to use some jquery plugin, also because I'd like to add some effect on hovering, but I thought it was better to align everything with css first.
Thanks
try this:
#mainmenu>li {
height: 40px;
margin: 5px;
position: relative;
clear:both
}
and float to links:
#mainmenu a {
float:left;
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
overflow: hidden;
}
this is what you may want:
the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative;
}
#mainmenu .submenu li{
margin:0px;
}
and the html
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li style="clear:both;">Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
In html I added at "servizi" float left and in css i added :
#mainmenu .submenu li{
margin:0px;
}
So they are now at the same level.