I currently want to get the current height of the navigation so that when it transitions from position block to flex the aside element can align itself accordingly.
Here the navigation, normally it will stay at the top of website, but when i scroll over 20 it will change postion to fixed to stick to top of the website
<nav>
<i class="uil uil-list-ul" id="inMenu"></i>
<img src="../../imgs/BCG-logos_white.png" alt="">
<form id="search" action="">
<input type="text" placeholder="Your Books">
<button><i class="uil uil-search"></i></button>
</form>
<div id="Login">
<i class="uil uil-draggabledots"></i>
<button><i class="uil uil-user"></i> Đăng Nhập</button>
</div>
</nav>
Here is the aside
It is okay when the nav hasn't added a class fixed yet, but when it does the aside will automatically push up to the top of the website and cover a part of the navigation.
/* Navigation */
nav {
background-color: #172B4D;
display: flex;
padding: 5px 30px;
position: relative;
align-items: center;
justify-content: space-between;
z-index: 100;
}
.fixed {
position: fixed;
top: 0;
}
/ * Navigation hidden menu */ nav>i {
font-size: 15px;
color: #F0F0F0;
position: absolute;
top: 40px;
left: 15px;
transition: transform 1s, background-color 1s;
background-color: #172B4D;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
}
nav>i:hover {
background-color: #000000;
transform: rotate(0.5turn);
}
/ * End Navigation Hidden Menu */
/* Navigation Logo Image */
nav>img {
width: 7%;
}
/* End of Logo Navigation */
/* Search Navigation */
nav>form {
width: 40%;
display: flex;
}
nav>form>input {
width: 90%;
height: 25px;
border: none;
outline: none;
padding: 0 10px;
border-radius: 45px 0 0 45px;
}
nav>form>button {
width: 10%;
border: none;
border-radius: 0 45px 45px 0;
cursor: pointer;
}
/* End Search Navigation */
/* Setting and Login Navigation */
nav>#Login {
width: 115px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav>#Login>i {
color: #F0F0F0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.75s, transform 0.75s;
}
nav>#Login>i:hover {
background-color: #000000;
transform: rotate(0.25turn);
}
nav>#Login>button {
background-color: transparent;
border: none;
color: #F0F0F0;
border-radius: 45px;
padding: 2px 4px;
cursor: pointer;
transition: background-color 0.5s;
}
nav>#Login>button:hover {
background-color: #000000;
}
/* End Setting and Log Navigation */
/* End Navigation */
/* Article */
article {
height: 5000px;
}
/* Aside */
aside {
background-color: #172B4D;
color: #F0F0F0;
padding-top: 30px;
position: fixed;
overflow: auto;
transition: width 0.75s;
height: 100%;
z-index: 100;
}
/* Hide aside button */
aside>i {
position: absolute;
top: 10px;
right: 10px;
transition: color .5s;
}
aside>i:hover {
color: #5895ff;
}
/* End hidden aside button */
/* Menu heading */
aside>.menu-header {
cursor: pointer;
}
aside>.menu-header>h4:hover {
color: #86785d;
background-color: #021537;
cursor: pointer;
}
aside>.menu-header>h4 {
padding: 5px 10px;
background-color: #00225d;
border: 1px solid #172B4D;
font-size: 0px;
transition: font-size 0.75s;
color: #B3BAC5;
}
/* End menu item */
/* Sub menu item */
aside>.menu-header>ul {
padding-left: 30px;
list-style: none;
height: 0;
overflow: hidden;
}
aside>.menu-header>.show {
height: unset;
}
.menu-header>ul>li>a {
color: #E3EDFF;
font-size: 13px;
padding: 5px;
text-decoration: none;
}
.menu-header>ul>li>a:hover {
color: #86785d;
}
/* End menu sub-item */
/* End Aside */
<aside style="width: 0px;">
<i class="uil uil-times-square" id="outMenu"></i>
<div class="menu-header" id="BookTag">
<h4><i class="uil uil-label-alt"></i> Book Tag</h4>
<ul>
<li><i class="uil uil-book "></i> Sách Việt Nam</li>
<li><i class="uil uil-book "></i> Sách Ngoại Quốc</li>
</ul>
</div>
<div class="menu-header" id="ComicTag">
<h4><i class="uil uil-label-alt"></i> Comic Tag</h4>
<ul>
<li><i class="uil uil-swatchbook"></i> Truyện Việt Nam</li>
<li><i class="uil uil-swatchbook"></i> Truyện Ngoại Quốc</li>
</ul>
</div>
<div class="menu-header" id="GameTag">
<h4><i class="uil uil-label-alt"></i> Game Tag</h4>
<ul>
<li><i class="uil uil-headphones-alt "></i> Game Việt Nam</li>
<li><i class="uil uil-headphones-alt "></i> Game Ngoại Quốc</li>
</ul>
</div>
<div class="menu-header" id="Author">
<h4><i class="uil uil-edit-alt"></i> Author</h4>
<ul>
<li><i class="uil uil-book-open"></i> Review DashBoard</li>
<li><i class="uil uil-books"></i> Review Request</li>
<li><i class="uil uil-book-reader"></i> Top Author</li>
</ul>
</div>
<div class="menu-header" id="forum">
<h4><i class="uil uil-podium"></i> Forum</h4>
<ul>
<li><i class="uil uil-download-alt"></i> Download Book</li>
<li><i class="uil uil-post-stamp"></i> Book Request</li>
<li><i class="uil uil-arrow-growth"></i> Nomination Book</li>
<li><i class="uil uil-download-alt"></i> Download Comic</li>
<li><i class="uil uil-post-stamp"></i> Comic Request</li>
<li><i class="uil uil-arrow-growth"></i> Nomination Comic</li>
<li><i class="uil uil-download-alt"></i> Download Game</li>
<li><i class="uil uil-post-stamp"></i> Game Request</li>
<li><i class="uil uil-arrow-growth"></i> Nomination Game</li>
<li><i class="uil uil-envelope"></i> Create discuss</li>
</ul>
</div>
<div class="menu-header" id="About">
<h4><i class="uil uil-channel"></i> About Us</h4>
</div>
<div class="menu-header" id="Contact">
<h4><i class="uil uil-comment-alt-medical"></i> Contact Us</h4>
</div>
<div class="menu-header" id="FAQ">
<h4><i class="uil uil-question-circle"></i> FAQ</h4>
</div>
</aside>
<script>
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.scrollY >= 20) {
nav.classList.add("fixed");
document.querySelector('#s-1').style.paddingTop = "130px";
document.querySelector('aside').style.marginTop = "35px";
} else {
nav.classList.remove("fixed");
document.querySelector('#s-1').style.paddingTop = "50px";
document.querySelector('aside').style.marginTop = "unset";
}
})
</script>
here I don't want to set the margin top manually but will change accord to navigation
ResizeObserver API can be used for attaching event handlers on resize events.
Here is an example
function resizeHandler(entries) {
for (let entry of entries) {
if (entry.target.id == "box") {
const width = entry.contentRect.width;
const height = entry.contentRect.height;
entry.target.innerText = `My size\n width: ${width}\n height: ${height}`
}
}
}
new ResizeObserver(resizeHandler).observe(document.querySelector("#box"))
#box {
width: 50%;
height: 100px;
border: 8px red solid;
}
<div id="box">
Resize me!
</div>
Related
I am creating a small webapp in flask,where I have a sidebar navigation which consist of all question.
When I click on question,respective question page is rendered in right section.
But,the question which is clicked,is not selected and navigate to the top.
How, I can keep the question which is clicked selected and on focus?
body {
margin: 0;
padding: 0;
font-family: 'montserrat';
background: #e3e9f7;
}
.logo {
padding: 20px;
}
nav ul {
margin: 0;
padding: 0;
height: 100%;
width: 260px;
position: fixed;
top: 0;
left: 0;
background-color: #2b2626;
max-height: 100vh;
overflow-y: auto;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
font-family: 'montserrat';
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
color: #fff;
position: relative;
padding: 15px 0px 15px 25px;
transition: all 0.5s;
}
nav ul li a:before {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #e3e9f7;
border-radius: 40px 0 0 40px;
z-index: -1;
transition: all 1s;
}
nav ul li a:hover {
color: #2b2626;
}
nav ul li a:hover:before {
width: 95%;
}
.wrapper {
margin-left: 260px;
}
.section {
display: grid;
top: 60px;
min-height: 100vh;
text-align: center;
}
.box-area h2 {
text-transform: uppercase;
font-size: 30px;
}
#myBtn {
position: fixed;
bottom: 20px;
left: 200px;
z-index: 99;
font-size: 8px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
nav ul#my-ul {
scroll-behavior: smooth;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function scrollToTop() {
const el = document.getElementById("my-ul");
el.scrollTop = 0;
}
</script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<nav id="my-div">
<ul id="my-ul">
<li class="logo"><img src="https://i.imgur.com/E26Pj54.png"></li>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
</ul>
</nav>
<div class="wrapper">
<div class="section">
<div class="box-area">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<button id="myBtn" onclick="scrollToTop()">Back To Top Question</button>
</script>
</html>
Use below syntax.
function scrollToTop() {
window.scrollTo(0, 0);
}
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>
I'm trying to create a side navigation with a top & bottom. When the window height shrinks, I want the bottom navigation to overlap the top & the top navigation to have a scroll. I put in some CSS gradient to help indicate to the user that items are overflowed but instead I want a scrollbar. I only want the scrollbar if the content is overflowed (likely requires JS but I could be wrong).
Help appreciated
Fiddle here, HTML & CSS below.
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
background-color: #fff;
}
html,
body,
.pane-sidebar {
height: 100%;
}
.pane-sidebar {
background-color: #456081;
position: relative;
text-align: center;
width: 75px;
}
.full-height,
.k-splitter.full-height {
height: 100%;
padding: 0;
margin: 0;
}
.pane-sidebar .sidebar-menu-wrapper {
padding: 1.25rem 0;
min-height: 40rem;
overflow: auto;
}
.pane-sidebar .brand {
padding: 0;
margin: 0;
font-weight: normal;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.875rem;
color: #ffffff;
}
.pane-sidebar ul.primary {
min-height: 26.25rem;
}
.pane-sidebar ul {
list-style: none;
margin: 0;
padding: 2rem 0;
text-align: center;
}
.pane-sidebar ul li {
padding-bottom: 1.5rem;
}
.pane-sidebar ul li.secondary {
padding-bottom: 0.625rem;
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
.pane-sidebar ul li a {
font-size: 2rem;
color: #ffffff;
text-decoration: none;
display: block;
}
.pane-sidebar ul li.secondary a span {
font-size: 0.625rem;
}
.pane-sidebar ul li a span {
font-size: 0.75rem;
color: #ffffff;
display: block;
}
.pane-sidebar ul.secondary {
position: absolute;
bottom: 0;
left: 50%;
width: 4rem;
margin-left: -2rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #456081 15%, #456081 100%);
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
button {
background-color: transparent;
border: 0 none;
}
.pane-sidebar .show-errors {
cursor: pointer;
}
button {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
overflow: visible;
text-transform: none;
background-color: #4b708b;
color: #fff;
padding: 0.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<div class="pane-sidebar full-height">
<div class="sidebar-menu-wrapper">
<h1 class="brand">Brand</h1>
<ul class="primary">
<li>
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
</ul>
<ul class="secondary">
<li class="secondary">
<button class="show-errors" type="button">
<i class="far fa-bell"></i>
</span>
</button>
</li>
<li class="secondary">
<a href="#">
<i class="fas fa-box"></i>
<span>Bottom</span>
</a>
</li>
</ul>
</div>
You could use flexbox on the menu-wrapper. Then make your primary fill the extra space and show a scrollbar:
.sidebar-menu-wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.primary {
flex: 1;
overflow-y: auto;
}
Here is a fiddle: https://jsfiddle.net/mehg8uL2/
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>
I am in the process of building this dashboard the problem is when i hover over the li in the sidebar then the sub menu shows but when I take the cursor away from the menu title to the submenu ul then the heading disappears.
Test the code after expanding the window size to full. I have marked the code which is responsible for showing menu on hover with the title "Code Responsible for showing menu on hover"
Also i cant get rid of that black mark over the title
https://i.imgur.com/TVnKPMG.png
var toggler = document.querySelector('.toggler');
var minWidth768 = window.matchMedia("(min-width: 768px)");
var maxWidth767 = window.matchMedia("(max-width: 767px)");
var bdy = document.querySelector('.bdy');
toggler.addEventListener("click", function() {
if(minWidth768.matches) {
bdy.classList.toggle('sidebar-collapse');
} else if(maxWidth767.matches) {
bdy.classList.toggle('sidebar-expand');
}
});
var treeview = document.querySelectorAll(".treeview > .treeview-menu");
var submenu = document.querySelectorAll(".treeview ul");
for (var i=0; i<treeview.length; i++) {
treeview[i].parentNode.addEventListener("click", function(ev) {
ev.preventDefault();
this.classList.toggle("menu-open");
for (var x=0; x<treeview.length; x++){
submenu[x].addEventListener("click", function(e) {
e.stopPropagation();
})
}
});
}
/*HEADER*/
* {
transition: all 300ms linear;
}
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
}
.main-header .logo {
display: block;
float: left;
height: 50px;
font-size: 20px;
line-height: 50px;
text-align: center;
width: 230px;
padding: 0 15px;
font-weight: 300;
background: #7f224f;
overflow: hidden;
color: #fff;
}
.main-header .navbar {
margin-bottom: 0;
margin-left: 230px;
border: none;
min-height: 50px;
border-radius: 0;
background: #9b265f;
}
.toggler {
margin-top:10px;
font-size: 20px;
color: white;
cursor: pointer;
margin-left: 10px;
}
.logo-mini {
display: none;
}
/*SIDEBAR*/
#main-sidebar{
position: absolute;
top: 0;
left: 0;
padding-top: 70px;
min-height: 100%;
width: 230px;
z-index: 810;
background: #222d32;
}
.user-panel {
position: relative;
width: 100%;
padding: 10px;
overflow: hidden;
}
.user-p-image img {
width: 100%;
max-width: 50px;
height: auto;
}
.user-panel .info {
padding: 5px 5px 5px 15px;
line-height: 1;
position: absolute;
left: 55px;
color: #fff;
}
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-menu > li {
position: relative;
margin: 0;
padding: 0;
}
.sidebar-menu li.header {
padding: 10px 25px 10px 15px;
font-size: 12px;
color: #4b646f;
background: #1a2226;
}
.sidebar a {
color: #b8c7ce;
text-decoration: none;
}
.sidebar-menu > li > a {
padding: 12px 5px 12px 15px;
display: block;
background: #111618;
margin: 6px 0;
}
/*SIDEBAR TOGGLE CODE*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .main-header .logo {
width: 50px !important;
}
.bdy.sidebar-collapse .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-collapse .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-collapse .main-header .navbar {
margin-left: 50px;
}
.bdy.sidebar-collapse #main-sidebar {
width: 50px !important;
}
.bdy.sidebar-collapse #content-wrapper {
margin-left: 50px;
}
}
#media (max-width: 767px) {
.main-header .logo {
width: 0px;
}
.main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.main-header .logo > .logo-lg {
display: none;
}
.main-header .navbar {
margin-left: 0px;
}
#main-sidebar {
width: 0px !important;
padding-left: 0px !important;
overflow: hidden;
}
#content-wrapper {
margin-left: 0px !important;
}
.bdy.sidebar-expand .main-header .logo {
width: 230px;
}
.bdy.sidebar-expand .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-expand .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-expand .main-header .navbar {
margin-left: 230px;
}
.bdy.sidebar-expand #main-sidebar {
width: 230px !important;
}
.bdy.sidebar-expand #content-wrapper {
margin-left: 230px;
}
}
/*END OF TOGGLE CODE*/
/*LIST TOGGLE*/
.treeview-menu {
display: none;
}
.treeview.menu-open .treeview-menu{
display: block;
}
/*END OF LIST TOGGLE*/
/*Code Responsible for showing menu on hover*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .sidebar-menu > li > a > span,
.bdy.sidebar-collapse .sidebar-menu > li > .treeview-menu {
display: none !important;
}
.bdy.sidebar-collapse .sidebar-menu > li > a:hover span {
display: block !important;
position: absolute;
top: 0;
width: 180px;
background: #111618;
padding: 12px 0;
left: 49px;
z-index: 99999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover .treeview-menu {
display: block !important;
background: grey;
position: absolute;
width: 180px;
left: 49px;
z-index: 999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
position: relative !important;
float: right;
width: auto !important;
left: 180px !important;
top: -22px !important;
z-index: 900;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
top: 44px;
margin-left: 0;
}
}
/*CONTENT*/
#content-wrapper {
padding: 15px;
margin-left: 230px;
min-height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="bdy">
<div class="wrapper">
<header class="main-header">
<a href="index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>K</b>Ame</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Ame</b>Xub</span>
</a>
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="toggler"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dinesh Thapa <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</header>
<div id="main-sidebar">
<div class="sidebar">
<div class="user-panel">
<div class="pull-left user-p-image">
<img src="user.jpg" class="img-circle">
</div>
<div class="pull-left info">
<p>Dinesh Thapa</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span class='nme'>Dashboard</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Dashboard v1</li>
<li class="active"><i class="fa fa-circle-o"></i> Dashboard v2</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Top Navigation</li>
<li><i class="fa fa-circle-o"></i> Boxed</li>
<li><i class="fa fa-circle-o"></i> Fixed</li>
<li><i class="fa fa-circle-o"></i> Collapsed Sidebar</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<span>dsdssdd</span>
</a>
</li>
</ul>
</div>
</div>
<div id="content-wrapper">
<div class="row">
<h1>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</h1>
</div>
<footer style="position: absolute; bottom: 0;">
copyright
</footer>
</div>
</div> <!-- wrapper -->
</div> <!--bdy -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
https://jsfiddle.net/nd9ky5x2/