CSS Transition doesn't work on height property - javascript

So I'm making a menu interaction on click, this is my code snippet if you want to have a look.
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
let labels = document.querySelector('.labels');
btn.onclick = function() {
icons.classList.toggle('active');
labels.classList.toggle('active');
}
body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 60px;
transition: 1s ease;
}
nav ul.icons:hover {
height: 100%;
}
nav ul li {
list-style: none;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<ul class="icons">
<li class="trigger">
<i class="fas fa-bars"></i>
</li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>
The issue that I have is that the transition property doesn't work well with height in CSS. Is there a problem that I didn't noticed, and is there a quick fix to it?


So the problem is that you try to transition the height to 100% - but CSS can't handle that right away.
Fast but problematic solution:
You could set the height in the :hover to a fixed amount, e.g. 100px.
But if you want to have a new item in there or change the size of the items, you would have to adjust the height manually.
What I would do:
First I would restructure the HTML a bit and move the trigger out of the item list:
<nav>
<button class="trigger">
<i class="fas fa-bars"></i>
</button>
<ul class="icons fas-container">
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
Then I would adjust the CSS of the .icons:
(remove the height, add a max-height and adjust the transition)
nav ul.icons {
background: #fff;
width: 60px;
overflow: hidden;
border-radius: 60px;
max-height: 0;
transition: max-height 0.2s ease-out;
}
In the end I would let JavaScript take care of getting the max-height right.
On hover:
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
icons.style.maxHeight = null;
}
Or on click (if you would rather do that):
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onclick = function() {
if (icons.style.maxHeight){
icons.style.maxHeight = null;
} else {
icons.style.maxHeight = icons.scrollHeight + "px";
}
}
Here are some (maybe) helpfull links:
https://www.w3schools.com/howto/howto_js_collapsible.asp
How can I transition height: 0; to height: auto; using CSS?
https://codepen.io/felipefialho/pen/ICkwe
Snippet:
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
icons.style.maxHeight = null;
}
body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
overflow: hidden;
border-radius: 60px;
max-height: 0;
transition: max-height 0.2s ease-out;
}
nav ul.icons:hover {
height: 100%;
}
nav ul li {
list-style: none;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<button class="trigger">
<i class="fas fa-bars"></i>
</button>
<ul class="icons fas-container">
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>


The CSS transition of the "height" property works only if both values ​​(starting and ending) are specified.
You can get around this by using "max-height" instead of "height". This way you can safely exceed the exact height that the element should have at the end of the transition.
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
let labels = document.querySelector('.labels');
btn.onclick = function() {
icons.classList.toggle('active');
labels.classList.toggle('active');
}
body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
max-height: 60px;
overflow: hidden;
border-radius: 60px;
transition: max-height 1s ease;
}
nav ul.icons:hover {
max-height: 120px;
}
nav ul li {
list-style: none;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<ul class="icons">
<li class="trigger">
<i class="fas fa-bars"></i>
</li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>
The only side effect could be too much delay in the return transition if you set a final value that is too high compared to what is needed.


Just a very basic snippet of what you wanted to create on the first place.
[NOTE] : Transition is quite/bit cranky (not smooth). But it is what it is.
document.querySelector('.menu').addEventListener('click', (e) => {
document.querySelector('ul.icons').classList.toggle('active');
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.navbar {
position: relative;
width: 100%;
height: 100px;
display: flex;
padding: 0 4rem;
align-items: center;
justify-content: flex-end;
background-color: #f7f8f9;
border-bottom: 1px solid #c1c1c1;
}
.navbar .menu i {
cursor: pointer;
font-size: 2rem;
}
.navbar .icons {
opacity: 0;
list-style: none;
position: absolute;
top: calc(100% + 2px);
right: 3rem;
display: flex;
flex-direction: column;
transition: opacity 250ms ease;
}
.navbar .icons .icon {
display: grid;
padding: 1rem;
flex-shrink: 0;
min-width: 30px;
min-height: 30px;
border-radius: 50%;
place-items: center;
background-color: #f7f8f9;
border: 1px solid #c1c1c1;
transition: margin-top 250ms ease;
}
.navbar .icons .icon:not(:first-of-type) {
margin-top: 1rem;
}
.navbar .icons .icon:nth-child(2) {
margin-top: -62px;
}
.navbar .icons .icon:nth-child(3) {
margin-top: -62px;
}
.navbar .icons .icon:nth-child(4) {
margin-top: -62px;
}
.navbar .icons .icon:nth-child(5) {
margin-top: -62px;
}
.navbar .icons.active {
opacity: 1;
}
.navbar .icons.active .icon {
margin-top: 1rem;
}
.navbar .icons.active .icon:nth-child(1) {
margin-top: 0;
transition-delay: 250ms;
}
.navbar .icons.active .icon:nth-child(2) {
transition-delay: 250ms;
}
.navbar .icons.active .icon:nth-child(2) {
transition-delay: 500ms;
}
.navbar .icons.active .icon:nth-child(3) {
transition-delay: 750ms;
}
.navbar .icons.active .icon:nth-child(4) {
transition-delay: 1s;
}
.navbar .icons.active .icon:nth-child(5) {
transition-delay: 1.25s;
}
.bx {
font-size: 1.75rem;
}
<link href='https://unpkg.com/boxicons#2.0.9/css/boxicons.min.css' rel='stylesheet'>
<nav class="navbar">
<div class="menu" role="button">
<i class='bx bx-menu'></i>
</div>
<ul class="icons">
<li class="icon">
<i class='bx bx-home-alt'></i>
</li>
<li class="icon">
<i class='bx bx-user'></i>
</li>
<li class="icon">
<i class='bx bx-bell'></i>
</li>
<li class="icon">
<i class='bx bx-pen'></i>
</li>
<li class="icon">
<i class='bx bx-phone'></i>
</li>
</ul>
</nav>
If anyone can make this transition a bit more smooth edit this answer.

Related

Stop context menu from getting cut in the right of the page

I Have a context menu that gets cut when I right-click in the right portion of the page as shown here:
The menu is getting cut at the edge of the page, so I want the menu to move to the other side of the cursor like they do in Chrome or other popular apps.
I tried visiting other pages in StackOverflow and trying some demos, but they all say about the same thing shown above.
I also tried commenting on some other posts, seeing if they will answer, but still nothing.
Update
Code:
var menu = document.querySelector('.menu');
function showMenu(x, y) {
menu.style.left = x + 'px';
menu.style.top = y + 'px';
menu.classList.add('menu-show');
}
function hideMenu() {
menu.classList.remove('menu-show');
}
function onContextMenu(e) {
e.preventDefault();
showMenu(e.pageX, e.pageY);
document.addEventListener('mousedown', onMouseDown, false);
}
function onMouseDown(e) {
hideMenu();
document.removeEventListener('mousedown', onMouseDown);
}
document.addEventListener('contextmenu', onContextMenu, false);
/* Page */
html {
width: 100%;
height: 100%;
background: radial-gradient(circle, #fff 0%, #a6b9c1 100%) no-repeat;
}
.container {
position: absolute;
top: 20%;
left: 0;
width: 100%;
margin: auto;
text-align: center;
}
h1,
h2 {
color: #555;
}
/* Menu */
.menu {
position: absolute;
width: 200px;
padding: 2px;
margin: 0;
border: 1px solid #bbb;
background: #eee;
background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
z-index: 100;
border-radius: 3px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
opacity: 0;
transform: translate(0, 15px) scale(.95);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.menu-item {
display: block;
position: relative;
margin: 0;
padding: 0;
white-space: nowrap;
}
.menu-btn {
display: block;
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 13px;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 8px;
border-radius: 3px;
}
button.menu-btn {
background: none;
line-height: normal;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
width: 100%;
text-align: left;
}
a.menu-btn {
outline: 0 none;
text-decoration: none;
}
.menu-text {
margin-left: 25px;
}
.menu-btn .fa {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
}
.menu-item:hover>.menu-btn {
color: #fff;
outline: none;
background-color: #2E3940;
background: linear-gradient(to bottom, #5D6D79, #2E3940);
border: 1px solid #2E3940;
}
.menu-item-disabled {
opacity: .5;
pointer-events: none;
}
.menu-item-disabled .menu-btn {
cursor: default;
}
.menu-separator {
display: block;
margin: 7px 5px;
height: 1px;
border-bottom: 1px solid #fff;
background-color: #aaa;
}
.menu-item-submenu::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: #808080;
}
.menu-item-submenu:hover::after {
border-left-color: #fff;
}
.menu .menu {
top: 4px;
left: 99%;
}
.menu-show,
.menu-item:hover>.menu {
opacity: 1;
transform: translate(0, 0) scale(1);
pointer-events: auto;
}
.menu-item:hover>.menu {
transition-delay: 300ms;
}
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-btn">
<i class="fa fa-folder-open"></i>
<span class="menu-text">Open</span>
</a>
</li>
<li class="menu-item menu-item-disabled">
<button type="button" class="menu-btn">
<span class="menu-text">Open in New Window</span>
</button>
</li>
<li class="menu-separator"></li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-reply"></i>
<span class="menu-text">Reply</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-star"></i>
<span class="menu-text">Favorite</span>
</button>
</li>
<li class="menu-item menu-item-submenu">
<button type="button" class="menu-btn">
<i class="fa fa-users"></i>
<span class="menu-text">Social</span>
</button>
<ul class="menu">
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-comment"></i>
<span class="menu-text">Comment</span>
</button>
</li>
<li class="menu-item menu-item-submenu">
<button type="button" class="menu-btn">
<i class="fa fa-share"></i>
<span class="menu-text">Share</span>
</button>
<ul class="menu">
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-twitter"></i>
<span class="menu-text">Twitter</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-facebook-official"></i>
<span class="menu-text">Facebook</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-google-plus"></i>
<span class="menu-text">Google Plus</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-envelope"></i>
<span class="menu-text">Email</span>
</button>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-separator"></li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-download"></i>
<span class="menu-text">Save</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-edit"></i>
<span class="menu-text">Rename</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-trash"></i>
<span class="menu-text">Delete</span>
</button>
</li>
</ul>
<div class="container">
<h1>Context Menu</h1>
<h2>(right-click anywhere)</h2>
</div>

This should be possible with a simple comparison. Where you set the position of the context menu (menu.style.left = e.pageX + "px";) you can instead check if it will fit:
var contextMenuWidth = 250;
var contextSubMenuWidth = 250;
var leftPos = ''
if (e.pageX < window.innerWidth - contextMenuWidth) {
leftPos = `${e.pageX}px`;
} else {
leftPos = `${e.pageX - contextMenuWidth}px`;
}
if (e.pageX < window.innerWidth - contextMenuWidth - contextSubMenuWidth) {
menu.classList.remove("sub-left");
} else {
menu.classList.add("sub-left");
}
menu.style.left = leftPos;
This is checking if the cursor position (e.pageX) is within the context menus width (contextMenuWidth) distance of the right side of the screen (window.innerWidth). If so, we set the left position to the current cursor position minus the width.
We also use this if statement to add a class to the menu based on it's position, to modify the position of the sub-menu.
.sub-left .menu-sub-list {
left: -100%;
right: 0;
}
This also uses template literals for your CSS strings, effectively replacing numberVariable + "px" with:
`${numberVariable}px`
since using the + operator for string concatenation is best avoided where possible.
This is applied in this example with a hard coded context menu width, I would suggest using a variable and storing it somewhere relevant:
document.onclick = hideMenu;
document.oncontextmenu = rightClick;
function hideMenu() {
document.getElementById("contextMenu").style.display = "none";
}
function rightClick(e) {
e.preventDefault();
var contextMenuWidth = 250;
var contextSubMenuWidth = 250;
var menu = document.getElementById("contextMenu")
menu.style.display = 'block';
var leftPos = ''
if (e.pageX < window.innerWidth - contextMenuWidth) {
leftPos = `${e.pageX}px`;
} else {
leftPos = `${e.pageX - contextMenuWidth}px`;
}
if (e.pageX < window.innerWidth - contextMenuWidth - contextSubMenuWidth) {
menu.classList.remove("sub-left");
} else {
menu.classList.add("sub-left");
}
menu.style.left = leftPos;
menu.style.top = e.pageY + "px";
}
feather.replace()
*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
--color-bg-primary: #d0d6df;
--color-bg-primary-offset: #f1f3f7;
--color-bg-secondary: #fff;
--color-text-primary: #3a3c42;
--color-text-primary-offset: #898c94;
--color-orange: #dc9960;
--color-green: #1eb8b1;
--color-purple: #657cc4;
--color-black: var(--color-text-primary);
--color-red: #d92027;
}
body {
font-family: "Inter", sans-serif;
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
}
.menu {
background-color: var(--color-bg-secondary);
border-radius: 10px;
box-shadow: 0 10px 20px #40404015;
}
.menu-list {
margin: 0;
display: block;
width: 100%;
padding: 8px;
}
.menu-list+.menu-list {
border-top: 1px solid #ddd;
}
.menu-sub-list:hover {
display: flex;
}
.menu-sub-list {
display: none;
padding: 8px;
background-color: var(--color-bg-secondary);
border-radius: 10px;
box-shadow: 0 10px 20px rgba(#404040, 0.15);
position: absolute;
left: 100%;
right: 0;
z-index: 100;
width: 100%;
top: 0;
flex-direction: column;
}
.sub-left .menu-sub-list {
left: -100%;
right: 0;
}
.menu-item {
position: relative;
}
.menu-button:hover {
background-color: var(--color-bg-primary-offset);
}
.menu-button:hover+.menu-sub-list {
display: flex;
}
.menu-button:hover svg {
stroke: var(--color-text-primary);
}
.menu-button {
font: inherit;
border: 0;
padding: 8px 8px;
padding-right: 36px;
width: 100%;
border-radius: 8px;
display: flex;
align-items: center;
position: relative;
background-color: var(--color-bg-secondary);
}
.menu-button--delete:hover {
color: var(--color-red);
}
svg:first-of-type {
stroke: var(--color-red);
}
.menu-button--orange svg:first-of-type {
stroke: var(--color-orange);
}
.menu-button--green svg:first-of-type {
stroke: var(--color-green);
}
.menu-button--purple svg:first-of-type {
stroke: var(--color-purple);
}
.menu-button--blacksvg:first-of-type {
stroke: var(--color-black);
}
.menu-button--checked svg:nth-of-type(2) {
stroke: var(--color-purple);
}
.menu-button svg {
width: 20px;
height: 20px;
margin-right: 10px;
stroke: var(--color-text-primary-offset);
}
.menu-button:nth-of-type(2) {
margin-right: 0;
position: absolute;
right: 8px;
}
.container {
position: absolute;
width: 250px;
display: flex;
align-items: center;
justify-content: center;
}
ul {
list-style: none;
}
<div class="context-menu">
<div class="container" id="contextMenu" style="display:none">
<!-- code here -->
<div class="menu">
<ul class="menu-list">
<li class="menu-item"><button class="menu-button"><i
data-feather="corner-up-right"></i>Share</button></li>
<li class="menu-item"><button class="menu-button"><i data-feather="edit-2"></i>Rename</button></li>
</ul>
<ul class="menu-list">
<li class="menu-item"><button class="menu-button menu-button--black"><i data-feather="circle"></i>No
status<i data-feather="chevron-right"></i></button>
<ul class="menu-sub-list">
<li class="menu-item"><button class="menu-button menu-button--orange"><i
data-feather="square"></i>Needs review</button></li>
<li class="menu-item"><button class="menu-button menu-button--purple"><i
data-feather="octagon"></i>In progress</button></li>
<li class="menu-item"><button class="menu-button menu-button--green"><i
data-feather="triangle"></i>Approved</button></li>
<li class="menu-item"><button class="menu-button menu-button--black menu-button--checked"><i
data-feather="circle"></i>No status<i data-feather="check"></i></button></li>
</ul>
</li>
<li class="menu-item"><button class="menu-button"><i data-feather="link"></i>Copy Link
Address</button></li>
<li class="menu-item"><button class="menu-button"><i data-feather="folder-plus"></i>Move to</button>
</li>
<li class="menu-item"><button class="menu-button"><i data-feather="copy"></i>Copy to</button></li>
<li class="menu-item"><button class="menu-button"><i data-feather="lock"></i>Make Private</button>
</li>
<li class="menu-item"><button class="menu-button"><i data-feather="download"></i>Download</button>
</li>
</ul>
<ul class="menu-list">
<li class="menu-item"><button class="menu-button menu-button--delete"><i
data-feather="trash-2"></i>Delete</button></li>
</ul>
</div>
</div>
</div>
<script src="https://unpkg.com/feather-icons"></script>

CSS Alignment Issue on Navigation Bar

I'm currently creating a navigation bar that expands and collapses whether the mouse is over or out of the navbar. My issue is that when the navbar is expanded, my icons are aligned to the center but I wish for them to be positioned exactly where they are before the navbar is expanded. I have them aligned to the center because the icons are not the same size and look 'out of place' without it, when the navbar is collapsed.
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
sidenav.style.width = "280px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
//document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
.expand {
transform: rotate(180deg);
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: center;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
And JSFiddle link:
https://jsfiddle.net/h86zf4d3/
I tried to float my icons to the left as you can see from the commented out JS code, however, for some reason, this gets rid of the block display for the list items.

To make it works, change the #links{text-align:left}
And your issue about the icon's size put the fa-fw class. it will makeall the icons the same size.
Check the snippest below:
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
sidenav.style.width = "280px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
//document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
.expand {
transform: rotate(180deg);
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: left;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-fw fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>

why not just placing them to left ?
#links li{
text-align:left;
}

I've simpy added float: left to the CSS for #links and it looks fine to me.
They are still center-aligned on the collapsed version, because I haven't removed the line directly above it which says text-align: center;. However, they no longer change position when the menu opens.
See the snippet below:
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
sidenav.style.width = "280px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
};
sidenav.onmouseout = function() {
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
.expand {
transform: rotate(180deg);
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: center;
float: left;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>

Just remove the text-align: center rule on #links element. Also I edited your css to add some :hover rules to avoid using javascript:
#sidenav {
height: 100%;
min-width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav:hover {
width: 280px;
}
#sidenav:hover #expand-icon {
transform: rotate(180deg);
}
#sidenav:hover #sidenav-heading {
display: inline-block;
}
#sidenav #sidenav-heading {
display: none;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
}
#links li {
padding: 18px 20px;
/* <-- Add some padding*/
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading">
<h2>Expanded</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>

Accordion menu is not clickable

the menu is showing correctly, but it is not clickable(can't open the item to show the sub items), I'm new to javascript so not sure if the javascript is correct.
I also added a link for the font-awesome style sheet and used it to get the icons for the menu.
is this the best way to do the menu, or can I do it without javascript
$(document).ready(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var dropdownlink = this.el.find(".dropdownlink");
dropdownlink.on(
"click", {
el: this.el,
multiple: this.multiple
},
this.dropdown
);
};
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el,
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass("open");
if (!e.data.multiple) {
$el
.find(".submenuItems")
.not($next)
.slideUp()
.parent()
.removeClass("open");
}
};
var accordion = new Accordion($(".accordion-menu"), false);
});
ul {
list-style: none;
}
a {
text-decoration: none;
}
.accordion-menu {
width: 100%;
max-width: 350px;
margin: 60px auto 20px;
background: #fff;
border-radius: 4px;
}
.accordion-menu li.open .dropdownlink {
color: #CDDC39;
}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-menu li:last-child .dropdownlink {
border-bottom: 0;
}
.dropdownlink {
cursor: pointer;
display: block;
padding: 15px 15px 15px 45px;
font-size: 18px;
border-bottom: 1px solid #ccc;
color: #212121;
position: relative;
transition: all 0.4s ease-out;
}
.dropdownlink i {
position: absolute;
top: 17px;
left: 16px;
}
.dropdownlink .fa-chevron-down {
right: 12px;
left: auto;
}
.submenuItems {
display: none;
background: #C8E6C9;
}
.submenuItems li {
border-bottom: 1px solid #B6B6B6;
}
.submenuItems a {
display: block;
color: #727272;
padding: 12px 12px 12px 45px;
transition: all 0.4s ease-out;
}
.submenuItems a:hover {
background-color: #CDDC39;
color: #fff;
}
<div>
<ul class="accordion-menu">
<li>
<div class="dropdownlink"><i class="fa fa-user" aria-hidden="true">
</i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Personal1</li>
<li>Personal2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-paper-plane" aria- hidden="true"></i> Leave
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Leave1</li>
<li>Leave2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="far fa-sun" aria-hidden="true">
</i> Configuration
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Configuration1</li>
<li>Configuration</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-receipt" aria- hidden="true"></i> Report
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Report1</li>
<li>Report2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-align-justify" aria- hidden="true"></i> Attendance
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Attendance1</li>
<li>Attendance2</li>
</ul>
</li>
</ul>

Include jquery in head tag and Keep your script tag at the end of the html to ensure that it runs after html is loaded.
ul {
list-style: none;
}
a {
text-decoration: none;
}
.accordion-menu {
width: 100%;
max-width: 350px;
margin: 60px auto 20px;
background: #fff;
border-radius: 4px;
}
.accordion-menu li.open .dropdownlink {
color: #CDDC39;
}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-menu li:last-child .dropdownlink {
border-bottom: 0;
}
.dropdownlink {
cursor: pointer;
display: block;
padding: 15px 15px 15px 45px;
font-size: 18px;
border-bottom: 1px solid #ccc;
color: #212121;
position: relative;
transition: all 0.4s ease-out;
}
.dropdownlink i {
position: absolute;
top: 17px;
left: 16px;
}
.dropdownlink .fa-chevron-down {
right: 12px;
left: auto;
}
.submenuItems {
display: none;
background: #C8E6C9;
}
.submenuItems li {
border-bottom: 1px solid #B6B6B6;
}
.submenuItems a {
display: block;
color: #727272;
padding: 12px 12px 12px 45px;
transition: all 0.4s ease-out;
}
.submenuItems a:hover {
background-color: #CDDC39;
color: #fff;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="accordion-menu">
<li>
<div class="dropdownlink"><i class="fa fa-user" aria-hidden="true">
</i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Personal1</li>
<li>Personal2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-paper-plane" aria-
hidden="true"></i> Leave
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Leave1</li>
<li>Leave2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="far fa-sun" aria-hidden="true">
</i> Configuration
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Configuration1</li>
<li>Configuration</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-receipt" aria-
hidden="true"></i> Report
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Report1</li>
<li>Report2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-align-justify" aria-
hidden="true"></i> Attendance
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Attendance1</li>
<li>Attendance2</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var Accordion = function (el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var dropdownlink = this.el.find(".dropdownlink");
dropdownlink.on(
"click",
{ el: this.el, multiple: this.multiple },
this.dropdown
);
};
Accordion.prototype.dropdown = function (e) {
var $el = e.data.el,
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass("open");
if (!e.data.multiple) {
$el
.find(".submenuItems")
.not($next)
.slideUp()
.parent()
.removeClass("open");
}
};
var accordion = new Accordion($(".accordion-menu"), false);
});
</script>

Make a html content appear over a web page when an event happens

How do I make html content appear over the entire web page that says something like 'Hey! You've won' but the background of this content should be translucent showing the actual webPage behind?
I have designed a webPage called Memory Game, that allows a user to match its contents by unfliping the deck contents and I wanted the 'Congratulations' message to be printed over it when the user has finished matching all of it. Below is my code:
$(document).ready(function() {
var click = 1,totalClicks = 0, className1 = '',className2 = '',firstClick='',secondClick='',match=0;
$(".moves").html(totalClicks);
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
$(".card").click(function() {
if (!$(this).hasClass("open")) {
totalClicks++;
$(".moves").html(totalClicks);
if (click === 1) {
$(this).addClass("open show");
$(this).attr('id', 'card1');
className1 = $(this).children().attr('class');
firstClick=$(this);
} else if (click === 2) {
$(this).addClass("open show");
className2 = $(this).children().attr('class');
if(className1===className2)
{
match++;
$(this).unbind("click");
firstClick.unbind("click");
}
unflip();
}
if (click === 1) {
click++;
} else {
click = 1;
}
}
else{
$(this).removeClass("open");
$(this).removeClass("show");
}
});
$(".restart").click(function() {
totalClicks = 0;
$(".moves").html(totalClicks);
$("ul.deck>li").removeClass("open");
$("ul.deck>li").removeClass("show");
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
});
if(match===8)
{
/* This is where the 'Congragulations message must be show over the web page' */
}
function unflip() {
if (className1 !== className2) {
setTimeout(removeClasses, 1000);
function removeClasses() {
$("ul.deck>li").removeClass("open");
$("ul.deck>li").removeClass("show");
}
}
}
});
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.fa.fa-star,.fa.fa-repeat{
font-size: 25px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Memory Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<header>
<h1>Memory Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves"></span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>

Figured out the solution. A different section must be added in the html whose display must be set to none.
The display can be toggled using jQuery. Below is the solution. Added a new section with class overlay, whose display is set to none it is then toggled in the java script:
$(document).ready(function() {
var click = 1,totalClicks = 0, className1 = '',className2 = '',firstClick='',secondClick='',match=0;
shuffle();
$(".moves").html(totalClicks);
$(".card").click(function() {
if (!$(this).hasClass("open")) {
totalClicks++;
$(".moves").html(totalClicks);
if (click === 1) {
$(this).addClass("open show");
/* $(this).attr('id', 'card1'); */
className1 = $(this).children().attr('class');
firstClick=$(this);
} else if (click === 2) {
$(this).addClass("open show");
className2 = $(this).children().attr('class');
secondClick=$(this);
if(className1===className2)
{
match++;
console.log(match);
secondClick.unbind("click");
firstClick.unbind("click");
firstClick.addClass("match");
secondClick.addClass("match");
}
if(match===1)
{
console.log('match is now 8');
/*document.getElementById("overlay").style.display="block";*/
$("#overlay").css("display","block");
$(".text").hide().html('Yaay!! You\'ve Won!!!!').fadeIn('slow');
}
unflip();
}
if (click === 1) {
click++;
} else {
click = 1;
}
}
else{
click=1;
$(this).removeClass("open");
$(this).removeClass("show");
}
});
$(".restart").click(function() {
$(this).children().addClass('refresh').delay(200).queue(function(next){
$(this).removeClass('refresh');
next();
});
totalClicks = 0;
$(".moves").html(totalClicks);
$("ul.deck>li").removeClass("open");
$("ul.deck>li").removeClass("show");
$("ul.deck>li").removeClass("match");
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
});
$(".restart-overlay").click(function(){
$("#overlay").css("display","none");
totalClicks = 0;
$(".moves").html(totalClicks);
$("ul.deck>li").removeClass("open show match");
shuffle();
});
function unflip() {
if (className1 !== className2) {
setTimeout(removeClasses, 1000);
}
}
function removeClasses() {
firstClick.removeClass("open");
firstClick.removeClass("show");
secondClick.removeClass("open");
secondClick.removeClass("show");
}
function shuffle(){
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
}
});
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.fa.fa-star-o{
font-size: 28px;
}
.fa.fa-repeat{
font-size: 25px;
}
.refresh{
text-shadow:3px 3px 3px #272634;
}
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.text{
font-size: 60px;
color: yellow;
font-family:fantasy;
font-style: italic;
font-weight: bold;
position: absolute;
top: 50%;
left: 35%;
height: 30%;
width: 50%;
}
#overlay{
height: 100%;
width:100%;
}
.restart-overlay{
position: absolute;
top: 65%;
left: 50%;
height: 50%;
width: 50%;
}
.fa.fa-repeat.playagain{
font-color: grey;
font-size: 35px;
text-shadow:3px 3px 3px #272634;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Memory Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="overlay">
<section class="text"></section>
<section class="restart-overlay">
<i class="fa fa-repeat playagain"></i>
</section>
</section>
<section class="container">
<header>
<h1>Memory Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
</ul>
<span class="moves"></span> Moves
<section class="restart">
<i class="fa fa-repeat"></i>
</section>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</section>
<script src="js/app.js"></script>
</body>
</html>

aref links opening in new window

I am trying to create webpage with menus and each menu item is separate html page. While clicking the menu items they open up in the separate page(hiding the menu) which don't want as the user should be able to click on other menu they should open up in same page with menu item being displayed all time. I tried several thing but cant establish it.
Below is the html :
<DOCTYPE html>
<html>
<head>
<title>gurukul_admin</title>
<link rel="stylesheet" href="gurukul_admin.css">
<link rel="stylesheet" href="iframe.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<iframe width = "1120" class = "iframe" height = "900" style="float:right" name="admission"></iframe>
</head>
<body>
<div class="left-menu">
<div class="logo"><i class="fa fa-align-justify"></i>
<div>Pure CSS Accordion Nav</div>
</div>
<div class="accordion">
<div class="section">
<input type="radio" name="accordion-1" id="section-1" checked="checked"/>
<label for="section-1"><span>Dashboard</span></label>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-2" value="toggle"/>
<label for="section-2"><span>Admissions</span></label>
<div class="content">
<ul>
<li><i class="fa fa-inbox"></i><span>Application Decision</span></li>
<li><i class="fa fa-share"></i><span>Enrol/Reject</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-3" value="toggle"/>
<label for="section-3"> <span>Enrolment</span></label>
<div class="content">
<ul>
<li><i class="fa fa-cog"></i><span>Section Allocation</span></li>
<li><i class="fa fa-group"></i><span>Change Section</span></li>
<li><i class="fa fa-sitemap"></i><span>Exam Allocation</span></li>
<li><i class="fa fa-sitemap"></i><span>Fee Allocation</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-4" value="toggle"/>
<label for="section-4"> <span>Administration</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span><a target="_self" href="acadmgmt.html" >Academic Year</a></span></li>
<li><i class="fa fa-coffee"></i><span>Class Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Section Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Subject Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Fee Category/Codes</span></li>
<li><i class="fa fa-coffee"></i><span>Assessment Codes</span></li>
<li><i class="fa fa-coffee"></i><span>System Users</span></li>
</ul>
</div>
</div>
<div class="section">
<input type="radio" name="accordion-1" id="section-5" value="toggle"/>
<label for="section-5"> <span>Staff Management</span></label>
<div class="content">
<ul>
<li><i class="fa fa-coffee"></i><span>Add New Staff</span></li>
<li><i class="fa fa-coffee"></i><span>Class Codes</span></li>
</div>
</div>
</div>
</div>
</body>
</html>
Below is css
#import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
#import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css);
.accordion {
color: #FFF;
width: 100%;
}
.accordion .section {
width: 100%;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked + label {
background: #363636;
}
.accordion .section input[type='radio']:checked + label:before {
content: " ";
position: absolute;
border-left: 3px solid #21CCFC;
height: 100%;
left: 0;
}
.accordion .section input[type='radio']:checked ~ .content {
max-height: 300px;
opacity: 1;
z-index: 10;
overflow-y: auto;
}
.accordion .section label {
position: relative;
cursor: pointer;
padding: 10px 20px;
display: table;
background: #222;
width: 100%;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.accordion .section label:before {
content: " ";
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 1px;
border-top: 1px solid #363636;
}
.accordion .section label:hover {
background: #363636;
}
.accordion .section label span {
display: table-cell;
vertical-align: middle;
}
.accordion .section:last-of-type {
border-bottom: 1px solid #363636;
}
.accordion .section .content {
max-height: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
opacity: 0;
position: relative;
overflow-y: hidden;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #1ABC9C;
font-family: 'Quicksand', sans-serif;
}
.left-menu {
background: #222;
width: 210px;
position: absolute;
top: 0;
bottom: 0;
}
.accordion {
font-size: 14px;
}
.accordion .section .content {
padding: 0 15px;
}
.accordion .section input[type='radio'] {
display: none;
}
.accordion .section input[type='radio']:checked ~ .content {
padding: 15px;
}
ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding: 10px;
}
ul li i {
font-size: 13px;
width: 15px;
margin-right: 15px;
}
ul li:hover {
cursor: pointer;
}
ul li:hover i {
color: #21CCFC;
}
.logo {
padding: 30px 10px;
width: 200px;
text-align: center;
color: #FFF;
font-size: 20px;
}
.logo i {
font-size: 70px;
color: #21CCFC;
}
I tried with iframe but alignment changes on different screen size it looks horrible *
Iframe css
iframe {
margin-top: 0px;
margin-bottom: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 1px;
border-radius: 1px;
border: none;
background-color:#1ABC9C;
scrolling="no";
}
a:link, a:visited {
background-color: #363636;
color: white;
text-decoration: none;
}
a:hover, a:active {
background-color: #363636;
color: white;
text-decoration: none;
}

Not sure how familiar you with JQuery, but this might be helpful:
I would write a script, that would change the iframe src value to the corresponding url of the page on click.
In your case it would look something like this:
script.js
$("a").click(function(event, target){
event.preventDefault();
console.log(event.target);
$("#myiframe").attr("src", $(event.target).attr("href"));
});
Instead of a you can assign classes to the links in your menu, and put them in the code instead of "a".
In your index.html
<div>
<iframe src="anyurl.com" id="myiframe"></iframe>
</div>
It is important that you provide an id to your iframe to call it properly from the script.
Delete target attribute from your menu links, as they are not necessary anymore.

After lot of deliberation and hits and misses I eventually found out that I had to position my iframe under and position it accordingly

Categories

Resources