This works fine on my app but for some reason I could not get it to work correctly here. Anyway my question is, when I click on a list title I want to close the previously opened one and keep only the active one open. Currently it opens everything I click, but keeps everything open as well. Any ideas on how I can achieve this?
$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-title').click(function() {
$(this).parent().parent().toggleClass('cl-item-open');
});
$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-icon').click(function() {
$(this).parent().parent().toggleClass('cl-item-open');
})
$('.cl-item').each(function(){
console.log ($(this).find('> ul').length);
if ( $(this).find('> ul').length === 0 ) {
$(this).addClass('cl-item-no-sub');
}
})
$li-padding: 7px;
$li-padding-tools: 10px;
$cascade-padding: 25px;
$bg-level-1: #dadada;
$bg-level-2: #ffffff;
$bg-level-3: #ffffff;
$color-tools: #9e9e9e;
$toggle-width: 1.5em;
.cl-start-wrap {
list-style: none;
padding: 0;
margin: 30px;
width: 300px;
ul {
list-style: none;
padding: 0;
margin: 0;
}
> li {
> .cl-label-wrap {
padding: $li-padding 0 $li-padding $cascade-padding*0;
margin: 1px 0;
background: $bg-level-1;
&:hover {
background: darken($bg-level-1, 5%);
}
}
> ul > li {
> .cl-label-wrap {
padding: $li-padding 0 $li-padding $cascade-padding*1;
background: $bg-level-2;
&:hover {
background: darken($bg-level-2, 5%);
}
}
> ul > li {
> .cl-label-wrap {
padding: $li-padding 0 $li-padding $cascade-padding*2;
background: $bg-level-3;
&:hover {
background: darken($bg-level-3, 5%);
}
}
}
}
}
}
.cl-item {
> ul {
}
> .cl-label-wrap {
.cl-label-title {
cursor: pointer;
}
.cl-label-icon {
cursor: pointer;
text-align: center;
&:before {
cursor: pointer;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
}
.cl-label-tools {
a {
color: $color-tools;
&:hover {
color: darken($color-tools, 10%);
}
}
}
}
}
.cl-item:not(.cl-item-open) {
> ul {
display: none;
}
> .cl-label-wrap {
.cl-label-icon {
&:before {
content: "\f0da";
}
}
}
}
.cl-item.cl-item-open {
> .cl-label-wrap {
.cl-label-icon {
&:before {
content: "\f0d7";
}
}
}
}
.cl-item.cl-item-no-sub {
> .cl-label-wrap {
.cl-label-title {
cursor: default;
}
.cl-label-icon {
&:before {
content: "";
}
}
}
}
// Label-Flexbox
.cl-label-wrap {
display: table-cell;
-ms-display: flex;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
.cl-label-title {
order: 1;
flex: 1 1 auto;
align-self: auto;
}
.cl-label-icon {
order: 0;
flex: 0 1 $toggle-width;
align-self: auto;
}
.cl-label-tools {
order: 2;
flex: 0 1 auto;
align-self: auto;
white-space: nowrap;
padding: 0 $li-padding-tools;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="cl-start-wrap">
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-plus"></i>
</span>
</div>
<ul>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.1</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
<ul>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.1.1</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-plus"></i>
</span>
</div>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.1.2</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-plus"></i>
</span>
</div>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.1.3</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-plus"></i>
</span>
</div>
</li>
</ul>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 1.2</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
</ul>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 2</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
<ul>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 2.1</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 2.2</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 2.3</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
</ul>
</li>
<li class="cl-item">
<div class="cl-label-wrap">
<span class="cl-label-title">Label 3</span>
<span class="cl-label-icon"></span>
<span class="cl-label-tools">
<i class="fa fa-view"></i>
<i class="fa fa-plus"></i>
</span>
</div>
</li>
</ul>
Use the siblings function to close everything but the current item:
$('.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-title,
.cl-item:not(.cl-item-no-sub) > .cl-label-wrap .cl-label-icon').click(
function() {
var parent = $(this).parent().parent();
parent.siblings().removeClass("cl-item-open");
parent.toggleClass('cl-item-open');
}
);
Related
Precondition
I have a tab bar on my application, each tab labels include icons and text.
Users can navigate between tabs by tapping a tab. Once an edge tab has been fired, other tabs should shift left or right.
Expected Result
I want it to work like Web Material Component's Scrolling tabs.
Problem
I not sure how to shift the tabs by using pure JavaScript when edge tab has been pressed. Can anyone else give some tips for me?
See the code snippet below:
function clickHandler(e) {
let target = e.srcElement || e.target;
console.log(target);
}
.flex-container {
width: 100%;
min-width: 50rem;
height: 7rem;
display: flex;
align-items: center;
justify-content: flex-start;
background: black;
overflow: hidden;
}
.sub-menu {
display: flex;
flex-direction: column;
align-items: center;
width: 7rem;
color: white;
flex-grow: 1;
min-width: 22%;
}
.sub-menu:active {
color: gray;
}
.menu-icon {
width: 3.2rem;
height: 3.2rem;
text-align: center;
}
.menu-title {
height: 1.7rem;
width: 7rem;
font-size: 1.2rem;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="flex-container" onclick="clickHandler(event)">
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-behance fa-3x"></i></div>
<span class="menu-title">Action 1</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-codepen fa-3x"></i></div>
<span class="menu-title">Action 2</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-eercast fa-3x"></i></div>
<span class="menu-title">Action 3</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-fort-awesome fa-3x"></i></div>
<span class="menu-title">Action 4</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-flickr fa-3x"></i></div>
<span class="menu-title">Action 5</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-skype fa-3x"></i></div>
<span class="menu-title">Action 6</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-vimeo fa-3x"></i></div>
<span class="menu-title">Action 7</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-tumblr fa-3x"></i></div>
<span class="menu-title">Action 8</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-twitter fa-3x"></i></div>
<span class="menu-title">Action 9</span>
</div>
<div class="sub-menu">
<div class="menu-icon"><i class="fa fa-trello fa-3x"></i></div>
<span class="menu-title">Action 10</span>
</div>
</div>
You can try my code:
function clickHandler(el) {
const rect = el.getBoundingClientRect()
const winWidth = window.innerWidth || document.documentElement.clientWidth
const widthScroll = winWidth * 33 / 100
if (rect.left <= 0 + 10)
{
document.getElementById('main-menu').scrollLeft -= widthScroll ;
}
if (rect.right >= winWidth - 10)
{
document.getElementById('main-menu').scrollLeft += widthScroll ;
}
}
This is demo link https://codepen.io/phuongnm153/pen/BeagOo
You can add more animation for effect when scroll
I am coding a side menu with Bootstrap and I am already on quite a good stage. The submenus are opening.
My problem: If I click on one submenu it shows the sub links but when opening a second one it doesn't open that links. So I searched for a solution and found this one: Stackoverflow Answer. I adjusted the code and the javascript file to the changes. Now when opening the menu on my localhost installation, it lags a bit when opening or closing but it is closing all others which are opened. So I thought of asking if anyone here has a better solution or an idea why it lags that much. The code is very long so I will just post a JSfiddle: klick here.
From jQuery doc:
.slideToggle(): default duration 400 milliseconds
.toggle(): default duration 400 milliseconds
Those are your issues. In any case you can always use boostrap collapse methods.
//
// for each collapseable element, except the first, collapse (hide)
//
$('#side-menu ul.collapseable:visible:not(:first)').collapse('hide');
//
// clicking on the collapse anchor:
// get the css selector for the collapsible element
// collapse to hide all except the current one
// collapse to show the current one
//
$('#side-menu a[data-toggle="collapse"]').on('click', function (e) {
var ulId = this.getAttribute('href');
$('#side-menu ul.collapseable').not(ulId).collapse('hide');
$(ulId).collapse('show');
});
html, body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eaeaea;
color: #5e6062;
height: 100%;
}
/*-------------*/
/*Sidebar Menue*/
/*-------------*/
#side-menu {
background-color: #323232;
padding: 0px;
}
#side-menu h1 {
color: #fff;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
#side-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#side-menu a {
padding: 12px 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 13px;
display: block;
}
#side-menu a:hover {
background-color: #474747;
display: block;
color: #fff;
}
#side-menu .active a {
color: #fff;
background-color: #474747;
}
#side-menu .settings-btn {
background-color: #778b1c;
}
#side-menu .settings-btn a {
color: #fff;
}
#side-menu .settings-btn a:hover {
background-color: #778b1c;
}
#side-menu .collapseable li {
padding: 2px 0px 2px 12px;
}
#side-menu .collapseable a {
color: #fff;
font-size: 12px;
padding: 0px 10px 0px 5px;
text-decoration: none;
display: block
}
#side-menu .collapseable a:hover {
color: #fff;
}
/*ALTIS Side-Menü linker Rand*/
#side-menu .collapseable-ALTIS {
border-left: 4px solid #ffb700;
}
#side-menu .collapseable-ALTIS .active {
background-color: #474747;
}
#side-menu .collapseable-ALTIS .link:hover {
background-color: #474747;
}
/*---------------------------*/
/*TANOA Side-Menü linker Rand*/
#side-menu .collapseable-TANOA {
border-left: 4px solid #00aa1a;
}
#side-menu .collapseable-TANOA .active {
background-color: #474747;
}
#side-menu .collapseable-TANOA .link:hover {
background-color: #474747;
}
/*---------------------------*/
/*--------------------*/
/*Main Content Bereich*/
/*--------------------*/
.display-table {
display: table;
padding: 0px;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
float: none;
height: 100%;
}
/*----------------*/
/*Top Menue Leiste*/
/*----------------*/
#nav-header {
background-color: #fff;
border-bottom: 1px solid #e7eaec;
}
#nav-header ul {
margin: 0px;
padding: 0px;
list-style: none;
color: #676a6c;
}
#nav-header ul li {
float: left;
margin-left: 15px;
padding: 17px 0px;
}
#nav-header ul a {
text-decoration: none;
}
#nav-header .logout {
color: #676a6c;
}
#nav-header .logout:hover {
color: #676a6c;
}
#nav-header #welcome {
margin-right: 20px;
}
/*-----------------------*/
/*Mobile Menu Toggle Icon*/
/*-----------------------*/
.navbar-default .navbar-toggle {
border-color: #778b1c;
background-color: #778b1c;
}
.navbar-default .navbar-toggle:hover {
background-color: #778b1c;
}
.navbar-default .navbar-toggle:focus {
background-color: #778b1c;
}
.navbar-default .icon-bar {
border: 1px white solid;
}
/*------*/
/*Inhalt*/
/*------*/
#content header {
border-bottom: 1px #f3f3f4 solid;
padding: 10px 0px;
}
#content {
margin: 20px 0px 50px 0px;
background-color: #fff;
border-top: 4px #778b1c solid;
}
.content-ALTIS {
border-top: 4px #ffb700 solid !important;
}
.page_title {
font-size: 14px;
font-weight: bold;
margin: 0px 20px;
}
.content-inner {
padding: 20px;
}
.content-inner a {
text-decoration: underline;
color: #2b5f8b;
}
.valign-top {
vertical-align: top;
}
.valign-center {
vertical-align: middle;
}
.horizontal-middle {
margin: 0px auto;
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="container-fluid display-table">
<!-- Menu -->
<div class="col-lg-2 c display-table-cell valign-top" id="side-menu">
<!-- Logo -->
<ul>
<!-- Startseite -->
<li class="link active">
<a href="#">
<i class="fa fa-fw fa-home" aria-hidden="true"></i>
Text 1
</a>
</li>
<!-- ALTIS Dropdown Menu -->
<li class="link">
<a href="#collapse-ALTIS" data-toggle="collapse" aria-controls="collapse-ALTIS" id="ALTIS"
href="#collapse-ALTIS" aria-expanded="true">
Text 2
</a>
<ul class="collapseable collapseable-ALTIS collapse in" id="collapse-ALTIS" aria-expanded="true">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- TANOA Dropdown Menu -->
<li class="link">
<a href="#collapse-TANOA" data-toggle="collapse" aria-controls="collapse-TANOA" id="TANOA">
Text 3
</a>
<ul class="collapse collapseable collapseable-TANOA" id="collapse-TANOA">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- KOTH Dropdown Menu -->
<li class="link">
<a href="#collapse-KOTH" data-toggle="collapse" aria-controls="collapse-KOTH" id="KOTH">
Text 4
</a>
<ul class="collapse collapseable collapseable-KOTH" id="collapse-KOTH">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- TOOLS Dropdown Menu -->
<li class="link">
<a href="#collapse-TOOLS" data-toggle="collapse" aria-controls="collapse-TOOLS" ID="TOOLS">
Text 5
</a>
<ul class="collapse collapseable collapseable-TOOLS" id="collapse-TOOLS">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-search hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-refresh hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- FILTER Dropdown Menu -->
<li class="link">
<a href="#collapse-FILTER" data-toggle="collapse" aria-controls="collapse-FILTER" id="FILTER">
Text 6
</a>
<ul class="collapse collapseable collapseable-FILTER" id="collapse-FILTER">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-globe hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-shield hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-eye hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-address-book hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-database hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- Einstellungen -->
<li class="link settings-btn">
<a href="#">
<i class="fa fa-fw fa-cog hidden-xs" aria-hidden="true"></i>
Text 7
</a>
</li>
</ul>
</div>
<section class="col-md-10 col-sm-11 display-table-cell valign-top">
<!-- vertikales Menu -->
<aside class="row">
<header id="nav-header" class="clearfix">
<div class="col-md-7">
<nav class="navbar-default pull-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas"
data-target="#side-menu">
<span class="sr-only">Navigation aufklappen und zuklappen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</nav>
</div>
<!-- Menu oben rechts -->
<div class="col-md-5">
<ul class="pull-right">
<li id="welcome" class="hidden-xs">Welcome</li>
<li>
<a href="#" class="logout">
<i class="fa fa-fw fa-sign-out hidden-xs" aria-hidden="true"></i> Logout
</a>
</li>
</ul>
</div>
</header>
</aside>
<!-- Seiteninhalt -->
<div id="content">
<header>
<h2 class="page_title">Title</h2>
</header>
<div class="content-inner">
Content
</div>
</div>
</section>
</main>
I want to create a list upon my selected items, by items I mean any <li> with class .service. The selected items have the class .selected and I want both the data #name and #price for the selected item to display in <ul class="your_likes"> with a unique <li class="one_like">.
This is my JSFiddle with a pure html example included.
How can I do this?
Is this what you're trying to do? First thing, don't use ID's for the name and price all over the place -- use classes.
// step by step functionality
var myTotal;
$('.service').on('click', function(e) {
e.preventDefault();
var $parent = $(this).closest('section')
// remove selected class from links after the current one
$parent.nextAll('section').find('li').removeClass('selected');
// remove selected from siblings, toggle current selected class
$(this).toggleClass('selected');
(!$parent.hasClass('multiple')) && $(this).siblings('li').removeClass('selected');
var $target = $('#' + $(this).attr('data-id'));
if ($target.length) {
// hide any steps after the current one that may be shown
$parent.nextAll('section').find('.step').not($target).removeClass('active');
// toggle display of selected step
$target.toggleClass('active', $(this).hasClass('selected'));
} else {
console.log('hmm');
}
})
// your selections incl. price & total
$('.service').click(function() {
$('.hide-me-once-a-banana-is-clicked').hide('slow');
$('ul.your_likes').show('slow');
var myLike = $(".number-" + $(this).data("likes"));
myLike.children(".like").text($(this).children(".name").text());
myLike.children(".price").text($(this).children(".price").text());
// Now, somehow, calculate the total price...
myTotal = 0;
var myLikes = $(".your_likes .one_like");
myLikes.each(function() {
myTotal += parseNumber($(this).children(".price").text());
})
$(".topay").children(".price").text(myTotal);
});
function parseNumber(n) {
return Number(n.replace(/[^0-9\.-]+/g, ""))
}
body {
color: #333;
}
h1 {
font-size: 20px;
}
.step {
display: none;
}
.active {
display: block;
}
.selected {
background: #27ae60 !important;
color: #fff !important;
}
ul {
padding: 0;
}
li {
list-style: none;
}
.service {
padding: 20px;
color: #7f8c8d;
background: #ecf0f1;
display: inline-block;
border-radius: 10px;
cursor: pointer;
width: auto;
text-align: center;
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
}
.service.special.selected {
background: #3498db !important;
}
.hi {
color: #27ae60;
border-bottom: 2px dotted #27ae60;
}
h1 {
margin-top: 30px;
margin-bottom: 30px;
}
.hi.special {
border-bottom: 2px dotted #3498db;
color: #3498db;
}
#same_target {
margin-top: 30px;
background: #9b59b6;
padding: 20px;
color: #fff;
}
#same_target p {
margin-bottom: 0;
}
.nomarking {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.price {
display: block;
margin: 0;
font-size: 14px;
font-weight: 300;
}
ul.your_likes {
display: none;
}
ul.your_likes li {
list-style: none;
cursor: default;
}
ul.your_likes li.one_like .like {
display: inline-block;
font-size: 16px;
}
ul.your_likes li.one_like .price {
display: inline-block;
float: right;
font-size: 16px;
color: #4285f4;
}
ul.your_likes li.topay {
border-radius: 10px;
margin-bottom: 5px;
margin-top: 10px;
}
ul.your_likes li.topay .text {
display: inline-block;
font-size: 16px;
color: #000;
font-weight: bolder;
}
ul.your_likes li.topay .price {
display: inline-block;
float: right;
font-size: 16px;
color: #000;
font-weight: bolder;
}
ul.your_likes li.topay .lets_go button {
display: block;
margin-top: 10px;
font-weight: normal;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6">
<!-- HELLO FIRST SECTION -->
<section>
<h1>Choose <span class="hi">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="one" data-likes="one">
<span class="name">Hamburger</span>
<span class="price">€ 10</span>
</li>
<li class="service nomarking" data-id="two" data-likes="one">
<span class="name">Pizza</span>
<span class="price">€ 5</span>
</li>
<li class="service nomarking" data-id="three" data-likes="one">
<span class="name">Icecream</span>
<span class="price">€ 3</span>
</li>
</ul>
</section>
<!-- BYE FIRST SECTION -->
<!-- HELLO SECOND SECTION -->
<section>
<div id="one" class="step">
<h1>Choose <span class="hi special">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Games</span>
<span class="price">€ 7</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Soccer</span>
<span class="price">€ 2</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Memes</span>
<span class="price">€ 1</span>
</li>
</ul>
</div>
<div id="two" class="step">
<h1>Choose <span class="hi special">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Gossip Girl</span>
<span class="price">€ 7</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Coding</span>
<span class="price">€ 8</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Cats</span>
<span class="price">€ 6</span>
</li>
</ul>
</div>
<div id="three" class="step">
<h1>Choose <span class="hi special">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Netflix</span>
<span class="price">€ 7</span>
</li>
<li class="service nomarking " data-id="last" data-likes="two">
<span class="name">Reddit</span>
<span class="price">€ 9</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Lady Gaga</span>
<span class="price">€ 20</span>
</li>
</ul>
</div>
</section>
<!-- BYE SECOND SECTION -->
<!-- HELLO THIRD AND LAST SECTION -->
<section class="multiple">
<div id="last" class="step">
<h1>Choose <span class="hi special">more</span> of your liking!</h1>
<ul>
<li class="service nomarking" data-id="third" data-likes="three">
<span class="name">Michael Jordan</span>
<span class="price">€ 23</span>
</li>
<li class="service nomarking " data-id="third" data-likes="three">
<span class="name">Dogs</span>
<span class="price">€ 10</span>
</li>
<li class="service nomarking" data-id="third" data-likes="three">
<span class="name">Cars</span>
<span class="price">€ 100</span>
</li>
</ul>
</div>
</section>
<!-- BYE THIRD AND LAST SECTION -->
</div>
<div class="col-xs-4">
<h1>Your likes</h1>
<p class="text-muted hide-me-once-a-banana-is-clicked">
Click on something you like to make a order overview
</p>
<ul class="your_likes">
<li class="one_like noselect number-one">
<div class="like">
Hamburger
</div>
<div class="price">
€ 8
</div>
</li>
<li class="one_like noselect number-two">
<div class="like">
Memes
</div>
<div class="price">
€ 1
</div>
</li>
<li class="one_like noselect number-three">
<div class="like">
Dogs
</div>
<div class="price">
€ 10
</div>
</li>
<li class="topay noselect">
<div class="text">
To pay
</div>
<div class="price">
€ 19
</div>
<div class="lets_go">
<button class="btn btn-primary">Checkout</button>
</div>
</li>
</ul>
</div>
</div>
</div>
I took code for a dashboard we're building here; it's a free bootstrap dashboard template:
http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html
We like it a lot as it's simple and displays the kind of layout we need. Here's what I've done to edit the above so far, to suit our needs:
http://tumolo.co.uk/smartcm/pages/index.html
If you resize your browser, so that you're reducing the width, with the original template, once it gets to (I assume) xs or sm size, the sidebar menu neatly hides and the 3line button in the top right displays. You can tell I'm new to bootstrap!
If you resize my version, once it gets to (I assume) xs or sm size, the sidbar menu displays instead of hides, like it should in original template.
IF it helps, I noticed that as I was editing from template to my version, when I started removing containers from original template, the menu stopped hiding when resizing browser window.
As we want to use this dashboard on mobile phones, it's important for me to understand how to make this menu hidden, as soon as you browse to it, from a mobile device... hope you can help, thanks.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li>
<i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li>
<i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li>
<i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li>
<i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
You are missing <div class="collapse navbar-collapse" ></div>which surrounds the ul class.
Refer to the docs here > Bootstrap Navbar
/*!
* Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
background-color: #fff;
}
}
.navbar-static-top {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/loginlogo.png">
</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li> <i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li> <i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li> <i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li> <i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li> <i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>
I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.
skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.