Sliding CSS Javascript bar - javascript

Is it possible to have the blue bar under the list items shrink to the size of the list item clicked and position itself directly underneath it? Additionally, if the opposite list item is clicked, the bar would slide underneath it. Is this possible with just pure CSS or Vanilla JavaScript? Anything helps, cheers.
.buttons {
list-style-type: none;
margin:0px auto 0;
padding:0;
cursor: pointer;
width:100%;
text-align:center;
}
.buttons li {
float:left;
margin:0;
padding:0;
border-right:1px solid white;
line-height:45px;
font-size: 14px;
font-family:Verdana;
font-weight:bolder;
-moz-box-sizing:border-box;
color:#005bab;
background-color:#e2ecf6;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover{
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1{
content: "";
display:block;
height:0.5em;
width:100%;
background-color:#00688B;
}
#panelCanada,#panelInternational {
display: none;
}
<div class="topnav">
<ul class="buttons">
<li class="flip"> Canada</li>
<li class="flip">International</li>
</ul>
</div>
<br style="line-height:49px;"/>
<div class="bottombar1"></div>

You can use absolute positioning and alter the position and width of the bar based on the offsetLeft and offsetWidth of the li you clicked on.
var flip = document.getElementsByClassName("flip"),
bb = document.getElementById("bottombar1");
function clickHandler(el) {
el.addEventListener("click", function() {
var left = this.offsetLeft, width = this.offsetWidth;
bb.style.left = left + "px";
bb.style.width = width + "px";
});
}
for (var i = 0; i < flip.length; i++) {
clickHandler(flip[i]);
}
body {
margin: 0;
padding: 2em;
}
.topnav {
position: relative;
}
.buttons {
list-style-type: none;
margin: 0px auto 0;
padding: 0;
cursor: pointer;
width: 100%;
text-align: center;
overflow: auto;
}
.buttons li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid white;
line-height: 45px;
font-size: 14px;
font-family: Verdana;
font-weight: bolder;
-moz-box-sizing: border-box;
color: #005bab;
background-color: #e2ecf6;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover {
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1 {
height: 0.5em;
width: 100%;
background-color: #00688B;
position: absolute;
top: calc(100% + 5px);
transition: left .5s, width .5s;
left: 0;
}
.topnav {
position: relative;
}
<div class="topnav">
<ul class="buttons">
<li class="flip"> Canada</li>
<li class="flip">International</li>
</ul>
<div class="bottombar1" id="bottombar1"></div>
</div>

The more flexible way would be using JS, but yeah,
CSS, why not...
Use hidden <input type="radio" id="" name=""> and than use CSS's nearest sibling ~ to target any desired next-near sibling element selector.
The elements to trigger the :checked state change are the <label for=""> elements that need to be placed inside the LI elements:
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
ul.buttons {
padding: 0;
display: flex;
list-style: none;
}
ul.buttons li {
flex: 1;
text-align: center;
color: #005bab;
background-color: #e2ecf6;
}
ul.buttons li label{
display: block;
padding: 16px;
cursor: pointer;
}
ul.buttons li:hover {
color: #005bab;
background-color: #d2e2ef;
}
.bottombar{
position: relative;
height: 0.5em;
background: #00688B;
width:100%;
left: 0;
transition: 0.6s;
}
/* don't show radio buttons switchers
and content */
input[id^=switch],
[id^=switchContent]{
display:none;
}
/* when :checked, target the nearest sibling bottombar */
#switch1:checked ~ .bottombar{
width: 50%;
left:0;
/*transform: translateX( 0% );*/
}
#switch2:checked ~ .bottombar{
width: 50%;
left: 50%;
/*transform: translateX( 100% );*/
}
/* Show content */
#switch1:checked ~ #switchContent1{
display: block;
}
#switch2:checked ~ #switchContent2{
display: block;
}
<div class="topnav">
<ul class="buttons">
<li><label for="switch1">Canada</label></li>
<li><label for="switch2">International</label></li>
</ul>
</div>
<input id="switch1" type="radio" name="sw_1">
<input id="switch2" type="radio" name="sw_1">
<div class="bottombar"></div>
<div id="switchContent1"><h1>CANADAAA</h1></div>
<div id="switchContent2"><h1>INTERNATIONALLL</h1></div>

This is Luddens Desirs answer in Vanilla Javascript. It requires a bit more manual labor, so for the slight performance boost using CCS3 animations for such a simple effect, it would be better to go with the other javascript animation answers.
// store relevent elements
var can = document.getElementById('can');
var int = document.getElementById('int');
var botBar1 = document.getElementsByClassName('bottombar1')[0];
can.addEventListener("click", function() {
// replace classes with first class name
botBar1.className = botBar1.className.split(" ")[0];
// add class
botBar1.className += ' toCanada';
});
int.addEventListener("click", function() {
// replace classes with first class name
botBar1.className = botBar1.className.split(" ")[0];
// add class
botBar1.className += ' toInternational';
});
.buttons {
list-style-type: none;
margin:0px auto 0;
padding:0;
cursor: pointer;
width:100%;
text-align:center;
}
.buttons li {
float:left;
margin:0;
padding:0;
border-right:1px solid white;
line-height:45px;
font-size: 14px;
font-family:Verdana;
font-weight:bolder;
-moz-box-sizing:border-box;
color:#005bab;
background-color:#e2ecf6;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover{
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1{
content: "";
display:block;
height:0.5em;
width:100%;
background-color:#00688B;
-webkit-transition: all 1s; // Chrome
-moz-transition: all 1s; // Mozilla
-o-transition: all 1s; // Opera
transition: all 1s;
}
.toInternational{
transform: translate(25%, 0px) scaleX(.5);
}
.toCanada{
transform: translate(-25%, 0px) scaleX(.5);
}
<script src="https://unpkg.com/jquery#3.1.0/dist/jquery.min.js"></script>
<div class="topnav">
<ul class="buttons">
<li id = "can" class="flip"> Canada</li>
<li id = "int" class="flip">International</li>
</ul>
</div>
<br style="line-height:49px;"/>
<div class="bottombar1"></div>

Related

JQuery category filter breaks when a category is more than 2 words

I am using Jquery to show project categories and filter the projects by which category is selected.
View the code pen here: https://codepen.io/saintasia/pen/dzqZov
HTML:
<body>
<div class="container">
<nav>
<ul>
<li class="current">All projects</li>
<li>Front-end</li>
<li>Back-end</li>
<li>Apps</li>
<li>Design</li>
<li>Testing Testing Testing</li>
</ul>
</nav>
<div id="projects">
<h1 class="heading">All Projects</h1>
<ul id="gallery">
<li class="design"><img src="https://source.unsplash.com/jjtdL443L4w/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/b18TRXc8UPQ/700x700"></li>
<li class="apps design"><img src="https://source.unsplash.com/klRB1BB9pV8/700x700"></li>
<li class="front-end testing-testing-testing back-end"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="front-end design"><img src="https://source.unsplash.com/1vwwZ-BmmrE/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/WLOCr03nGr0/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/iOykDIkZLQw/700x700"></li>
</ul>
</nav>
</div>
<!-- modal gallery -->
<div class="gallery">
<a class="close" href="#">
<i>
<span class="bar"></span>
<span class="bar"></span>
</i>
</a>
<img src="">
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
body {
color: #333;
font-size: 13px;
background: #f4f4f4;
font-family: sans-serif;
overflow:auto;
}
.container {
width: 90%;
max-width: 960px;
margin: 30px auto;
position: relative;
text-align: center;
}
h1 {
margin-bottom: 20px;
text-transform: uppercase;
color: #F39CC3;
}
nav {
display: block;
width: 100%;
}
ul {
list-style: none;
margin-bottom: 20px;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
text-transform: uppercase;
padding: 4px 10px;
margin-right: 2px;
margin-left: 2px;
text-decoration: none;
color: #27A4DD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
border: 1px solid #27A4DD;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.hidden {
display: none;
}
nav > ul > li > a:hover, .current a {
color: #fff;
background-color: #27A4DD;
}
#projects > ul > li {
display: inline-block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
width: 23%;
height: auto;
cursor: pointer;
border-radius: 5px;
/* Padding stays within the width */
box-sizing: border-box;
position: relative;
opacity: 0.7;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#projects > ul > li:hover {
opacity: 1;
}
img {
max-width: 100%;
border-radius: 5px;
}
.gallery {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
padding: 40px 10px;
display: none;
box-sizing: border-box;
}
.gallery > img {
max-height: 100%;
width: auto;
}
.close i {
position: fixed;
top: 10px;
right: 10px;
height: 30px;
width: 30px;
}
.bar {
display: block;
position: absolute;
top: 13px;
float: left;
width: 30px;
border-bottom: 4px solid #fff;
transform: rotate(45deg);
}
.bar:first-child {
transform: rotate(-45deg);
}
#media (max-width: 768px){
#projects > ul > li {
width: 48%;
}
}
#media (max-width: 568px) {
#projects > ul > li {
width: 100%;
}
}
JS:
$(document).ready(function(){
// filter
$('nav a').on('click', function(event){
event.preventDefault();
// current class
$('nav li.current').removeClass('current');
$(this).parent().addClass('current');
// set new heading
$('h1.heading').text($(this).text());
// filter link text
var category = $(this).text().toLowerCase().replace(' ', '-');
// remove hidden class if "all" is selected
if(category == 'all-projects'){
$('ul#gallery li:hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#gallery li').each(function(){
if(!$(this).hasClass(category)){
$(this).hide().addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
// lightbox
$('ul#gallery a').on('click', function(event){
event.preventDefault();
var link = $(this).find('img').attr('src');
$('.gallery img').attr('src', '');
$('.gallery img').attr('src', link);
$('.gallery').fadeIn('slow');
});
// close lightbox
$('.gallery').on('click', function(event){
event.preventDefault();
$('.gallery').fadeOut('slow');
});
});
The problem I am having is that if a category is more than 2 words, it doesn't show the projects with that category. You'll see in the code pen that there is a category called "Testing Testing Testing" and one of the projects has that category assigned to it. But, when you click the Testing Testing Testing category, no projects show up. All of the other categories work however, because they are all only 2 words long.
Any help is greatly appreciated!
Your code break because the .replace(' ', '-') code just replace the first space
if you want to change all space with '-', you should change this code
var category = $(this).text().toLowerCase().replace(' ', '-');
to this
var category = $(this).text().toLowerCase().split(' ').join('-');

Dropdown pushing logo downwards

I'm doing a custom drop-down navigation but when it toggles the logo, in this codepen represented by the blue div, goes to the bottom of the navigation. I've been trying to work around this for a while now and would appreciate any help.
Here is my code:
HTML
<div class='container-fluid nav'>
<div class='container'>
<div class = 'nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class = 'nav__btn bar1'></div>
<div class = 'nav__btn bar2'></div>
<div class = 'nav__btn bar3'></div>
</div>
<ul class = "nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class='nav__brand u-inlineBlock'>
logo
</div>
</div>
</div>
CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child{
border-bottom: none;
}
.nav__dropdown li:hover{
background: black;
color: seashell
}
.u-inlineBlock {
display: inline-block;
}
JS
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
After this, I'll try to add a sub menu on the right side, so if you could point me in the right path for that as well that would be great
(Notice that this is just a bonus for me, I don't care if you don't help me with that so don't downvote for being too broad or something like that. I also saw some similar questions but they did not help)
Thanks in advance!
Just move the logo before the ul, and remove the margin-top from the ul. And if you want the toggle button and submenu to be flush with the white header, remove .nav { height: 75px; }
function animateNavbarToggle(x) {
x.classList.toggle("toggled");
}
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: pink;
height: 2000px;
}
/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/
.nav {
background-color: white;
height: 75px;
}
.nav__brand {
height: 68px;
width: 227px;
background-color: lightblue;
text-align: center;
}
/**
* Navigation dropdown button
*/
.nav__btn {
width: 22PX;
height: 3px;
background-color: black;
margin: 4px 0;
}
.nav__btn--toggle {
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 22PX;
height: 3px;
background-color: coral;
margin: 4px 0;
transition: 0.4s;
}
/* Rotate first bar */
.toggled .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 5px);
transform: rotate(-45deg) translate(-5px, 5px);
}
/* Fade out the second bar */
.toggled .bar2 {
opacity: 0;
}
/* Rotate last bar */
.toggled .bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -6px);
}
/**
* Navigation Dropdown
*/
.nav__dropdown {
padding-left: 0;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child {
border-bottom: none;
}
.nav__dropdown li:hover {
background: black;
color: seashell;
}
/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-inlineBlock {
display: inline-block;
}
.u-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class='container-fluid nav'>
<div class='container'>
<div class='nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class='nav__btn bar1'></div>
<div class='nav__btn bar2'></div>
<div class='nav__btn bar3'></div>
</div>
<div class='nav__brand u-inlineBlock'>
logo
</div>
<ul class="nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
try adding position: fixed to your nav__dropdown CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
position: fixed;
}
Position fixed essentially removes the content from the flow of the document window, which makes it not cause any interactions with your logo.
More on position fixed here

How to keep navigation tab remain unchanged

When I click a button on the sidebar, and if the current tab is the second tab the navigation tab is going to display the first tab as the second tab lost the focus. How can I keep the second tab in display while clicking a button on the sidebar?
the code is in jsfiddle
https://jsfiddle.net/98okrj0f/9/
The AngularJs scripts works at my local. Can anyone also tell me how to make it work in jsfiddle?
HTML Code here
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nav</title>
<link href="nav.css" rel="stylesheet"/>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<!-- -->
<body ng-app="App" >
<nav>
<ul> <span>My App</span>
<li class="sub">
Version
<ul>
<li class="sub">
V2
<ul ng-controller="V2Ctrl">
<li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</li>
</ul>
</li>
<li class="sub">
V3
<ul ng-controller="V3Ctrl">
<li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<aside class="side" align="left">
<table onclick="reply_click(event)" ng-app="App" ng-controller="TableCtrl" >
<tr ng-repeat = "table in tables">
<td><button id = "{{table}}" width = "70">{{table}}</button></td>
</tr>
</table>
</aside>
<article class="tabs">
<section id="erd">
<h2>ERD</h2>
<p>This content appears on tab ERD.</p>
</section>
<section id="col">
<h2>Columns</h2>
<p>This content appears on tab Columns.</p>
</section>
<section id="home">
<h2>Home</h2>
<p>This content appears on tab Home. lfkdgl;k lkfd;lkg ';lkfg ;lkg 'df;lk ;lk ';lk ';fdlkg ';fdlkg';dflk;ldfkg';lkdlfkdfkglkdf lkjhlsdjhfljdfhlkjdh jh jhkjdhfkjsdhf skjdhf lk h dsfjlkjsdlkfj;dslkfj dskfj;kj sdfkj fkdj;lfkjsd;lkfj sdkfj ;slkj sdfj;lskjf skdj flksjdf ; sdfkj ;sdlkfj dskfj sdkjfhueuu suehu heu he u heu heh ueh ufhu fhe uueh ush uhsudh ue huhuhufheuheu u heiu h euh eh ue </p>
</section>
</article>
<footer align="bottom">
<span>"Copyright© 2016 </span></span>
</footer>
<script>
var app = angular.module('App', []);
app.controller('TableCtrl', function($scope) {
$scope.tables = ['category','supplier','customer','dept','empl','orders'];
});
app.controller('V2Ctrl', function($scope) {
$scope.V2s = ['2.10','2.11','2.12','2.13','2.14','2.15','2.16','2.17','2.18','2.19','2.20','2.21','2.22','2.23','2.24','2.25','2.26','2.27','2.28'];
});
app.controller('V3Ctrl', function($scope) {
$scope.V3s = [' ',' SP1',' SP2',' SP3',' SP4',' SP5',' SP6',' SP7',' SP8',' SP9',' SP10'];
});
</script>
</body>
</html>
CSS code here.
#logo{
position: absolute;
right:10px;
bottom: 10px;
}
body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
padding: 0;
z-index: 9999;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
text-align: center;
}
na ul span {
width: 300px
margin-top: 250%;;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 1em;
/*padding: 0.5em 2em;*/
padding: 0.2em 3em;
text-decoration: none;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 1em;
padding: 0.2em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
nav li > ul > li ul {
display: none;
background-color: #888;
}
nav li > ul > li:hover > ul {
position:absolute;
display : block;
margin-left:100%;
margin-top:-3em;
}
nav ul > li.sub{
background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
nav ul > li.sub li.sub{
background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
/*****************************************************************************/
aside {
display: block;
position: absolute;
width: 80px;
height: 550px;
padding-right: 0;
margin: 0;
overflow: auto;
background-color: lightblue
}
article {
/* position: relative; */
}
article.tabs
{
position: relative;
display: block;
width: 1100px;
height: 500px;
margin: 2em;
margin-left:80px;
background-color: green;
}
article.tabs section
{
position: absolute;
display: block;
left: 0;
width: 1100px;
height: 500px;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.5em;
top: -1.5em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
/*
article.tabs section:nth-child(3) h2
{
left: 254px;
}*/
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.5em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
footer
{
color: #999;
text-align:center
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
the update jsfiddle.
https://jsfiddle.net/98okrj0f/13/
Since nobody answered you're question I will answer this question like I did the previous ones.
The problem was that you weren't closing you <a> tags with </a>. So the html added extra <a> tags with made the left bar also use a href which is used for your tabs. This way it overrided the open tab.
See the new JSfiddle: https://jsfiddle.net/98okrj0f/19/
Here's the code that was making the error's:
<li ng-repeat = "v2 in V2s">{{v2}}</li>
<li ng-repeat = "v3 in V3s">{{v3}}</li>

Double click to reduce size of div?

Hi I was just wondering if there was a way of double clicking on a div and making the height reduce just by using CSS.
<div class="container"></div>
<ul class="accordion">
<li>
First
<div class="accordion-content" id="first">
<p>Bonjour</p></div>
</li>
<li>
Second
<div class="accordion-content" id="second">
<p>Hello</p></div>
</li>
<li>
Third
<div class="accordion-content" id="third">
<p>No</p></div>
</li>
You can find the code that I want to adjust in this Fiddle.
This is achievable in CSS only, if you can add the following HTML immediately after each <div class="accordion-content">:
<input>
Then add these styles:
.accordion-content {
position: relative;
}
.accordion-content a, .accordion-content input {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
}
.accordion-content input:focus {
z-index: -1;
}
.accordion-content a:focus {
z-index: 1;
}
Fiddle
Note: Please don't actually use this. It's an interesting way to go about what you want, and a fun challenge for me, but Javascript is by far a more appropriate and reliable tool for the job. Unless you are burdened with a client who is demanding this functionality while completely against the use of JS, just slap some jQuery on it and call it a day.
So, I couldn't figure out how to do this with only CSS using the ul in your current markup, but if you're open to changing it a little bit, you can do this with CSS only. I'm dumb and just needed to plug the code below into the ul element. Here is an example:
HTML
<ul class="accordion">
<li>
<span class="span" tabindex="0">
<input type="text" value=" " readonly="true" />
Show
</span>
<p id="showme" class="alert">Hidden Content</p>
</li>
</ul>
CSS
body {
font: 1em'Source Sans Pro', sans-serif;
}
.accordion {
width: 100%;
padding:0;
margin:0;
list-style-type: none;
}
span {
display: block;
padding: 15px 20px;
background: #bbb;
color:#fff;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
margin-bottom: 5px;
}
span a {
text-decoration: none;
}
span a:visited {
color:#fff;
}
.alert {
display: none;
margin: 20px;
}
span {
position: relative;
}
span a {
position: relative;
z-index: 2;
}
span a:hover, span a:active {
z-index: 4;
}
span input {
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 101%;
height: 301%;
z-index: 3;
}
span input:focus {
background: transparent;
border: 0;
z-index: 1;
}
#showme:target {
display: block;
}
Fiddle: https://jsfiddle.net/yn13syuj/
Essentially, what this does is cover the a tag using some z-index trickery until you click it once. Then, once it's uncovered, you can use :target to change the display property of the hidden content.
Using only css you can't handle double click events, Use JavaScript and .ondblclick function to do this, here's a DEMO of your code:
var divs = document.getElementsByClassName("accordion-content");
for (var i = 0; i < divs.length; i++) {
divs[i].ondblclick = function() {
if (this.offsetHeight > 50) {
this.style.height = this.offsetHeight - 20 + "px";
}
};
}
body {
font: 1em'Source Sans Pro', sans-serif;
}
.container {
width: 100%;
max-width: 400px;
}
.accordion {
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
.accordion-header {
display: block;
padding: 15px 20px;
background: #bbb;
color: #fff;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
margin-bottom: 5px;
}
.accordion-content {
height: 0;
overflow: hidden;
-webkit-transition: height 400ms ease;
transition: height 400ms ease;
}
.accordion-content p {
margin: 20px;
}
.accordion-content:target {
height: 150px;
overflow-y: scroll;
}
<div class="container"></div>
<ul class="accordion">
<li> First
<div class="accordion-content" id="first">
<p>Bonjour</p>
</div>
</li>
<li> Second
<div class="accordion-content" id="second">
<p>Hello</p>
</div>
</li>
<li> Third
<div class="accordion-content" id="third">
<p>No</p>
</div>
</li>
</ul>
It keeps decreasing the height until it reachs 50 px, you can change it to fit your needs.
And here's your updated Fiddle.

set flip animation for main menu item on hover

I have a demo website. how can I get the menu hover effect as in the reference website given below. I have fiddled little bit here, but I didn't get the transition when I hover on the menu item
ref site :- click here
hover on the top menu and see the effect. how do I get that effect ?
see the code here till I have done
HTML
<li>
<div class="header-navigation-item-state-wrapper">
<div class="white">
<h4 class="header-white">Collections</h4>
</div>
<div class="black">
<h4 class="header-black">Collections</h4>
</div>
</div>
</li>
CSS
* {
background:yellow
}
li {
list-style:none;
}
.header-black {
background:#000;
color:#fff;
padding:10px;
display:block
}
.black {
display:none;
}
.header-white {
background:#fff;
color:#000;
padding:10px;
display:block
}
JQuery
$(document).ready(function () {
$("li").mouseenter(function () {
$(".white").css('display', 'none');
$(".black").css('display', 'block');
});
$("li").mouseleave(function () {
$(".white").css('display', 'block');
$(".black").css('display', 'none');
});
})
You can use 3d effect following way.
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
display: block;
text-decoration: none;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.threed {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.threed:hover .box,
.threed:focus .box {
transform: translateZ(-25px) rotateX(90deg);
}
.box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.white {
transform: rotatex(0deg) translatez(25px);
background: white;
color: black;
}
.black {
transform: rotatex(-90deg) translatez(25px);
color: white;
background: black;
}
.white, .black {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
pointer-events: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="menu">
<li><a href="/" class="threed">
Home
<span class="box">
<span class="white">Home</span>
<span class="black">Home</span>
</span>
</a></li>
</ul>
You can change as per your requirement.
Hope it helps.

Categories