I have downloaded the JQuery MMenu. I have followed the instructions and tried several fixes from StackOverflow, but still am not getting it to work. I modified the demo and got it to work, but after I copied the code and css, it still doesn't work. Thanks for your help and replies. (Most of the CSS is not mine. I'm using a W3Layout template for this site.)
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>High Rollers Car Club | Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- mobile menu -->
<link type="text/css" rel="stylesheet" href="dist/core/css/jquery.mmenu.all.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="dist/core/js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#mobilemenu").mmenu();
});
</script>
</head>
<body id="indexPg">
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img class="hideOnMobile" src="images/logoHRCC_275x275px.png" alt="" />
<div class="mHeader">
<!--<img class="hideOnDesktop mobileStyle" src="images/logoHRCC_275x275px.png" alt="" /> -->
</div> <!-- End mHeader -->
</div> <!-- End Logo -->
<div class="spacer"></div>
<div class="hideOnDesktop">
<nav id="mobilemenu">
<ul>
<li class="active"><span>Home</span></li>
<li><span>Garage</span></li>
<li class="has-sub"><span>Connect</span>
<ul>
<li><span>Event Calendar</span>
<!--<ul>
<li><span>Sub Item 1</span></li>
<li class="last"><span>Sub Item 2</span></li>
</ul> -->
</li>
<li><span>Membership</span></li>
<!--<ul>
<li><span>Sub Item 1</span></li>
<li class="last"><span>Sub Item 2</span></li>
</ul>-->
<li><span>Vendor Registration</span>
<li><span>Venue Sponsorship</span>
<li><span>Show Registration</span>
</li>
</ul>
</li>
<li><span>Calendar</span></li>
<li class="last"><span>Contact</span></li>
</ul>
</nav>
</div>
<div class="cssmenu hideOnMobile">
<ul>
<li class="active"><span>Home</span></li>
<li><span>Garage</span></li>
<li class="has-sub"><span>Connect</span>
<ul>
<li><span>Event Calendar</span>
<ul>
<li><span>Sub Item 1</span></li>
<li class="last"><span>Sub Item 2</span></li>
</ul>
</li>
<li><span>Membership</span>
<ul>
<li><span>Sub Item 1</span></li>
<li class="last"><span>Sub Item 2</span></li>
</ul>
<li><span>Vendor Registration</span>
<li><span>Venue Sponsorship</span>
<li><span>Show Registration</span>
</li>
</ul>
</li>
<li><span>Calendar</span></li>
<li class="last"><span>Contact</span></li>
</ul>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
font-family: Arial, Geneva,Helvetica, sans-serif;
font-size: 100%;
height: 100%;
}
.wrap{
margin:0 auto;
width:80%;
/*overflow: hidden;*/
}
.wrapper{
padding-top: 0;
padding-right: 4%;
padding-bottom: 0;
padding-left: 4%;
/*overflow: hidden;*/
position: relative;
}
/*start header */
.h_bg{
border-bottom: 8px solid #E6E6E6;
background-color: #161616;
}
.header{
padding: 2% 0;
position: relative;
}
.logo{
float: left;
}
.hideOnDesktop {
display: none;
}
.spacer {
background: #161616;
height: auto;
position: absolute;
top: 0;
right: 0;
}
.cssmenu {
position: absolute;
bottom: 0;
right: 0;
float: right;
}
.cssmenu > ul > li {
display:inline-block;
position: relative;
background: #f6f6f6; /* Old browsers */
background: -moz-linear-gradient(top, #f6f6f6 1%, #f0f0f0 19%, #efefef 39%, #ededed 59%, #dddddd 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f6f6f6), color-stop(19%,#f0f0f0), color-stop(39%,#efefef), color-stop(59%,#ededed), color-stop(98%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6f6f6 1%,#f0f0f0 19%,#efefef 39%,#ededed 59%,#dddddd 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6f6f6 1%,#f0f0f0 19%,#efefef 39%,#ededed 59%,#dddddd 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6f6f6 1%,#f0f0f0 19%,#efefef 39%,#ededed 59%,#dddddd 98%); /* IE10+ */
background: linear-gradient(to bottom, #f6f6f6 1%,#f0f0f0 19%,#efefef 39%,#ededed 59%,#dddddd 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}
.cssmenu > ul > li.active a{
color: #ffffff;
background: #9d9d9d; /* Old browsers */
background: -moz-linear-gradient(top, #9d9d9d 5%, #8d8d8d 40%, #7d7d7d 68%, #6d6d6d 82%, #5d5d5d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#9d9d9d), color-stop(40%,#8d8d8d), color-stop(68%,#7d7d7d), color-stop(82%,#6d6d6d), color-stop(100%,#5d5d5d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9d9d9d 5%,#8d8d8d 40%,#7d7d7d 68%,#6d6d6d 82%,#5d5d5d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9d9d9d 5%,#8d8d8d 40%,#7d7d7d 68%,#6d6d6d 82%,#5d5d5d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9d9d9d 5%,#8d8d8d 40%,#7d7d7d 68%,#6d6d6d 82%,#5d5d5d 100%); /* IE10+ */
background: linear-gradient(to bottom, #9d9d9d 5%,#8d8d8d 40%,#7d7d7d 68%,#6d6d6d 82%,#5d5d5d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#5d5d5d',GradientType=0 ); /* IE6-9 */
}
.cssmenu > ul > li span img {
vertical-align: middle;
}
.cssmenu > ul > li > a {
display: block;
font-family: 'Julius Sans One', sans-serif;
font-size: 1em;
color: #161616;
line-height: 3.8em;
padding: 14px 24px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
.cssmenu > ul > li > a:hover {
-webkit-transition: 0.9s;
-moz-transition: 0.9s;
-o-transition: 0.9s;
transition: 0.9s;
color: #ffffff;
background: #9d9d9d; /* Old browsers */
background: -moz-linear-gradient(top, #9d9d9d 5%, #8d8d8d 40%, #7d7d7d 68%, #6d6d6d 82%, #5d5d5d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#9d9d9d), color-stop(40%,#8d8d8d), color-stop(68%,#7d7d7d), color-stop(82%,#6d6d6d), color-stop(100%,#5d5d5d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9d9d9d 5%,#8d8d8d 40%,#7d7d7d 68%,#6d6d6d 82%,#5d5d5d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9d9d9d 5%,#8d8d8d 40%,#7d7d7d 68%,#6d6d6d 82%,#5d5d5d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9d9d9d 5%,#8d8d8d 40%,#7d7d7d 68%,#6d6d6d 82%,#5d5d5d 100%); /* IE10+ */
background: linear-gradient(to bottom, #9d9d9d 5%,#8d8d8d 40%,#7d7d7d 68%,#6d6d6d 82%,#5d5d5d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#5d5d5d',GradientType=0 ); /* IE6-9 */
}
.cssmenu > ul > li > ul {
font-family: 'Julius Sans One', sans-serif;
z-index: 999;
opacity: 0;
visibility: hidden;
padding: 8px;
background: #5C5C5C;
color:#fff;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-top: 34px;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
}
.cssmenu > ul > li:hover > ul {
display: block;
opacity: 1;
top: 65px;
visibility: visible;
}
.cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #5C5C5C transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
.cssmenu > ul ul > li {
position: relative;
}
.cssmenu ul ul a {
color: #ffffff;
font-family: 'Julius Sans One', sans-serif;
font-size: 13px;
background: #5C5C5C;
padding: 8px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
.cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
.cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 8px;
background-color: #fafafa;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
.cssmenu ul ul a:hover {
background: #4F4E4E;
color: #f0f0f0;
}
.mHeader a {
background: center center no-repeat transparent;
background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
display: block;
/*width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 10px;
}
Related
After pressing the panel, its contents are not displayed. The second and third panels are displayed at the bottom. I would like to display the content correctly after clicking on the second panel "About the website" and the third panel "Contact".
Here is the code from Codepen:
https://codepen.io/Krzysiek_39/pen/jObXzwP
Here is the code from JSFiddle:
https://jsfiddle.net/Krzysiek_35/me7nytL4/198/
$(document).ready(function() {
$('.tab').click(function() {
$('.tab').removeClass('active');
$(this).addClass('active');
});
$('.refresh').click(function(e) {
location.reload();
});
});
$(function() {
$("#tab1").addClass('one');
$('#tab1').click(function() {
$("#tab1").addClass('one');
$("#tab2").removeClass('one');
$("#tab3").removeClass('one');
});
$('#tab2').click(function() {
$("#tab1").removeClass('one');
$("#tab2").addClass('one');
$("#tab3").removeClass('one');
});
$('#tab3').click(function() {
$("#tab1").removeClass('one');
$("#tab2").removeClass('one');
$("#tab3").addClass('one');
});
});
body {
background-color: #363636;
font-family: Verdana;
margin: 0;
position: relative;
height: 180vh;
}
.header {
font-family: Verdana;
background-color: #191919;
position: absolute;
left: 5%;
margin-top: 20px;
}
.header .text a {
color: #77A0AC;
font-size: 24px;
text-decoration: none;
}
.text:hover {
cursor: pointer;
}
.tab-content {
left: 5%;
top: 10%;
position: absolute;
}
.tablist {
padding: 0;
list-style-type: none;
}
.tab {
float: left;
margin-left: 0px;
width: 180px;
line-height: 35px;
background-color: #33691e;
color: #DDDDDD;
font-family: Verdana;
letter-spacing: .025em;
font-size: 13px;
text-align: center;
text-decoration: none;
outline: none;
margin-right: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.tab:hover,
.tab:active {
color: #DDDDDD;
cursor: pointer;
background-color: #191919;
}
.tab.active {
background-color: #191919;
}
.tab.active:before,
.tab.active:after {
width: 20px;
height: 20px;
}
.tab:last-child {
float: right;
margin-right: 0px;
}
.one {
float: left;
margin-left: 0px;
width: 180px;
line-height: 35px;
background-color: #191919;
color: #DDDDDD;
font-family: Verdana;
letter-spacing: .025em;
font-size: 13px;
text-align: center;
text-decoration: none;
outline: none;
margin-right: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.curl-top-left {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
left: 0;
top: 0;
background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-left:hover:before,
.curl-top-left:active:before {
width: 20px;
height: 20px;
}
.first-curl {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.first-curl:before {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
top: 0;
background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.first-curl:after {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
left: 0;
top: 0;
background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.first-curl:hover:before,
.first-curl:active:before {
width: 20px;
height: 20px;
}
.first-curl:hover:after,
.first-curl:active:after,
.second-curl:hover:before,
.second-curl:active:before {
width: 20px;
height: 20px;
}
.second-curl {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.second-curl:before {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
top: 0;
right: 0;
background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(225deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-right {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.curl-top-right:before {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
top: 0;
right: 0;
background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(225deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-right:hover:before,
.curl-top-right:active:before {
width: 20px;
height: 20px;
}
.panel-1 {
clear: both;
width: 1000px;
}
.box1 {
background-color: #191919;
width: 100%;
}
.box1 .inner1 p {
padding: 70px 30px 70px;
font-size: 24px;
color: yellow;
}
.panel-2 {
clear: both;
width: 1000px;
}
.box2 {
background-color: #191919;
width: 100%;
}
.box2 .inner2 p {
padding: 70px 30px 70px;
font-size: 24px;
color: yellow;
}
.panel-3 {
clear: both;
width: 1000px;
}
.box3 {
background-color: #191919;
width: 100%;
}
.box3 .inner3 {
padding: 1px 0px 1px;
}
.box3 .inner3 ol>li {
display: block;
padding: 15px 0px 0px;
}
.box3 .inner3 ol>li span {
display: inline-block;
vertical-align: middle;
margin-bottom: 26px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<div class="text">
<a class="refresh" title="Refresh the web page">Click on me</a>
</div>
</div>
<div class="tab-content">
<ul class="tablist" role="tablist">
<li id="tab1" class="tab curl-top-left active" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Home</li>
<li id="tab2" class="tab first-curl second-curl" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">About the website</li>
<li id="tab3" class="tab curl-top-right" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Contact</li>
</ul>
<div id="panel1" class="panel-1" aria-labelledby="tab1" role="tabpanel" aria-hidden="false">
<div class="box1">
<div class="inner1">
<p>Home page is to be here (Slideshow)</p>
</div>
</div>
</div>
<div id="panel2" class="panel-2" aria-labelledby="tab2" role="tabpanel" aria-hidden="true">
<div class="box2">
<div class="inner2">
<p>Here will be information about the website</p>
</div>
</div>
</div>
<div id="panel3" class="panel-3" aria-labelledby="tab3" role="tabpanel" aria-hidden="true">
<div class="box3">
<div class="inner3">
<ol style="list-style-type: none">
<li>
<img src="pictures/contact/skype.png" width="34px" height="34px" />
<span style="color: #DDDDDD; font-size: 12px">My Skype name</span>
</li>
<li>
<img src="pictures/contact/gg.png" width="34px" height="34px" />
<span style="color: #DDDDDD; font-size: 12px">Gadu-Gadu number</span>
</li>
<li>
<img src="pictures/contact/mail.png" width="34px" height="34px" />
<span style="color: #DDDDDD; font-size: 12px">My email address</span>
</li>
</ol>
</div>
</div>
</div>
</div>
</body>
Do you know how to make all three panels run well?
I will be very grateful for effective help.
The code is not working because you are not hiding the content in your CSS or changing anything when tab is clicked.
You can add this to CSS to hide elements (except the first one) on initial load:
.tab-content > div
{
display: none;
}
.tab-content[data-show-tab='1'] div:nth-of-type(1)
{
display:block;
}
.tab-content[data-show-tab='2'] div:nth-of-type(2)
{
display:block;
}
.tab-content[data-show-tab='3'] div:nth-of-type(3)
{
display:block;
}
And add this to Javascript
$("#tab1, #tab2, #tab3").on("click", function () {
let id = jQuery(this).attr("id").replace("tab", "");
jQuery(".tab-content").attr("data-show-tab", id);
});
Change .tab-content tag to add data-show-tabs attribute to help toggling tab content:
<div class="tab-content" data-show-tab='1'>
You can also shorten your tab click handler to this one line:
jQuery(this).addClass("one").siblings("div").removeClass("one");
And this is a complete example:
$(document).ready(function() {
$('.tab').click(function() {
$('.tab').removeClass('active');
$(this).addClass('active');
});
$('.refresh').click(function(e) {
location.reload();
});
});
$(function() {
$("#tab1, #tab2, #tab3").on("click", function() {
let id = jQuery(this).attr("id").replace("tab", "");
jQuery(".tab-content").attr("data-show-tab", id);
jQuery(this).addClass("one").siblings("div").removeClass("one");
});
$("#tab1").addClass('one');
});
body {
background-color: #363636;
font-family: Verdana;
margin: 0;
position: relative;
height: 180vh;
}
.header {
font-family: Verdana;
background-color: #191919;
position: absolute;
left: 5%;
margin-top: 20px;
}
.header .text a {
color: #77A0AC;
font-size: 24px;
text-decoration: none;
}
.text:hover {
cursor: pointer;
}
.tab-content {
left: 5%;
top: 10%;
position: absolute;
}
/* Add this */
.tab-content>div {
display: none;
}
.tab-content[data-show-tab='1'] div:nth-of-type(1) {
display: block;
}
.tab-content[data-show-tab='2'] div:nth-of-type(2) {
display: block;
}
.tab-content[data-show-tab='3'] div:nth-of-type(3) {
display: block;
}
.tablist {
padding: 0;
list-style-type: none;
}
.tab {
float: left;
margin-left: 0px;
width: 180px;
line-height: 35px;
background-color: #33691e;
color: #DDDDDD;
font-family: Verdana;
letter-spacing: .025em;
font-size: 13px;
text-align: center;
text-decoration: none;
outline: none;
margin-right: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.tab:hover,
.tab:active {
color: #DDDDDD;
cursor: pointer;
background-color: #191919;
}
.tab.active {
background-color: #191919;
}
.tab.active:before,
.tab.active:after {
width: 20px;
height: 20px;
}
.tab:last-child {
float: right;
margin-right: 0px;
}
.one {
float: left;
margin-left: 0px;
width: 180px;
line-height: 35px;
background-color: #191919;
color: #DDDDDD;
font-family: Verdana;
letter-spacing: .025em;
font-size: 13px;
text-align: center;
text-decoration: none;
outline: none;
margin-right: 8px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.curl-top-left {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
left: 0;
top: 0;
background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-left:hover:before,
.curl-top-left:active:before {
width: 20px;
height: 20px;
}
.first-curl {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.first-curl:before {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
top: 0;
background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.first-curl:after {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
left: 0;
top: 0;
background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.first-curl:hover:before,
.first-curl:active:before {
width: 20px;
height: 20px;
}
.first-curl:hover:after,
.first-curl:active:after,
.second-curl:hover:before,
.second-curl:active:before {
width: 20px;
height: 20px;
}
.second-curl {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.second-curl:before {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
top: 0;
right: 0;
background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(225deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-right {
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.curl-top-right:before {
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
top: 0;
right: 0;
background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
background: linear-gradient(225deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
z-index: 100;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-right:hover:before,
.curl-top-right:active:before {
width: 20px;
height: 20px;
}
.panel-1 {
clear: both;
width: 1000px;
}
.box1 {
background-color: #191919;
width: 100%;
}
.box1 .inner1 p {
padding: 70px 30px 70px;
font-size: 24px;
color: yellow;
}
.panel-2 {
clear: both;
width: 1000px;
}
.box2 {
background-color: #191919;
width: 100%;
}
.box2 .inner2 p {
padding: 70px 30px 70px;
font-size: 24px;
color: yellow;
}
.panel-3 {
clear: both;
width: 1000px;
}
.box3 {
background-color: #191919;
width: 100%;
}
.box3 .inner3 {
padding: 1px 0px 1px;
}
.box3 .inner3 ol>li {
display: block;
padding: 15px 0px 0px;
}
.box3 .inner3 ol>li span {
display: inline-block;
vertical-align: middle;
margin-bottom: 26px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header">
<div class="text">
<a class="refresh" title="Refresh the web page">Click on me</a>
</div>
</div>
<div class="tab-content" data-show-tab='1'>
<ul class="tablist" role="tablist">
<li id="tab1" class="tab curl-top-left active" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Home</li>
<li id="tab2" class="tab first-curl second-curl" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">About the website</li>
<li id="tab3" class="tab curl-top-right" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Contact</li>
</ul>
<div id="panel1" class="panel-1" aria-labelledby="tab1" role="tabpanel" aria-hidden="false">
<div class="box1">
<div class="inner1">
<p>Home page is to be here (Slideshow)</p>
</div>
</div>
</div>
<div id="panel2" class="panel-2" aria-labelledby="tab2" role="tabpanel" aria-hidden="true">
<div class="box2">
<div class="inner2">
<p>Here will be information about the website</p>
</div>
</div>
</div>
<div id="panel3" class="panel-3" aria-labelledby="tab3" role="tabpanel" aria-hidden="true">
<div class="box3">
<div class="inner3">
<ol style="list-style-type: none">
<li>
<img src="pictures/contact/skype.png" width="34px" height="34px" />
<span style="color: #DDDDDD; font-size: 12px">My Skype name</span>
</li>
<li>
<img src="pictures/contact/gg.png" width="34px" height="34px" />
<span style="color: #DDDDDD; font-size: 12px">Gadu-Gadu number</span>
</li>
<li>
<img src="pictures/contact/mail.png" width="34px" height="34px" />
<span style="color: #DDDDDD; font-size: 12px">My email address</span>
</li>
</ol>
</div>
</div>
</div>
</div>
</body>
I have a card and images are fetched from BE. The image is a background image of a card. The text goes above this image. I need to add a gradient above the image and below text. Also when user hovers over the card, gradient color should change. How do I make the image to fill the entire card and show linear-gradient on an image?
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<img class="background" src="../scr/images/image.png">
<h2> Title
<h2>
</li>
</ul>
// enter code here
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
display:inline-block;
}
.pickgradient {
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<div class="pickgradient">
<img src="https://i.imgur.com/5I0iHYf.jpg" />
</div>
<h2> Title dfdf
</h2>
</li>
</ul>
try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: auto;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background-position: center center;
background-repeat: no-repeat;
background: #000;
background-size: cover;
width: 100%;
height: auto;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<img class="c-graidient__img" src="https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb" />
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>
Here is a solution, try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: 100vh;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background: #000 url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb) no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<div class="c-graidient__img"></div>
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>
I found a code which display a popup, but it works on transparenty (opacity: 0), and I want it to use display (display: none), because my website with transparent window in the middle doesn't work good.
Here's my code JS:
$(window).load(function(){
jQuery(document).ready(function ($) {
$('[data-popup-target]').click(function () {
$('html').addClass('overlay');
var activePopup = $(this).attr('data-popup-target');
$(activePopup).addClass('visible');
});
$(document).keyup(function (e) {
if (e.keyCode == 27 && $('html').hasClass('overlay')) {
clearPopup();
}
});
$('.popup-exit').click(function () {
clearPopup();
});
$('.popup-overlay').click(function () {
clearPopup();
});
function clearPopup() {
$('.popup.visible').addClass('transitioning').removeClass('visible');
$('html').removeClass('overlay');
setTimeout(function () {
$('.popup').removeClass('transitioning');
}, 200);
}
});
});
and there is my css
h1{
margin-top: 50px;
}
#popup_window{
padding: 10px;
background: #267E8A;
cursor: pointer;
color: #FCFCFC;
margin: 200px 0px 0px 200px;
}
.popup-overlay {
width: 100%;
height: 100%;
position: fixed;
background: rgba(196, 196, 196, .85);
top: 0;
left: 100%;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}
.overlay .popup-overlay {
opacity: 1;
left: 0
}
.popup {
position: fixed;
top: 25%;
left: 50%;
z-index: -9999;
}
.popup .popup-body {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
opacity: 0;
min-height: 150px;
width: 400px;
margin-left: -200px;
padding: 30px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
position: relative;
-moz-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
-webkit-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
text-align: center;
border: 1px solid #e9e9e9;
cursor: pointer;
}
.popup.visible, .popup.transitioning {
z-index: 9999;
}
.popup.visible .popup-body {
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.popup {
cursor: pointer;
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 150px;
right: 195px;
background: url("images/quit.png") no-repeat;
text-decoration: none;
color: #000;
}
a.popup-exit { text-decoration: none; font-size: 10px; color: #000; }
.popup .popup-content {
overflow-y: auto;
}
.popup-content .popup-title {
font-size: 24px;
border-bottom: 1px solid #e9e9e9;
padding-bottom: 10px;
}
.popup-content p {
font-size: 13px;
text-align: justify;
}
and PHP/HTML:
if (mysql_num_rows($query) > 0) {
while ($info = mysql_fetch_array($query)) {
//http://steamcommunity.com/my/tradeoffers/privacy
$content .= '
<div class="popup" id="popup-'.$info["id"].'">
<div class="popup-body">
<div class="right">x</div>
<center><b>'.$info["nazwa"].' (<i>'.$info["opis"].'</i>)</b></center>
<form action="index.php" method="POST">
<input name="AddReply" type="hidden" value="1">
<input name="id_s" type="text" value="'.$info["id"].'" style="display: none;" />
<input name="nazwa_s" type="text" value="'.$info["nazwa"].'" style="display: none;" />
<input name="opis_s" type="text" value="'.$info["opis"].'" style="display: none;" />
<input name="numer" type="text" value="'.zdobadzNumer($info["cena"]).'" style="display: none;" />
<table class="kupowanie" align="center">
<tr>
<td align="right">Dostępnych sztuk</td><td class="druga"><b>'.$info["dostepnych"].'</b></td>
</tr>
<tr>
<td align="right">Cena</td><td class="druga"><b>'.$info["cena"].' PLN</b></td>
</tr>
<tr>
<td align="right">Tre¶ć SMSa</td><td class="druga"><b>'.$info["tresc"].'</b></td>
</tr>
<tr>
<td align="right">Numer</td><td class="druga"><b>'.zdobadzNumer($info["cena"]).'</b></td>
</tr>
<tr>
<td align="right">Kod zwrotny</td><td class="druga"><input type="text" name="kod" /></td>
</tr>
<tr>
<td align="right">Link wymiany</td><td class="druga"><input type="text" name="link" /><br />
<span style="font-size:8px">
Kliknij <a target="_blank" style="text-decoration:none; color: #d10915;" href="http://steamcommunity.com/my/tradeoffers/privacy">tu</a> aby zdobyć.
</span></td>
</tr>
<tr>
<td colspan="2"><input '; if ($info["dostepnych"] == 0) { $content .= "disabled "; } $content .= 'type="submit" class="akceptuj" id="akceptuj" value="Akceptuj" /></td>
</tr>
<tr>
<td colspan="2">
<hr />
<table width="100%">
<tr>
<td width="50%"><img src="addons/images/cashbill.png" width="90%" /></td>
<td>Nie dostałe¶ kodu zwrotnego? Kliknij <a style="text-decoration:none; color: #d10915;" href="http://reklamacje.cashbill.pl/">tutaj</a>.</td>
</tr>
</table>
<hr />
</td>
</table>
</form>
</div>
</div>
';
}
Can you help me out to editing this to use display instead of opacity?
try to remove the space of popup-overlay at 0, so the click can pass through
.popup-overlay {
width: 0;
height: 0;
}
i could't test if works but maybe could be enough replace opacity with display property in the CSS.
.popup .popup-body {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
display:none;
....
and for the class .visible:
.popup.visible .popup-body {
display:block;
}
My scrolling div wont stretch the height of its parent container when resizing the browser or when toggling a button that adds an extra space on the top.
AUG 27 UPDATE
http://jsfiddle.net/ursp39s9/
The following jfiddle contains a code by ctwheels that has been modified to fit my needs, and as a result I've discovered the issue has to do with a show/hide button filter (Code provided below)
This button adds an extra space at the bottom when the button is pressed, and then dissapears when it's pressed again. However, this seems to be causing issues with the resizeable scrolling div container thats suppose to stretch to 100% height and width to fill the entire parent container. Instead I get a whitespace at the bottom all the time.
So please take a look at my jsfiddle, and see if you can help me fix this issue. Thanks!
Here's the problematic HTML:
<div id="feed-content">
<div id="networkfeed" class="feedpagetab activefeed">
<input type="checkbox" id="filterbutton" role="button">
<label for="filterbutton" onclick=""><span class="filterswitch">Show Me</span><span class="filterswitch">Hide Me</span> </label>
<br /><br />
<div class="borderline"></div>
<section class="filtercontent">
</section><!--Filtercontent ends here-->
And the CSS:
/*----- Show me Button-----*/
.filtercontent {
margin: 0;border-bottom:#000 solid 1px;
padding: 0; height:170px; margin-top:5px;
-webkit-box-sizing: border-box; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; color:#000;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.feedpagetab > section:first-of-type {
float: right;
width: 62.5%;
}
.feedpagetab > section:last-of-type {
display: none;
visibility: hidden;
}
.feedpagetab {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
#filterbutton[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="filterbutton"] {
position: absolute;
top:4px;
padding: 0;
left: 5%;
width: 80px;
text-align: center;
padding: 4px; font-weight:bold;
color: #555;
text-shadow: 1px 1px 1px #DDD;
font-family: Helvetica, Arial, "Sans Serif";
font-size: 13px;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
-moz-box-shadow: inset 0px 0px 1px 0px #FFF;
box-shadow: inset 0px 0px 1px 0px #FFF;
background: #EEE;
background: -moz-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F9F9), color-stop(100%,#DDD));
background: -webkit-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
background: -o-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#DDD',GradientType=0 );
background: linear-gradient(top, #F9F9F9 0%,#DDD 100%);
}
[for="filterbutton"]:hover {
color: #444444;font-weight:bold;
border-color: #BBB;
background: #CCC;
background: -moz-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F9F9), color-stop(100%,#CCC));
background: -webkit-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
background: -o-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#CCC',GradientType=0 );
}
[for="filterbutton"] span.filterswitch:last-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked {color:#FFA317;}
#filterbutton[type=checkbox]:checked ~ .filtercontent {
display: block;
visibility: visible;
width: 100%;
}
#filterbutton[type=checkbox]:checked ~ [for="filterbutton"] span.filterswitch:first-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked ~ [for="filterbutton"] span.filterswitch:last-of-type { color:#3CC;
display: block;
visibility: visible;
}
.borderline { width:100%; border-bottom:#000 solid 1px; height:0px;}
.filtercontent { margin-left:29%; }
I need to create horizontal menu with sliding option and submenu. Because of sliding option I have to set overflow on hidden, but than I have problem with submenu. I would appreciate any help or idea how to solve this problem.
.horizontalni {
border:solid 1px rgba(0,0,0,0.3);
border-radius:4px;
box-shadow:0 0 0 4px rgba(125,125,125,0.1);
padding:0;
position:relative;
width:auto;
max-width:800px;
background:silver;
overflow:hidden;
}
/* navigation items */
.horizontalni .navigation {
background:rgba(0,0,0,0.1);
color:rgba(255,255,255,0.1);
display:block;
font-family:verdana,sans-serif;
font-size:3em;
height:55px;
padding-top:0px;
position:absolute;
text-align:center;
text-shadow:rgba(0,0,0,0.1); 0 0 2px;
width:50px;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
}
.horizontalni:hover .navigation {
background:rgba(0,0,0,0.3);
color:rgba(255,255,255,0.8);
text-shadow:rgba(0,0,0,0.7); 0 0 2px;
}
.horizontalni .navigation:hover {
background:rgba(0,0,0,0.5);
}
.horizontalni .previous {
left:0;
}
.horizontalni .next {
right:0;
}
/* carousel container */
.horizontalni ul {
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;
display:-moz-box;
display:-ms-box;
display:-webkit-box;
display:-o-box;
display:box;
list-style-type:none;
margin-top:5px;
margin-bottom:5px;
padding:0;
}
/* standard width and height for the carousel items */
.horizontalni li {
border:solid 1px #333;
height:40px;
margin-right:10px;
width:auto;
min-width:150px;
max-width:300px;
}
/* animation properties for the carousel */
.animate ul {
-moz-transition:margin 1s;
-ms-transition:margin 1s;
-webkit-transition:margin 1s;
-o-transition:margin 1s;
transition:margin 1s;
}
/* different color for each of our items */
.horizontalni li {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
text-align: center;
}
.horizontalni a {
color: #ffffff;
display: inline-block;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
.horizontalni > ul > li a {
padding-left:10px;
padding-right:10px;
line-height: 40px;
filter: none;
}
.horizontalni > ul > li:hover {
background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
.horizontalni .has-sub:hover ul {
display: block;
z-index:1;
}
.horizontalni .has-sub ul {
display: none;
min-width: 100%;
text-align: center;
IE7
*width: 100%;
}
.horizontalni .has-sub ul li {
text-align: center;
}
.horizontalni .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
z-index:1;
}
<div id="carousel" class="horizontalni wrapper">
«
»
<ul>
<li >Test1</li>
<li ><a>Test2</a></li>
<li><a>Test3</a></li>
<li ><a>Test4</a></li>
<li ><a>Test5</a></li>
<li class="has-sub parent"><a>Test6</a>
<div class="wrapper">
<ul class="sub">
<li><a>Test61</a></li>
<li><a>Test62</a></li>
<li><a>Test63</a></li>
</ul>
</div>
</li>
<li class="child-element"><a>Test7</a></li>
<li class="child-element"><a>Test8</a></li>
<li class="child-element"><a>Test9</a></li>
</ul>
</div>
<script src="http://www.andismith.com/flexbox-carousel/library/js/modernizr.js"></script>
<script src="http://www.andismith.com/flexbox-carousel/library/js/common.js"></script>
Here is demo of this code: sliding menu demo
Setting the submenu to a fixed position should work.
.has-sub.parent .wrapper {
position: fixed;
}
Here is the JSFiddle