I'm trying to create a sidebar for a webpage. Now I want the sidebar to be collapsible with an animation but I cannot find a way of keeping the <img> and <span> on the same line when collapsing because the width of both tags exceeds the width of the sidebar.
I tried everything than I could think of, played with float, display, overflow, etc.
Here is a quick JSFiddle to give you an idea.
function toggleSidebar() {
$('#sidebar, #mainContent').toggleClass('expanded');
$('#sidebar, #mainContent').toggleClass('collapsed');
if ($("#sidebar").hasClass("collapsed"))
$("#toggler a").html(">>");
else
$("#toggler a").html("<<");
}
#mainContent {
background-color: #0f0;
}
#sidebar {
background-color: #00f;
}
img {
vertical-align: middle;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
ul.nav-sidebar {
width: 100%;
padding: 0px;
}
#toggler a {
float: right;
}
ul.nav-sidebar {
width: 100%;
}
ul.nav-sidebar li {
width: 100%;
display: inline-block;
}
ul.nav-sidebar li,
ul.nav-sidebar li a {
color: white;
font-weight: bold;
}
.ar-icon {
width: 50px;
}
#sidebar ul li span {
padding-left: 10px;
}
#sidebar.collapsed ul li span {
/*display: none;*/
}
#mainContent,
#sidebar {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#sidebar,
#mainContent {
float: left;
height: 100%;
}
#mainContent.expanded {
width: calc(100% - 80px);
}
#mainContent.collapsed {
width: calc(100% - 200px);
}
#sidebar.expanded {
width: 200px;
}
#sidebar.collapsed {
width: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
<div class="expanded" id="sidebar">
<ul class="nav nav-sidebar">
<li id="toggler" onclick="toggleSidebar();"><a><<</a></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></li>
</ul>
</div>
<div class="collapsed" id="mainContent">Dummy content</div>
</div>
Flexbox can do it simply:
ul.nav-sidebar li a {
display: flex;
align-items: center;
}
jsFiddle
function toggleSidebar() {
$('#sidebar, #mainContent').toggleClass('expanded');
$('#sidebar, #mainContent').toggleClass('collapsed');
if ($("#sidebar").hasClass("collapsed"))
$("#toggler a").html(">>");
else
$("#toggler a").html("<<");
}
#mainContent {
background-color: #0f0;
}
#sidebar {
background-color: #00f;
}
img {
vertical-align: middle;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
ul.nav-sidebar {
width: 100%;
padding: 0px;
}
#toggler a {
float: right;
}
ul.nav-sidebar {
width: 100%;
}
ul.nav-sidebar li {
width: 100%;
display: inline-block;
}
ul.nav-sidebar li,
ul.nav-sidebar li a {
color: white;
font-weight: bold;
}
.ar-icon {
width: 50px;
}
#sidebar ul li span {
padding-left: 10px;
}
#sidebar.collapsed ul li span {
/*display: none;*/
}
#mainContent,
#sidebar {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#sidebar,
#mainContent {
float: left;
height: 100%;
}
#mainContent.expanded {
width: calc(100% - 80px);
}
#mainContent.collapsed {
width: calc(100% - 200px);
}
#sidebar.expanded {
width: 200px;
}
#sidebar.collapsed {
width: 80px;
}
ul.nav-sidebar li a {
display: flex;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
<div class="expanded" id="sidebar">
<ul class="nav nav-sidebar">
<li id="toggler" onclick="toggleSidebar();"><a><<</a></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></li>
</ul>
</div>
<div class="collapsed" id="mainContent">Dummy content</div>
</div>
You can do something like this (changes commented):
function toggleSidebar() {
$('#sidebar, #mainContent').toggleClass('expanded');
$('#sidebar, #mainContent').toggleClass('collapsed');
if ($("#sidebar").hasClass("collapsed"))
$("#toggler").html(">>"); /* modified */
else
$("#toggler").html("<<"); /* modified */
}
#mainContent {
background-color: #0f0;
}
#sidebar {
overflow: hidden; /* added */
background-color: #00f;
}
img {
vertical-align: middle;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
ul.nav-sidebar {
width: 200px; /* modified; needs to match the width of the #sidebar.expanded */
padding: 0px;
}
#toggler { /* modified */
/* added */
color: white;
font-weight: bold;
display: block;
padding: 10px 15px;
text-align: right; /* instead of "float: right" */
}
/* addition */
#toggler:hover {
cursor: pointer;
}
ul.nav-sidebar li {
width: 100%;
display: inline-block;
}
ul.nav-sidebar li,
ul.nav-sidebar li a {
color: white;
font-weight: bold;
}
.ar-icon {
width: 50px;
}
#sidebar ul li span {
padding-left: 10px;
}
#sidebar.collapsed ul li span {
/*display: none;*/
}
#mainContent,
#sidebar {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#sidebar,
#mainContent {
float: left;
height: 100%;
}
#mainContent.expanded {
width: calc(100% - 80px);
}
#mainContent.collapsed {
width: calc(100% - 200px);
}
#sidebar.expanded {
width: 200px;
}
#sidebar.collapsed {
width: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
<div class="expanded" id="sidebar">
<a id="toggler" onclick="toggleSidebar();"><<</a> <!-- moved outside -->
<ul class="nav nav-sidebar">
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span></li>
<li><img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span></li>
</ul>
</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<div class="collapsed" id="mainContent">Dummy content</div>
<!-- a few extra divs, just to see the overflow in action -->
</div>
Simply add a class to the navigation items you want to stay inline and set a min-width to them. I added the class "nav-item", and then set "#sidebar" overflow to hidden;
HTML:
<div style="width: 100%; height: 100%;">
<div class="expanded" id="sidebar">
<ul class="nav nav-sidebar">
<li id="toggler" onclick="toggleSidebar();"><a><<</a></li>
<li class="nav-item"> //new class
<img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>LongLongLong</span>
</li>
<li class="nav-item"> //new class
<img class="ar-icon" src="https://static1.squarespace.com/static/52ffd8dde4b0ee230b35177c/t/53112738e4b060dc36b1db22/1393633080869/Domvision+House+50px.png"><span>Short</span>
</li>
</ul>
</div>
<div class="collapsed" id="mainContent">Dummy content</div>
</div>
CSS
#sidebar {
overflow: hidden;
}
.nav-item {
min-width: 250px; /* This can be as big as small as you need */
}
You need to use absolute sizes for the list elements in order to make it work with overflow, else when you collapse the sidebar the list elements change their size automatically as well leading to a break into a new line.
Try this:
ul.nav-sidebar li:not(:first-child) {
width: 200px;
overflow:hidden;
display: inline-block;
}
you assign the sidebar a fixed size, so you could do that for the list elements as well leading with overflow:hidden to your desired behaviour (if I got it right what you want to accomplish).
Here a fiddle: https://jsfiddle.net/h0ey6bm5/19/
Related
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
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('-');
This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Do transition: 0.15s; instead of transition: 0.25s; in css file.
At the moment i have several divs that display information when you hover on them. I'd like to change this to onClick with a smooth transition, without a plugin.
I'm not sure how to do this as a lot of tutorials i've seen use a plugin.
function hoverTiles(){
var tiles = $('.button');
tiles.removeClass('active');
tiles.hover(function(){
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
})
}
$(document).ready(function() {
hoverTiles();
})
.doclist {
list-style-image: url("/pageassets/test1/download.png");
text-align: left;
}
.buttons .button h4 {
z-index: 3;
position: absolute;
bottom: 5%;
left: 5%;
width: 82%;
}
.button:nth-child(1) span i {
color: #00838e;
}
.button:nth-child(2) span i {
color: #ff6c00;
}
.button:nth-child(3) span i {
color: #00a7ff;
}
.button:nth-child(4) span i {
color: #00652b;
}
.button:nth-child(5) span i {
color: #d80000;
}
.buttons {
margin-top: 50px;
text-align: center;
}
.buttons .button {
display: inline-block;
position: relative;
overflow: hidden;
width: 32%;
height: 300px;
background: #fff;
border: 1px solid #efefef;
border-radius: 1px;
margin: 5px;
vertical-align: top;
-webkit-transition: 0.1s all ease-in-out;
-moz-transition: 0.1s all ease-in-out;
-ms-transition: 0.1s all ease-in-out;
-o-transition: 0.1s all ease-in-out;
transition: 0.1s all ease-in-out;
}
.buttons .button span {
display: block;
font-size: 54px;
}
.buttons .button h4 {
margin-top: 0;
font-weight: 600;
color: grey;
}
.buttons .button p {
font-size: 14px;
opacity: 0;
color: grey;
}
.buttons .button p a {
color: #1489ff;
text-decoration: none;
}
.buttons .active {
width: 32%;
height: 100%;
}
.buttons .active span {
font-size: 81px;
}
.buttons .active p {
opacity: 1;
}
.buttons .active h4 {
margin-top: 15px;
display: none;
}
<div class="buttons">
<div class="button active">
<span><i></i></span>
<div class="header">
<img src="/pageassets/test1/keydocs.jpg" alt="" />
<h4 style="color:black;">Key Documents</h4>
</div>
<ul class="doclist">
<p><strong>Key Documents</strong>
</p>
<li>Handbook
</li>
<li>Description
</li>
<li>Role Description
</li>
<li>Role Description
</li>
<li>Role Description
</li>
<li>Role Description
</li>
<li>Description
</li>
</ul>
</div>
<div class="button">
<span><i></i></span>
<div class="header">
<img src="/pageassets/test1/keydocs.jpg" alt="" />
<h4 style="color:black;">Key Documents</h4>
</div>
<ul class="doclist">
<p><strong>Key Documents</strong>
</p>
<li>Handbook
</li>
<li>Description
</li>
<li>Role Description
</li>
<li>Role Description
</li>
<li>Role Description
</li>
<li>Role Description
</li>
<li>Description
</li>
</ul>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
I have a header with a logo on the left, then a nav on the bottom. I'd like the nav to be horizontally centered with the logo, but bottom and padding-bottom isn't working. I changed the image to text and then I could do everything, but with the image it just doesn't work.
HTML
<header class="cf">
<div id="nav">
<img class="logo" src="HEADER/banner.png" width="300" height="100" alt="Next Gen"></img>
<div id="nav-list">
<ul id="list">
<li>HOME</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
<li>ROSTER</li>
</ul>
</div>
</div>
</header>
<section class="section one">
<h2>One</h2>
</section>
<section class="section two">
<h2>Two</h2>
</section>
<section class="section three">
<h2>Three</h2>
</section>
<section class="section four">
<h2>Four</h2>
</section>
CSS
/* Body */
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
line-height: 1.4em;
color: #222;
font-family: 'Raleway', sans-serif;
}
/* Header */
/* Shrinking */
/* ClearFix */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* Header Styles */
header {
width: 100%;
height: 100px;
background: #02236a;
position: fixed;
z-index: 2;
box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}
.small {
height: 80px;
}
.small .logo {
width: 240px;
height: 80px;
}
.nav {
width: 80%;
}
/* Transitions */
header, .logo {
-webkit-transition: all 1s;
transition: all 1s;
}
/* Navigation */
ul li {
float: left;
margin-left: 50px;
}
/* Miscellaneous */
a {
text-decoration: none;
}
li {
list-style: none;
}
/* Delete */
.section {
max-width: 100%;
height: 42em;
padding: 10px;
}
.section h2 {
color: #fff;
font-size: 6em;
font-weight: 200;
text-align: center;
padding: 2.5em 0;
}
.one {
background: #6bb6ff;
}
.two {
background: #1E90FF;
}
.three {
background: #8B4789;
}
.four {
background: #872657;
}
JavaScript
$(document).on("scroll", function () {
if ($(document).scrollTop() > 25) {
$(".cf").addClass("small");
} else {
$(".cf").removeClass("small");
}
});
Also, HERE is a demo. Let me know if you need any more information.
Add:
.logo {
float:left;
width: 200px;
}
JSFiddle Demo
You may want to float them or inline them in the same parent div. https://jsfiddle.net/awztqyso/1/
.logo {
float: left;
width: 300px;
height: 100px;
}
.nav-list {
float: left;
padding-top: 45px;
height: 100px;
width: 650px;
}
Notice that you have a lot of IDs but you only define styles under css classes.
try this
<div id="nav">
<div id="logo-box">
<img class="logo" src="HEADER/banner.png" width="300" height="100" alt="Next Gen"></img>
</div>
<div id="nav-list">
<ul id="list">
<li>HOME</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
<li>ROSTER</li>
</ul>
</div>
</div>
and apply someting like this
#nav{height: 100px; width: 100%; }
#logo-box{width: 300px; margin-left: 20px; float:left;}
#nav-list{margin-left: 360px; width:600px;} /*margin-left should be more than the
image-box width + image-box margin-left at least*/