I'm trying to make slideshow images i'm learning step by step for now i want to know how to position text at center of the images then making images overlay in one position.Please take a look at my code (i'm sorry for my english) thank you.
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider{
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
}
.slide-contain {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
I'm trying to make slideshow images i'm learning step by step for now i want to know how to position text at center of the images then making images overlay in one position.Please take a look at my code (i'm sorry for my english) thank you.
I had added some code to these two classes.
Now your caption will be in the centre
Happy Coding
.slide {
position:relative;
}
.slide-contain {
position:absolute;
bottom:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
background:#efefef;
}
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider{
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
position:relative;
}
.slide-contain {
text-align: center;
position:absolute;
bottom:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
background:#efefef;
}
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
Your text is already over the background image. You just need to add background-position. Try this code.
body {
margin: 0;
}
li,
a {
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1,
#column2,
#column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider {
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
background-position: left top;
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
background-position: left top;
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
background-position: left top;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
position: relative;
}
.slide-contain {
text-align: center;
color: white;
position: relative;
height: 100%;
width: 100%;
}
.slide-contain span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Related
I have a timeline like this. But if there are a lot of points, it does not look very nice. How can I add functionality like a slider? To be displayed (only the first 5 years) and the rest to appear after the transition between years.
How can i do this? Or maybe there are some libraries with such functionality.
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
e.preventDefault();
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
body {
background: royalblue;
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
.time {
display: table-cell;
text-align: center;
}
.slide a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
a.deactive {
border: none;
width: 0px;
}
.slide i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
a.active>i {
transform:scale(5);
}
a.active~span {
display: block;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<a class="" href=""><i>1979</i></a><span> 1979 </span>
</div>
<div class="slide time">
<a class="active" href=""><i>1980</i></a><span> 1980 </span>
</div>
<div class="slide time">
<i>1981</i><span> 1981 </span>
</div>
<div class="slide time">
<i>1983</i><span> 1983 </span>
</div>
<div class="slide time">
<i>1984</i><span> 1984 </span>
</div>
</div>
</div>
I transparent the color of the scroll on the horizontal if you want to change it according to your taste
.slides :: - webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
* {
box-sizing: border-box;
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 0px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide > a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide > a > i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
.slide a.deactive {
border: none;
width: 0px;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
.slide a.active>i {
transform:scale(5);
}
.slide a.active~span {
display: block;
opacity: 1;
}
.time {
display: table-cell;
text-align: center;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
<div class="slider">
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<i>1979</i>
</div>
<div class="slide time">
<i>1980</i>
</div>
<div class="slide time">
<i>1981</i>
</div>
<div class="slide time">
<i>1982</i>
</div>
<div class="slide time">
<i>1983</i>
</div>
<div class="slide time">
<i>1984</i>
</div>
</div>
</div>
<div class="slides">
<div id="slide-1">
<span> 1979 </span>
</div>
<div id="slide-2">
<span> 1980 </span>
</div>
<div id="slide-3">
<span> 1981 </span>
</div>
<div id="slide-4" >
<span> 1982 </span>
</div>
<div id="slide-5">
<span> 1983 </span>
</div>
<div id="slide-6">
<span> 1984 </span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I'm trying to use buttons on the right/left sides to scroll horizontally in a div that has multiple a tags, so I can't use the same button to scroll to a #hashtag. What I am trying to do is exactly just as Google Images Search header for different tags:
Link to example
.prsc {
overflow-x: hidden;
overflow-y: hidden;
display: block;
padding-top: 1px;
}
.prs {
/* the elements inside */
display: inline-block;
height: inherit;
left: 20px;
padding-bottom: 5px;
padding-right: 5px;
position: relative;
vertical-align: top;
white-space: nowrap;
float: right;
}
.Jyg {
height: 80px;
margin: -10px 2px 0;
overflow: hidden;
display: block;
}
.ichpcnt {
-webkit-overflow-scrolling: touch;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
padding: 10px 0 0;
white-space: nowrap;
width: 100%;
display: block;
}
.Iyg {
margin-right: 6px;
display: inline-block;
}
.prc {
/* the whole inner */
margin: -30px 0px 0;
padding: 10px 0px 10px 0;
position: relative;
overflow: hidden;
}
.OYi {
height: 90px;
display: block;
}
.allPlacesBtn {
font-family: cairo;
margin-top: -40px;
margin-bottom: 25px;
font-size: 45px;
display: grid;
}
.prp {
background: white;
bottom: 0;
opacity: 1;
position: absolute;
top: 11px;
width: 20px;
z-index: 10;
display: block;
}
<div class="custHdrBtns">
<div class="allPlacesBtn"></div>
<div class="OYi prc">
<div class="prsc prse">
<div class="prs">
<div class="Jyg">
<div class="ichpcnt" id="scrollArea">
<div class="Iyg">
<div class="vc_btn3-container headBtns vc_btn3-center">
link
link
link
link
link
link
link
link
link
link
link
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the key is using white-space: nowrap;
$('#prev').on('click', function() {
$('#menu ul').animate({
scrollLeft: '-=100'
}, 300, 'swing');
});
$('#next').on('click', function() {
$('#menu ul').animate({
scrollLeft: '+=100'
}, 300, 'swing');
});
#menu {
position: relative;
}
ul {
width: 300px;
overflow: hidden;
white-space: nowrap;
display: block;
list-style: none;
padding: 0;
}
li {
width: 80px;
height: 50px;
display: inline-block;
text-align: center;
}
li:nth-child(odd) {
background-color: yellow;
}
li:nth-child(even) {
background-color: blue;
}
#nav {
position: absolute;
top: 0;
width: 300px;
}
#prev {
display: inline-block;
position: absolute;
left: 0;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
#next {
position: absolute;
right: 0;
display: inline-block;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item7</li>
</ul>
<div id="nav">
<div id="prev">Prev</div>
<div id="next">Next</div>
</div>
</div>
I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}
Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Just use display:none instead of visibility:hidden on class .nav-level-2
If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
When we click the id item on this menu it cover some bottom menu items. Instead of that I want a flexible menu, which means the drop item do not cover any other.
#demo {
margin: 30px 0 50px 0;
font-family: sans-serif;
}
#demo .wrapper {
display: inline-block;
width: 180px;
height: 20px;
position: absolute;
}
#demo .parent {
height: 100%;
width: 100%;
display: block;
cursor: pointer;
height: 150%;
background: #023b3b;
color: white;
z-index: 2;
position: relative;
text-align: center;
}
#demo .parent:hover,
#demo .content:hover ~ .parent {
background: #122112;
}
#demo .content:hover ~ .parent {
z-index: 0;
}
#demo .content {
position: absolute;
top: 0;
display: block;
z-index: 1;
height: 0;
width: 180px;
padding-top: 30px;
}
#demo .wrapper:active .content {
height: 100px;
z-index: 3;
}
#demo .content:hover {
height: 123px;
z-index: 3;
}
#demo .content ul {
background: #339933;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#demo .content ul a {
text-decoration: none;
}
#demo .content li:hover {
background: #122112;
color: white;
}
#demo .content li {
list-style: none;
text-align: left;
color: white;
font-size: 14px;
line-height: 30px;
height: 30px;
padding-left: 10px;
}
<div id="demo">
<div class="wrapper">
<div class="parent">Dashboard</div>
</div><br> <br>
<div class="wrapper">
<div class="parent">Apps</div>
<div class="content">
<ul>
<li>Inbox</li>
<li>Condact</li>
<li>Calender</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Layouts</div>
<div class="content">
<ul>
<li>Header</li>
<li>Aside</li>
<li>Footer</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Widjet</div>
</div>
</div>
Check if this could help you. I have added input and label.
#first {
float:left;
width:15%;
color :bisque;
border-color: #023b3b;
border-style : solid;
height: 100%;
background-color :#023b3b;
}
#boa{
height: 5%;
width: 20%;
float: left;
}
.bob{
text-indent: 200%;
line-height: 210%;
font-size: 150%;
font-family: sans-serif;
color: white;
font-weight: bold;
}
.boc{
text-indent: 4%;
color : white;
font-size: 83%;
font-family: sans-serif;
font-weight: normal;
}
.bod{
color:white;
font-size: 100%;
font-family: sans-serif;
line-height: 200%;
list-style-type: none;
}
#demo {
margin: 30px 0 50px 0;
font-family: sans-serif;
}
#demo .wrapper {
display: inline-block;
width: 180px;
}
#demo .parent {
padding: 5px;
display: block;
cursor: pointer;
background: #023b3b;
color: white;
position: relative;
text-align: center;
}
#demo .parent:hover,
#demo .content:hover ~ .parent {
background: #122112;
}
#demo .content:hover ~ .parent {
z-index: 0;
}
#demo .content {
height: 0px;
transition: height 0.3s;
z-index: 1;
width: 180px;
}
#demo .wrapper input[type=radio] {
position: absolute;
opacity: 0
}
#demo .wrapper:hover input[type=radio]:checked + .content {
height: 120px;
}
#demo .content:hover {
height: 123px;
z-index: 3;
}
#demo .content ul {
background: #339933;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#demo .content ul a {
text-decoration: none;
}
#demo .content li:hover {
background: #122112;
color: white;
}
#demo .content li {
list-style: none;
text-align: left;
color: white;
font-size: 14px;
line-height: 30px;
height: 30px;
padding-left: 10px;
}
<div id="first" style="float:left; lngth:60%; ">
<p><img src="image1.jpg" id="boa"><span class="bob">First</span></p>
<p class="boc" >Main</p>
<div id="demo">
<div class="wrapper">
<div class="parent">Dashboard</div>
</div><br> <br>
<div class="wrapper">
<label for="apps" class="parent">Apps</label>
<input type="radio" name="menu" id="apps" />
<div class="content">
<ul>
<li>Inbox</li>
<li>Condact</li>
<li>Calender</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<label for="layouts" class="parent">Layouts</label>
<input type="radio" name="menu" id="layouts" />
<div class="content">
<ul>
<li>Header</li>
<li>Aside</li>
<li>Footer</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Widjet</div>
</div>
</div>
<p class="boc">Componets</p>
<p class="boc">Help</p>
<p class="bod"> Documents</p>
</div>
You add code in jquery:
$("#demo").hide();
$(".boc").click(function(){
$("#demo").slideToggle();
});
I'm trying to fix a script so that I can toggle another div and show the content inside that div with an slideshow animation in jQuery. It dosen't work at all, so some help would be appericated.
<script type="text/javascript">
function toggleDivs(currentDiv)
{
if (currentDiv == 'music')
{
var $inner = $("#music-box");
}
else
{
var $inner = $("#inner");
}
if($inner.position().left == 0)
{
$inner.animate({
left: "400px"
});
}
else
{
$inner.animate({
left: "0px"
});
});
});
</script>
Heres the DIVS:
<div id="shadow"></div>
<div id="header">
<div class="navigation">
ARTIST
MUSIC
ABOUT
CONTACT
</div>
</div>
<div id="content">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F110558300"></iframe>
<iframe width="100%" height="166" scrollnig="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F108205158"></iframe>
<div id="target">
Dubstep
Electro House
</div>
<div class="contentbox">
<div id="inner">
<div id="music-box">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-widget">
<img src="http://dustla.com/images/soundcloud.png" alt="soundcloud"/>
<img src="http://dustla.com/images/twitter.png" alt="twitter"/>
<img src="http://dustla.com/images/facebook.png" alt="facebook"/>
<img src="http://dustla.com/images/youtube.png" alt="youtube"/>
</div>
</div>
Heres the CSS code:
/*************
STYLESHEET
*************************/
html, body {
height: 100%;
width: 100%;
position: absolute;
margin: 0 auto !important;
overflow-x: hidden;
font-family: verdana;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
body{
}
#header
{
width: 100%;
height: 145px;
background-color: #fff;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
position: relative;
z-index: 1;
}
#shadow
{
width: 100%;
height: 163px;
background-image: url('http://dustla.com/images/h_shadow.png');
background-repeat: repeat-x;
position: absolute;
z-index: 1;
margin-top: 30px;
}
.navigation a
{
border-bottom: 2px solid #000;
font-family: Comic Sans MS;
font-size: 24px;
color: #000;
margin-right: 50px;
text-decoration: none;
width: auto;
text-align: center;
}
.navigation
{
width: 600px;
margin: 0 auto;
padding-top: 50px;
}
.navigation a:hover
{
border-bottom: 5px solid #000;
}
#content
{
height: auto;
position: relative;
padding-top: 250px;
padding-bottom: 400px;
margin-bottom: -41px;
width: auto;
background-color: #ffF;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.contentbox
{
width: 100%;
background-image: url('http://dustla.com/images/lightpaperfibers.png');
/*height: auto;
margin-top: -780px;
background-color: #fff;
position: relative;
padding-right: -200px;
max-height: 750px;*/
overflow: hidden;
}
#footer
{
width: 100%;
height: 72px;
position: relative;
bottom: 0;
background-image: url('img/bg.png');
margin: 0;
color: #fff;
opacity: 0.9;
margin-top: 25px;
}
#footer-widget
{
width: 260px;
height: 28px;
float: right;
margin-right: 5px;
margin-top: 15px;
}
#footer-widget a
{
margin-right: 20px;
}
/*********************
JQUERY SLIDESHOW
**********************/
#slideshow
{
background-color: #000;
width: 400px;
height: 200px;
margin: 0;
position: relative;
}
#inner
{
background-color: #F00;
width: 100%;
height: 200;
margin: 0;
position: absolute;
}