Parent element changing when javascript applies a transformation - javascript

I am trying to create a side menu navigation that slides into and off of the screen when you click a button. I have a container around the menu and the button so that they move together. The width of the container is 13% along with the menu which is weird that the menu is 13% of the body and not of the container. However, when I click the button the menu width becomes 13% of the container and no longer of the body. I would like the width to stay the same but I cannot figure out why it is doing this.
Note I have multiple CSS sheets for each screen size that is why function screensize() is there.
function navfunction() {
var z;
function screensize() {
if (window.innerWidth < 600) {
z = "translateX(-50%)";
} else {
z = "translateX(-15%)";
}
if (window.innerWidth > 1650) {
z = "translateX(-13%)";
} else {
z = z;
}
}
function navmove() {
var x = document.getElementsByClassName("navanimate")[0];
if (x.style.transform === "none") {
x.style.transform = z;
} else {
x.style.transform = "none";
}
}
screensize();
navmove();
}
.nav {
display: inline-block;
background-color: #efefef;
padding: 0px 0px 0px 0px;
width: inherit;
position: fixed;
overflow: hidden;
height: 100%;
border-right: 2px solid #bababa;
}
.navanimate {
transition: transform .8s;
transition-timing-function: ease-out;
position: fixed;
height: 100%;
width: 15%;
background-color: red;
padding-right: 0px;
}
.centernav {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-51%);
}
.menupic {
position: fixed;
width: 35px;
height: 35px;
cursor: pointer;
top: 49%;
left: 15%;
background-color: #efefef;
border: 2px solid #bababa;
border-left: none;
padding: 12px 0px 12px 0px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.navop {
display: inline-block;
color: black;
text-decoration: none;
font-family: verdana;
font-size: 17px;
margin: 0px 0px 0px 0px;
padding: 15px 0px 15px 15px;
width: 100%;
}
.navop:hover {
background-color: white;
}
<span class="navanimate" style="transform:none;">
<span class="nav">
<span class="centernav">
<span class="current"><a class="navop" href="index.html">Home</a></span><br>
<a class="navop" href="about.html">About Us</a><br><a class="navop" href="documents.html">Documents</a><br><a class="navop" href="events.html">Events and <span class="navbreaker"></span>Calendar</a>
<br><a class="navop" href="contact.html">Contact Info</a><br><a class="navop" href="clubhouse.html">Clubhouse</a><br><a class="navop" href="index.html">Architectural <span class="navbreaker"></span>Control</a>
<br><a class="navop" href="index.html">Dues</a><br><a class="navop" href="index.html">Parking</a><br><a class="navop" href="index.html">Pool</a>
<br><a class="navop" href="index.html">Trash and Recycle</a>
</span>
</span>
<img src="menupic.png" class="menupic" onclick="navfunction()">
</span>

I think you can get away with your javascript doing a single thing: adding and removing an open class.
Everything else you should be able to achieve with CSS.
function navfunction() {
document.querySelector('.nav.animate').classList.toggle('open')
}
body,
html {
margin: 0;
}
.nav {
position: fixed;
height: 100%;
width: 15%;
background-color: red;
}
.nav.open {
transform: translatex(-100%);
}
.nav.animate {
transition: transform 0.8s;
}
.nav-button {
display: block;
background: black;
position: absolute;
width: 35px;
height: 35px;
cursor: pointer;
top: 50%;
transform: translatey(-17px);
right: -35px;
border: none;
}
.nav-item {
display: block;
}
<div class="nav animate">
<div class="nav-items">
<a class="nav-item" href="index.html">Home</a>
<a class="nav-item" href="about.html">About Us</a>
<a class="nav-item" href="documents.html">Documents</a>
<a class="nav-item" href="events.html">Events and Calendar</a>
<a class="nav-item" href="contact.html">Contact Info</a>
<a class="nav-item" href="clubhouse.html">Clubhouse</a>
<a class="nav-item" href="index.html">Architectural Control</a>
<a class="nav-item" href="index.html">Dues</a>
<a class="nav-item" href="index.html">Parking</a>
<a class="nav-item" href="index.html">Pool</a>
<a class="nav-item" href="index.html">Trash and Recycle</a>
</div>
<button class="nav-button" onclick="navfunction()"></button>
</div>

Related

Toggle active nav-link

I have a problem with toggling the active nav-link using JavaScript. I think my CSS is causing some problems but I do not know why.
I have the CSS code down at the bottom if that is any help. I have linked Jquery and my own name.js document correctly in my HTML head. I want to toggle the active link when it is visited.
var header = document.getElementById("nav-bar")
var toggled_nav = document.getElementsByClassName("nav-item")
for (var i = 0; i < toggled_nav.length; i++) {
toggled_nav[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
#nav-bar {
margin: 27px auto 0;
position: relative;
width: 610px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
#nav-bar a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
#nav-bar .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 110px;
}
a:nth-child(3) {
width: 180px;
}
a:nth-child(4) {
width: 110px;
}
a:nth-child(5) {
width: 110px;
}
nav .start-home,
a:nth-child(1):hover~.animation {
width: 100px;
left: 0;
background-color: #1abc9c;
}
nav .start-about,
a:nth-child(2):hover~.animation {
width: 110px;
left: 100px;
background-color: #fcf75e;
}
nav .start-blog,
a:nth-child(3):hover~.animation {
width: 180px;
left: 210px;
background-color: #3498db;
}
nav .start-portefolio,
a:nth-child(4):hover~.animation {
width: 90px;
left: 400px;
background-color: #9b59b6;
}
nav .start-contact,
a:nth-child(5):hover~.animation {
width: 110px;
left: 500px;
background-color: #e67e22;
}
<nav id="nav-bar">
<a class="nav-item" href="#">HOME</a>
<a class="nav-item" href="#">POKEMON</a>
<a class="nav-item" href="#">LEAUGE OF LEGENDS</a>
<a class="nav-item" href="#">API-DOC</a>
<a class="nav-item" href="#">ABOUT US</a>
<div class="animation start-home"></div>
</nav>
I simplified your code and created specific active classes for each nav. You can give the parent the click handler and refer to the children through e.target since in this case the children take up the full space of the parent.
var header = document.getElementById("nav-bar")
header.addEventListener("click",function(e){
has_class = header.querySelector(".active");
if(has_class)has_class.classList.remove("active");
e.target.classList.add("active");
});
#nav-bar {
margin: 27px auto 0;
position: relative;
width: 610px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
#nav-bar a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
#nav-bar .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
.active{
border-radius: 8px;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 110px;
}
a:nth-child(3) {
width: 180px;
}
a:nth-child(4) {
width: 110px;
}
a:nth-child(5) {
width: 110px;
}
a:nth-child(1).active{
background:#1abc9c;
}
nav .start-home, a:nth-child(1):hover~.animation {
width: 100px;
left: 0;
background-color: #1abc9c;
}
a:nth-child(2).active{
background:#fcf75e;
}
nav .start-about, a:nth-child(2):hover~.animation {
width: 110px;
left: 100px;
background-color: #fcf75e;
}
a:nth-child(3).active{
background:#3498db;
}
nav .start-blog, a:nth-child(3):hover~.animation {
width: 180px;
left: 210px;
background-color: #3498db;
}
a:nth-child(4).active{
background:#9b59b6;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
width: 90px;
left: 400px;
background-color: #9b59b6;
}
a:nth-child(5).active{
background:#e67e22;
}
nav .start-contact, a:nth-child(5):hover~.animation {
width: 110px;
left: 500px;
background-color: #e67e22;
}
<nav id="nav-bar">
<a class="nav-item" href="#">HOME</a>
<a class="nav-item" href="#">POKEMON</a>
<a class="nav-item" href="#">LEAUGE OF LEGENDS</a>
<a class="nav-item" href="#">API-DOC</a>
<a class="nav-item" href="#">ABOUT US</a>
<div class="animation start-home"></div>
</nav>
For the first two .nav-item I see they are referring to different files. So in their curresponding files, you can mark them active.
For rest of the three .nav-item you can use (I am using JQuery since you mentioned it)
$('#nav-bar').on('click', '.nav-item', function(e) {
$('.nav-item.active', e.currentTarget).removeClass('active');
$(this).addClass('active');
}
make sure the css for the .active is being applied correctly.
You could do something like this; where you remove the active class for each item and then add it to the one that was clicked.
let items = document.querySelectorAll(".nav-item")
items.forEach(item => {
item.addEventListener("click", event => {
const current = document.querySelector('.active')
current.classList.remove('active')
item.classList.add("active")
})
})

How to show full width background color on tree node CSS

I have created a tree and there is background-color change on hover of tree node. I want to show background-color on full width like in this example(on click of any node it shows gray color).
But the element on which I am applying the background-color is not full width itself. How can I achieve this?
.qwc-tree__branch {
padding-left: 40px !important;
font-size: 12px;
}
.tree__root {
padding-left: 0 !important;
}
.tree__node {
list-style-type: none;
margin: 0;
padding-left: 5px;
position: relative
}
.tree__node::before,
.tree__node::after {
content: '';
left: -20px;
position: absolute;
right: auto
}
.tree__node::before {
border-left: 1px dotted #e0e0e0;
bottom: 50px;
height: 100%;
top: 0;
width: 1px
}
.tree__node::after {
border-top: 1px dotted #e0e0e0;
height: 20px;
top: 15px;
width: 25px
}
.tree__root>.tree__root-node::before {
border: 0;
}
.tree__root>.tree__root-node::after {
border: 0;
}
.tree__node-header:hover {
background-color: lightblue;
}
.tree__node-name {
display: inline-flex;
align-items: center;
padding: 3px 8px;
text-decoration: none
}
.tree__node-name--icon {
margin: 0 5px 0 3px;
color: $primary;
}
.tree__node-action {
cursor: pointer;
float: right;
margin-right: 15px
}
tree .tree__node:last-child::before {
height: 30px
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
<li class="tree__node tree__root-node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> India
</span>
<i class="material-icons tree__node-action">minimize</i>
</div>
<ul class="tree__branch">
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Punjab
</span>
</div>
</li>
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Haryana
</span>
</div>
</li>
</ul>
</li>
</ul>
You can use pseudo element to simulate the background and make it overflowing:
.tree__node-header:after {
content:"";
position:absolute;
top:0;
left:-40px; /*adjust this*/
right:0;
bottom:0;
z-index:-1;
}
Full code:
.qwc-tree__branch {
padding-left: 40px !important;
font-size: 12px;
}
.tree__root {
padding-left: 0 !important;
}
/*added this*/
.tree__root>.tree__root-node>.tree__node-header {
overflow:hidden;
}
/**/
.tree__node {
list-style-type: none;
margin: 0;
padding-left: 5px;
position: relative
}
.tree__node::before,
.tree__node::after {
content: '';
left: -20px;
position: absolute;
right: auto
}
.tree__node::before {
border-left: 1px dotted #e0e0e0;
bottom: 50px;
height: 100%;
top: 0;
width: 1px
}
.tree__node::after {
border-top: 1px dotted #e0e0e0;
height: 20px;
top: 15px;
width: 25px
}
.tree__root>.tree__root-node::before {
border: 0;
}
.tree__root>.tree__root-node::after {
border: 0;
}
.tree__node-header:hover,
.tree__node-header:hover:after { /*Added this*/
background-color: lightblue;
}
/*Added this*/
.tree__node-header {
position:relative;
}
.tree__node-header:after {
content:"";
position:absolute;
top:0;
left:-45px;
right:0;
bottom:0;
z-index:-1;
}
/* */
.tree__node-name {
display: inline-flex;
align-items: center;
padding: 3px 8px;
text-decoration: none
}
.tree__node-name--icon {
margin: 0 5px 0 3px;
color: $primary;
}
.tree__node-action {
cursor: pointer;
float: right;
margin-right: 15px
}
tree .tree__node:last-child::before {
height: 30px
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
<li class="tree__node tree__root-node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> India
</span>
<i class="material-icons tree__node-action">minimize</i>
</div>
<ul class="tree__branch">
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Punjab
</span>
</div>
</li>
<li class="tree__node">
<div class="tree__node-header">
<span class="tree__node-name">
<i class="material-icons tree__node-name--icon">assignment</i> Haryana
</span>
</div>
</li>
</ul>
</li>
</ul>

Collapse only on Mobile View Bootstrap 3

On the desktop view the "ul .item-description" should be visible, but on the mobile view it should be collapsed. I did it but it seems to me that this is a terrible decision. How can I improve this? Also, the arrow does not work the first time. How to fix it? I tried to fix this with js, but when I refresh the page I see how the arrow is twitching.
Sorry, my english is very bad.
jsfiddle - http://jsfiddle.net/p6t3brob/13/
html
<div class="collapsed-item">
<div class="collapse-element-title visible-xs" data-toggle="collapse" data-target="#items">collapse-title
</div>
<ul class="item-description hidden-xs" id="items">
<li class="title">title-text</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
</ul>
</div>
css
.collapsed-item {
display: block;
outline: 1px solid red;
margin-top: 20px;
padding: 10px;
}
.collapse-element-title {
display: block;
outline: 1px solid orange;
position: relative;
padding-top: 10px;
padding-bottom: 10px;
}
.collapse-element-title:after {
display: block;
position: absolute;
top: 15px;
right: 10px;
width: 10px;
height: 10px;
border: 2px solid red;
border-top: none;
border-left: none;
transform: rotate(225deg);
content: "";
}
.collapse-element-title.collapsed:after {
top: 10px;
transform: rotate(45deg);
}
ul li {
margin-bottom: 10px;
}
.collapse-element-title {
cursor: pointer;
}
.collapse-element-title {
margin-bottom: 20px;
}
#media(max-width: 767px) {
#items.in,
#items.collapsing {
display: block!important;
}
}
#media(min-width: 768px) {
#crownDesc.collapse {
display: block !important;
height: auto !important;
}
}
Try to do like this http://jsfiddle.net/p6t3brob/15/
<div class="collapsed-item">
<div class="collapse-element-title visible-xs collapsed" data-toggle="collapse" data-target="#items">collapse-title
</div>
<ul class="item-description hidden-xs collapse" id="items">
<li class="title">title-text</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
</ul>
</div>

How do I keep the 'hover' effect while using a Jquery color change effect while scrolling

I am trying to create the effect of a navigation bar having its text change color on scroll. the problem is that once you start scrolling, the hover effect done with css does not work anymore.
Does anyone know how to fix this?
This is my code:
$(document).ready(function() {
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 600) {
$(".normalmenuitem").css('color', '#a9a9a9');
} else {
$(".normalmenuitem").css('color', '#5f666f');
}
});
});
body {
min-height: 4000px;
}
.box {
background-color: #fff;
position: absolute;
height: 59px;
width: 100%;
top: 0;
}
.navigationmenu {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
}
#logo {
transform: translateY(-50%);
position: absolute;
top: 29px;
left: 17px;
width: 160px;
}
/* top right menu! */
.holderrr {
position: absolute;
top: 10px;
right: 0px;
}
.rightmenu {
display: inline-block;
text-decoration: none;
text-align: center;
font-family: sourcesanspro-semibold;
font-size: 15px;
padding: 6px 17px 6px 17px;
}
.normalmenuitem {
padding: 6px 17px 6px 17px;
text-decoration: none;
color: #5f666f;
transition: .3s color;
}
.normalmenuitem:hover {
color: #292f36;
}
#trial {
color: #e16065;
}
#trial:hover {
color: #d64f54;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigationmenu">
<div class="box"></div>
<div class="nav">
<a href="http://braemo.com">
<img id='logo' src="http://images8.webydo.com/92/9273203/3958%2f4F9144FD-A273-B76D-94C9-3D8B569C8993.png">
</a>
</div>
<div class="holderrr">
<div class="rightmenu">
<a class="normalmenuitem" href='http://braemo.com/support.html'>Features</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Pricing</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Stories</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Blog</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Language</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Support</a>
<a class="normalmenuitem" href='http://dashboard.braemo.com'>Log In</a>
<a class="rightmenu" id="trial" href='http://braemo.com/pricing.html'>Start Free Trial</a>
</div>
</div>
</div>
Your problem is that Jquery overrides the CSS, if you want your CSS to override Jquery again you have to use !important for example:
.normalmenuitem:hover {
color: #292f36 !important;
}
Here is a working example https://jsfiddle.net/jL2z8yy4/

Editing html+css+js for a drop down nav bar

I found perfect code for drop down nav bar. But I'm stuck trying to edit it for my needs. Original complete code is situated here: https://github.com/vandoan/Elli/blob/master/dropDownNav.html
And how it looks: http://codepen.io/Xia-lj/pen/KdKOxw
HTML:
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc...
</div>
</div>
</div>
CSS:
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS:
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
What I'm trying to get: drop down nav bar like in example, but with three buttons "History", "Philosophy", "Physics". And each of this three sections must contain few books' names, e.g:
History:-
The History of Herodotus.
Titus Livius. The History of Rome.
Ivan Krypiakevych. The Great History of Ukraine.
"Philosophy":-
Works by Plato.
Nicomachean Ethics By Aristotle.
Fables And Aphorisms by Hryhorii Skovoroda.
"Physics":-
Stephen Hawking. A Brief History of Time.
Yakov Perelman. Physics for Entertainment.
I would be grateful to hear from anyone who may be able to help. I'm new in Web-development.
How about something like this CodePen which is same example you provided just a bit modified on the HTML and CSS parts, inside div#sections_panel I've added 3 divs - you mentioned 3 sections in the question - with a .sub_sections class name.
function toggleNavPanel(x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
if (panel.style.height == maxH) {
panel.style.height = "0px";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: 144px;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
padding:0 10px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > .sub_sections {
background: #333;
padding: 10px;
height: 258px;
margin:10px 2px 0 0;
color: #FC0;
width:calc(31% - 10px);
display:inline-block;
float:left;
}
#sections_panel > .sub_sections > a{
color:#EEE;
display:block;
padding:10px 5px;
text-decoration:none;
border-bottom:1px dotted #666;
}
#sections_panel > .sub_sections > a:hover{
color:#333;
background-color:orange;
}
#sections_panel > .sub_sections > h3{
color:orange;
text-align:center;
padding-bottom:5px;
border-bottom:1px #222 solid;
}
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div class="sub_sections">
<h3>Search Engines</h3>
Google
Yahoo!
Bing
</div>
<div class="sub_sections">
<h3>Social Networks</h3>
Facebook
Twitter
</div>
<div class="sub_sections">
<h3>Video Networks</h3>
Youtube
Vimeo
</div>
</div>
</div>
try this......
Html
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('The History of Herodotus,Titus Livius. The History of Rome,Ivan Krypiakevych. The Great History of Ukraine','sections_panel')">History <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Works by Plato,Nicomachean Ethics By Aristotle,Fables And Aphorisms by Hryhorii Skovoroda','sections_panel')">Philosophy <span id="navarrow">▾</span></button>
<button onclick="toggleNavPanel('Stephen Hawking. A Brief History of Time,Yakov Perelman. Physics for Entertainment','sections_panel')">Physics <span id="navarrow">▾</span></button>
</div>
<div id="sections_panel">
<div>
</div>
</div>
</div>
CSS
body {
margin: 0px;
background: #999;
}
div#topbar {
background: -webkit-linear-gradient(#666, #000);
background: linear-gradient(#666, #000);
height: 60px;
}
div#topbar > #logo {
float: left;
width: 140px;
height: 35px;
margin: 8px 0px 0px 30px;
font-size: 36px;
color: #999;
}
div#topbar > #sections_btn_holder {
float: left;
width: auto;
height: 46px;
padding-top: 16px;
}
div#topbar > #sections_btn_holder > button {
background: #F90;
}
div#topbar > #sections_panel {
position: absolute;
height: 0px;
width: 550px;
background: #000;
top: 60px;
left: 160px;
border-radius: 0px 0px 8px 8px;
overflow: hidden;
z-index: 10000;
transition: height 0.3s linear 0s;
}
div#topbar > #sections_panel > div {
background: #333;
padding: 20px;
height: 238px;
margin: 10px;
color: #FC0;
}
JS
function toggleNavPanel(text,x) {
var panel = document.getElementById(x),
navarrow = document.getElementById("navarrow"),
maxH = "300px";
var books=text.split(",");
var html='';
for(var i=0; i<books.length; i++){
html+=(i+1)+") "+books[i]+"<br/>";
}
if (panel.style.height == maxH) {
panel.style.height = "0px";
panel.innerHTML="";
navarrow.innerHTML = "▾";
} else {
panel.style.height = maxH;
panel.innerHTML="<div>"+html+"</div>";
navarrow.innerHTML = "▴";
}
}
are you looking for something like http://codepen.io/fwpolice/pen/pqlgy
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font: 13px Helvetica, Tahoma, serif;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 1 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Drop Item 1
</a>
</li>
<li>
<a href="#">
Drop Item 2
</a>
</li>
<li>
<a href="#">
Drop Item 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
asdf
</a>
</li>
</ul>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Maybe this toolbar is one for you:
http://w2ui.com/web/demo/toolbar

Categories