auto showing and hiding navigation bar - javascript

Hi I'm trying to implement a auto show and hide navigation menu. I'm not sure how I would implement this idea. The idea I'm wanting is so the navbar slips away out of site above the website and when the cursor hovers over the top the nav bar appears. (A better example is (if you own a Mac) the idea comes from the Dock when auto hidden).
Would I use a .CSS transition or a JQuery/Javascript to implement this.
Heres the navbar I'm working with,
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
background-color: #a137a7;
font-family:'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family:'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
<li><a href=/""a target="_blank"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
<li><a href="/"><img class="blog"
src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>
<li><a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li>
<li style="float:right"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png"></a></li>
<li style="float:right"><img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png"></li>
<li style="float:right"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png"></a></li>
<li style="float:right"><a href="/""a target="_blank"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
</ul>
</nav>
<body>


I would use the nav to slide up and down. See my code:
I've added a red border to the nav, so you can see it (for demo).
$(function() {
$('.hover').on('mouseenter mouseleave', function() {
$('nav').toggleClass('toggleNav');
});
});
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
border: 1px solid red;
height: 175px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
.hover {
width: 50px;
height: 50px;
background: lightblue;
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
</a>
</li>
<li>
<a href="/">
<img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/" target="_blank ">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
</a>
</li>
/
</ul>
</nav>
<div class="hover">Hover here</div>


This Is An Example Of Your Requirement Please Try Once
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
if(y<=50){
document.getElementById("navBar").style.display = 'block';
}
else{
document.getElementById("navBar").style.display = 'none';
}
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
}
div {
width: 100%;
height: 300px;
border: 1px solid black;
}
.nav{
width:100%;
height:50px;
background:#00ffff;
display:none;
}
<div onmousemove="myFunction(event)" onmouseout="clearCoor()">
<div class="nav" id="navBar"></div>
</div>
<p id="demo"></p>


* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
border: 1px solid red;
height: 175px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
nav:hover {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li>
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
</a>
</li>
<li>
<a href="/">
<img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/" target="_blank ">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
</a>
</li>
/
</ul>
</nav>
<body>

Related

how to toggle or change HTML class name using JavaScript

I try to change the color of the navigation bar when the theme change button is clicked.
This is HTML code
<header class="header">
<a href="#">
<img class="logo" alt="logo" src="img/logo.png" />
</a>
<nav class="main-nav" id="main-nav">
<ul class="main-nav-list">
<li>
<a class="main-nav-link" href="#introduction">Intro</a>
</li>
<li>
<a class="main-nav-link" href="#portfolio">Projects</a>
</li>
<li>
<a class="main-nav-link" href="#contact">Hello</a>
</li>
<!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
</ul>
</nav>
</header>
Javascript code
const themeChange = () => {
const navElements = document.getElementsByClassName("main-nav-link");
// console.log("nav: " + navElements.length);
for (let i = 0; i <= navElements.length; i++) {
console.log(document.getElementsByClassName("main-nav-link")[i]);
document.getElementsByClassName("main-nav-link")[i].className =
"main-nav-link-summer";
}
}
I'm trying to change the class name from "main-nav-link" to "main-nav-link-summer" so the color for active, hover can be changed. But weirdly, only the first and third tags are changed and the second remains the same. The length of the "navElements" variable is 3.
CSS code
.main-nav-list {
list-style: none;
display: flex;
gap: 4.8rem;
align-items: center;
/* padding-right: 5rem; */
/* font-size: x-large; */
}
.main-nav-link,
.main-nav-link-summer {
text-decoration: none;
display: inline-block;
color: white;
font-weight: 500;
/* font size 1.8 */
font-size: 2.5rem;
transition: all 0.3s;
}
.main-nav-link-summer:hover,
.main-nav-link-summer:active {
color: #1d4116;
}
.main-nav-link:hover,
.main-nav-link:active {
color: #a63ec5;
}
.sticky {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 8rem;
padding-top: 0;
padding-bottom: 0;
background-color: rgba(255, 255, 255, 0.97);
z-index: 999;
box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03);
opacity: 0.8;
}
.sticky .main-nav-link {
color: #46244c;
}
.sticky .main-nav-link:hover,
.sticky .main-nav-link:active {
color: #a63ec5;
}

in javascript that's the easiest way, for what you wanna achieve I'm not exactly sure.
const navElements = document.querySelectorAll(".main-nav-link");
navElements.forEach((link) => {
link.classList.add("main-nav-link-summer");
});
.main-nav-list {
list-style: none;
display: flex;
gap: 4.8rem;
align-items: center;
/* padding-right: 5rem; */
/* font-size: x-large; */
}
.main-nav-link,
.main-nav-link-summer {
text-decoration: none;
display: inline-block;
color: white;
font-weight: 500;
/* font size 1.8 */
font-size: 2.5rem;
transition: all 0.3s;
}
.main-nav-link-summer:hover,
.main-nav-link-summer:active {
color: #1d4116;
}
.main-nav-link:hover,
.main-nav-link:active {
color: #a63ec5;
}
.sticky {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 8rem;
padding-top: 0;
padding-bottom: 0;
background-color: rgba(255, 255, 255, 0.97);
z-index: 999;
box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03);
opacity: 0.8;
}
.sticky .main-nav-link {
color: #46244c;
}
.sticky .main-nav-link:hover,
.sticky .main-nav-link:active {
color: #a63ec5;
}
<header class="header">
<a href="#">
<img class="logo" alt="logo" src="img/logo.png" />
</a>
<nav class="main-nav" id="main-nav">
<ul class="main-nav-list">
<li>
<a class="main-nav-link" href="#introduction">Intro</a>
</li>
<li>
<a class="main-nav-link" href="#portfolio">Projects</a>
</li>
<li>
<a class="main-nav-link" href="#contact">Hello</a>
</li>
<!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
</ul>
</nav>
</header>

I'd suggest a different approach all together. Going through and doing mass class name changes is really sub-optimal for dev and maintenance. Perhaps consider an approach like the example below instead as a simple proof of concept using separated css var themes so as you build you don't think about such things and can handle a design system much more flexibly without piling on lots of unnecessary extra code. Cheers.
const htmlEl = document.documentElement;
// set a detault or read their saved selection from localstorage or whatever.
htmlEl.dataset.theme = 'default';
// set the new selectiong when made.
toggleTheme = (theme) => htmlEl.dataset.theme = theme;
html[data-theme="default"] {
--body-bg: #f1f1f1;
--body-color: #000;
--btn-color: #212121;
--btn-bg: #fff;
--btn-hover-color: #a63ec5;
--btn-hover-bg: #ddd;
}
html[data-theme="summer"] {
--body-bg: lightblue;
--body-color: #000;
--btn-color: darkgreen;
--btn-bg: lightyellow;
--btn-hover-color: #1d4116;
--btn-hover-bg: #f1f1f1;
}
html[data-theme="winter"] {
--body-bg: #333;
--body-color: #fff;
--btn-color: #f1f1f1;
--btn-bg: #212121;
--btn-hover-color: lightblue;
--btn-hover-bg: #555;
}
html {
color: var(--body-color);
background-color: var(--body-bg);
}
.main-nav-list {
list-style: none;
display: flex;
align-items: center;
/* padding-right: 5rem; */
/* font-size: x-large; */
}
.main-nav-link {
text-decoration: none;
display: inline-block;
color: var(--btn-color);
background-color: var(--btn-bg);
padding: .25rem 1rem;
border-radius: 5px;
font-weight: 500;
/* font size 1.8 */
font-size: 2.5rem;
transition: all 0.3s;
}
.main-nav-list li:not(:last-child) {
margin-right: 1.5rem;
}
.main-nav-link:hover,
.main-nav-link:active {
color: var(--btn-hover-color);
background-color: var(--btn-hover-bg);
}
<br>
<strong>Choose your theme:</strong>
<select id="mySelect" onchange="toggleTheme(this.value)">
<option value="default">Default</option>
<option value="summer">Summer</option>
<option value="winter">Winter</option>
</select>
<br><hr><br>
<header class="header">
<a href="#">
<img class="logo" alt="logo" src="img/logo.png" />
</a>
<nav class="main-nav" id="main-nav">
<ul class="main-nav-list">
<li>
<a class="main-nav-link" href="#introduction">Intro</a>
</li>
<li>
<a class="main-nav-link" href="#portfolio">Projects</a>
</li>
<li>
<a class="main-nav-link" href="#contact">Hello</a>
</li>
<!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
</ul>
</nav>
</header>

Dropdown stays in the same place

The problem
Hello!
I have a problem with my hoverable dropdown menu. It always stays under the first navigation item even though it's not triggered, but it should be under the triggered navigation item (the navigation item on which the mouse pointer is located). How can i how can I fix that?
Thanks in advance!
#nav-list {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-item {
display: inline;
padding: 0;
}
.nav-item-text {
padding: 16px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: context-menu;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link {
padding: 20px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link:hover {
opacity: 100%;
cursor: pointer;
transition: .2s ease all;
color: var(--primary);
}
.nav-dropdown {
display: none;
opacity: 0;
position: absolute;
z-index: 99;
margin: 3px 0 0 0;
padding: 15px;
height: auto;
min-width: 280px;
background: var(--background);
border-radius: 4px;
border: 2px solid var(--elevation-16dp);
}
.nav-item:hover .nav-dropdown {
display: block;
transition: .2s ease all;
opacity: 100%;
}
<ul id="nav-list">
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title A 1</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title B 2</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
</ul>

You have to add this css to your code:
<style>
#nav-list > li {
position:relative;
}
#nav-list .nav-dropdown {
left: 0;
}
</style>

Adding an animation at the end of a scrolled section

I made this web page. There are 3 sections #sidebar, #postbar and #content and they have their own scroll. I'd like to add an animation that lets users know that they reached the end of a section.
I could be searching with wrong keywords, but most information is either about animation-as-scroll thing with a library such as AOS or jQuery solution to jump to the top or the bottom. Is there any native way to add such an animation with just javascript or maybe a simple css library?

You should try Intersection Obeserver :) Its pretty well supported now.
const mySections = document.querySelectorAll('.section');
observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
console.log('in the view');
} else {
console.log('out of view. FIRE EVENT!');
}
});
});
mySections.forEach(image => {
observer.observe(image);
});

You can check the scroll position compare to the offset height
var sidebar = document.getElementById('sidebar');
sidebar.addEventListener('scroll', function(e) {
if( e.target.scrollTop >= (e.target.scrollHeight - e.target.offsetHeight))
{
if (this.classList.contains('animate')) {
document.querySelector('#sidebar li:last-child').classList.remove('animate');
}
document.querySelector('#sidebar li:last-child').classList.add('animate');
}
});
.animate{
color: #ffffff;
-webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
-webkit-mask-size: 200%;
animation: shine 2s infinite;
}
#-webkit-keyframes shine {
from {
-webkit-mask-position: 150%;
}
to {
-webkit-mask-position: -50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Sidebar</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css'>
<link rel="shortcut icon" href="#">
<!-- <script src="{{ url_for('static', filename='script.js')}}"></script> -->
<!-- Font Awesome JS -->
<script>
console.log('default')
document.addEventListener('DOMContentLoaded', function () {
window.addEventListener('scroll', function(e) {
console.log(window.scrollY);
console.log(e.target);
if(e.target.tagName == 'ul'){
if( e.target.scrollTop === (e.target.scrollHeight - e.target.offsetHeight))
{
alert('done');
}
}
});
var postlist = document.getElementsByClassName("postlist");
var showPost = function() {
console.log('CLICKED')
var ps ='';// {{ postSource|safe }};
var idOfPost = this.id;
var iframe = document.getElementById("serviceFrameSend")
iframe.setAttribute("src", ps[idOfPost])
};
for (var i = 0; i < postlist.length; i++) {
postlist[i].addEventListener('click', showPost, false)
}
});
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous">
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous">
</script>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
</script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
<style>
/*
DEMO STYLE
*/
/*#import "https://fonts.googleapis.com/css?family=Menlo:300,400,500,600,700";*/
/* definition */
/* #font-face {
font-family: Menlo;
src: url('fonts/Menlo.ttc');
font-weight: normal;
font-style: normal;
} */
#import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
body {
/* font-family: 'Menlo', sans-serif; */
font-family: 'Fira Sans', sans-serif;
background: #2B3137;
overflow:hidden;
height: 100%;
}
p {
font-family: 'Fira Sans', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: #C7C7C7; /*원래inherit*/
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 0px dashed #ddd;
margin: 40px 0;
}
/* -------------------------------F--------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
height : 100px;
align-items: stretch;
}
#sidebar {
background: #2B3137;
color: #fff;
transition: all 0.3s;
height:95%;
position:fixed;
display:inline-block;
overflow:scroll;
width : 190px;
padding : 10px;
}
#notebook_title{
padding:20px;
text-align:center;
border-bottom: 0.0px solid #2B3137;
box-shadow: 0 0.1px 0 #C7C7C7;
color:#C7C7C7;
}
#postbar {
width : 240px;
background: #2B3137;
color: #fff;
transition: all 0.3s;
border-right: 0.1px solid #2A3446;
border-left: 0.1px solid #2A3446;
height:95%;
position:fixed;
display:inline-block;
overflow:scroll;
margin-left:190px;
padding : 10px 10px 10px 0px;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
margin : 2px 0px 5px 0px;
}
#posttbar .postbar-header {
padding: 20px;
background: #6d7fcc;
/* border-bottom: 0.1px solid #2B3137; */
box-shadow: 0 0.1px 0 #C7C7C7;
}
#sidebar ul.components {
padding: 0px 0;
border-bottom: 0px solid #47748b; /*색깔지움*/
}
#postbar ul.components {
/* padding: 20px 0; */
border-bottom: 0px solid #47748b;/*색깔지움*/
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#postbar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 0.9em;
display: block;
color:#C7C7C7;
}
#postbar ul li a {
padding: 10px;
font-size: 0.9em;
display: block;
height : 60px; /*포스트바블록사이즈*/
list-style-type:none;
color:#C7C7C7;
/* border-bottom: 0.1px solid #2B3137; */
box-shadow: 0 0.1px 0 #C7C7C7;
}
/*bullet제거*/
/* #postbar li {
list-style-type:none;
} */
#sidebar ul li a:hover {
color: #7386D5;
background: #fff; /*움직일때 색깔*/
}
#postbar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
#postbar ul li a:hover {
color: #7386D5;
background: #fff;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content{
width: 100%;
/* padding: 20px; */
/* min-height : 1000px; */
height: 100vh;
transition: all 0.3s;
background-color:#2B3137;
margin-left:420px;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: 0px; /* 원래 -250 */
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>HEADER</h3>
</div>
<ul class="list-unstyled components">
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>LAST</a>
</li>
</ul>
</nav>
<!-- POST BAR -->
<nav id="postbar">
<div id="notebook_title">{{currNoteBook}}</div>
<ul class="list-unstyled components">
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>list</a>
</li>
<li>
<a class=postlist>LAST</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
Some Contents
</div>
</div>
<!-- partial -->
</body>
</html>

How to change size of prices without disrupting the menu?

I've been trying to get the size of the prices to change, but whenever I do it goes on top of the dotted line instead of staying above it.
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
top: .9em;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
I tried to mess with the padding and margin, but it didn't change anything for me.
I just want to change the size of the prices while staying above the dotted lines

Just set the hight of .li explicitly, and also the size of .price em (that's the font size of the price).
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
/* set the height of the li explicitly */
height: 20px;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
float: right;
}
/* set the size of .price em */
.price em {
font-size: 50px;
}
/* set the size of .price sup */
.price sup {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
But I think it would be much better to use flexbox for this, and then you can set the font-size to whatever value you want, and don't have to worry about not displaying right:
body {
background: pink;
}
.menu-list {
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu-list .li {
margin: auto;
background: white;
display: flex;
width: 80%;
/* 'justify-content: space-between;' does the trick of
separating the two items in the li */
justify-content: space-between;
border-bottom: 1px dotted red;
}
.menu-list .li .title,
.menu-list .li .price {
display: flex;
}
.menu-list .li .title {
font-size: 18px;
align-self: flex-end;
}
.menu-list .li .price {
font-size: 30px;
}
<ul class="menu-list">
<li class="li"><span class="title">Food 1</span><span class="price">3<sup>50</sup></span></li>
<li class="li"><span class="title">Food 2</span><span class="price">5<sup>50</sup></span></li>
<li class="li"><span class="title">Food 3</span><span class="price">4<sup>00</sup></span></li>
</ul>

How to expand border bottom on click smoothly

I have a accordion.In hover appear a border bottom with small width.
How to expand this border bottom smoothly on click?
var acc = document.getElementsByClassName("accordion");
var i;
let li = document.getElementsByTagName("li");
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion {
font-size: 27px;
background-color: $default-white;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
transition: 0.4s;
}
.active {
border-bottom: 1px solid $default-black;
}
.panel {
padding: 0 18px; // background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
a {
text-decoration: none;
color: $default-black;
text-align: center;
font-size: 18px;
font-family: 'fira_sansregular';
color: grey;
}
li:hover:before {
content: "";
position: absolute;
left: 40%;
height: 1px;
margin-top: 75px;
text-align: center;
width: 20%;
border-bottom: 1px solid #000;
}
ul {
list-style-type:none;
}
<ul class='nav'>
<li>
<button class="accordion">BLA BLAS</button>
<div class="panel">
<a href='#'>First bla</a>
<a href='#'>second bla</a>
<a href='#'>third bla</a>
<a href='#'>fourth bla</a>
</div>
</li>
<li>
<button class="accordion">FILOSOPHY OF BLA</button>
<div class="panel">
<a href='#'>Page 2</a>
</div>
</li>
<li>
<button class="accordion">BLA BLA</button>
<div class="panel">
<a href='#'>Page 3</a>
</div>
</li>
<li>
<button class="accordion">SOME BLA BLA</button>
<div class="panel">
<a href='#'>Page 4</a>
</div>
</li>
<li>
<button class="accordion">BLA BLA</button>
<div class="panel">
<a href='#'>Page 5</a>
</div>
</li>
</ul>

Is this what you are looking for?
var acc = document.getElementsByClassName("accordion");
var i;
let li = document.getElementsByTagName("li");
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.parentNode.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion {
font-size: 27px;
background-color: $default-white;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
transition: 0.4s;
}
.panel {
padding: 0 18px; // background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
a {
text-decoration: none;
color: $default-black;
text-align: center;
font-size: 18px;
font-family: 'fira_sansregular';
color: grey;
}
.nav li {
position: relative;
}
.nav li:hover:before {
left: 40%;
width: 20%;
border-bottom: 1px solid #000;
transition: all 0.5s;
}
.nav li.active:before,
.nav li:hover:before {
content: "";
position: absolute;
height: 1px;
bottom: 0;
border-bottom: 1px solid #000;
}
.nav li.active:before {
width: 100%;
left: 0;
}
ul {
list-style-type: none;
}
<ul class='nav'>
<li>
<button class="accordion">BLA BLAS</button>
<div class="panel">
<a href='#'>First bla</a>
<a href='#'>second bla</a>
<a href='#'>third bla</a>
<a href='#'>fourth bla</a>
</div>
</li>
<li>
<button class="accordion">FILOSOPHY OF BLA</button>
<div class="panel">
<a href='#'>Page 2</a>
</div>
</li>
<li>
<button class="accordion">BLA BLA</button>
<div class="panel">
<a href='#'>Page 3</a>
</div>
</li>
<li>
<button class="accordion">SOME BLA BLA</button>
<div class="panel">
<a href='#'>Page 4</a>
</div>
</li>
<li>
<button class="accordion">BLA BLA</button>
<div class="panel">
<a href='#'>Page 5</a>
</div>
</li>
</ul>

in this block code ->
.accordion {
font-size: 27px;
background-color: $default-white;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
transition: 0.4s;
}
change two line code ->
border: none;
transition: 0.4s;
to this ->
border-bottom:1px solid #ffffffff;
transition: border 0.4s;
and add code hover; for example:
.accordion {
border-bottom: 1px solid black;
}
i hope help you;

Categories