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>
Related
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.
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>
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>
Hi I am new to vanilla JavaScript and trying to get a good understanding of it. I've created a multiple drop down menu navigation where the menus are triggered by a click event when the drop down buttons are clicked, a .show CSS class with the display property of block is added to the drop menu. The problem I'm having is that when I have one menu open and I click on another drop menu button, I want the current/all other menus to close. I'm not sure quite how I would achieve this. Any help is greatly appreciated, thanks.
Here is the JS:
(function() {
var dropBtns = document.querySelectorAll('.dropdown');
dropBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
var dropContent = btn.querySelector('.dropMenu');
e.preventDefault();
if (!dropContent.classList.contains('show')) {
dropContent.classList.add('show');
} else {
dropContent.classList.remove('show');
}
e.stopPropagation();
});
});
// close menus when clicking outside of them
window.addEventListener('click', function(event) {
if (event.target != dropBtns) {
openMenus = document.querySelectorAll('.dropMenu');
openMenus.forEach(function(menus) {
menus.classList.remove('show');
});
}
});
})();
Here is the CSS:
.room-sort {
background: #434A54;
margin: 0;
padding: 0;
text-align: center;
}
.room-sort-menu ul {
margin: 0;
padding: 0;
}
span.sort {
margin-right: 30px;
color: #fff;
font-weight: 500;
}
.sort-mobile {
display: none;
}
.room-sort-menu>li {
display: inline-block;
color: #fff;
}
.room-sort-menu>li>a {
display: inline-block;
padding: 16px 30px;
margin: 0;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}
.room-sort-menu>li>a:hover,
.room-sort-menu>li>a:focus {
background: #2e333a;
}
.dropdown {
position: relative;
}
.dropMenu {
position: absolute;
display: none;
top: 46px;
left: 0px;
border: 1px solid color;
width: 109px;
background: #CB242D;
font-size: 0.8em;
z-index: 1;
}
.show {
display: block;
}
.room-sort-menu li:last-of-type ul.dropMenu {
width: 166px;
}
.dropMenu li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
.dropMenu li a:hover {
background: #a0080d;
}
Here is the HTML:
<div class="room-sort">
<ul class="room-sort-menu">
<span class="sort">Sort by :</span>
<li class="dropdown"><a class="dropBtn" href="#">Price <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Price (hi to low)</li>
<li>Price (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Stars <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Stars (hi to low)</li>
<li>Stars (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Review score <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Score (hi to low)</li>
<li>Score (low to hi)</li>
</ul>
</li>
</ul>
</div>
You were almost there, just moved the code around a bit and it works as intended.
(function() {
var dropBtns = document.querySelectorAll('.dropdown');
function closeOpenItems() {
openMenus = document.querySelectorAll('.dropMenu');
openMenus.forEach(function(menus) {
menus.classList.remove('show');
});
}
dropBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
var
dropContent = btn.querySelector('.dropMenu'),
shouldOpen = !dropContent.classList.contains('show');
e.preventDefault();
// First close all open items.
closeOpenItems();
// Check if the clicked item should be opened. It is already closed at this point so no further action is required if it should be closed.
if (shouldOpen) {
// Open the clicked item.
dropContent.classList.add('show');
}
e.stopPropagation();
});
});
// close menus when clicking outside of them
window.addEventListener('click', function(event) {
if (event.target != dropBtns) {
// Moved the code here to its own function.
closeOpenItems();
}
});
})();
.room-sort {
background: #434A54;
margin: 0;
padding: 0;
text-align: center;
}
.room-sort-menu ul {
margin: 0;
padding: 0;
}
span.sort {
margin-right: 30px;
color: #fff;
font-weight: 500;
}
.sort-mobile {
display: none;
}
.room-sort-menu>li {
display: inline-block;
color: #fff;
}
.room-sort-menu>li>a {
display: inline-block;
padding: 16px 30px;
margin: 0;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}
.room-sort-menu>li>a:hover,
.room-sort-menu>li>a:focus {
background: #2e333a;
}
.dropdown {
position: relative;
}
.dropMenu {
position: absolute;
display: none;
top: 46px;
left: 0px;
border: 1px solid color;
width: 109px;
background: #CB242D;
font-size: 0.8em;
z-index: 1;
}
.show {
display: block;
}
.room-sort-menu li:last-of-type ul.dropMenu {
width: 166px;
}
.dropMenu li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
.dropMenu li a:hover {
background: #a0080d;
}
<div class="room-sort">
<ul class="room-sort-menu">
<span class="sort">Sort by :</span>
<li class="dropdown"><a class="dropBtn" href="#">Price <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Price (hi to low)</li>
<li>Price (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Stars <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Stars (hi to low)</li>
<li>Stars (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Review score <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Score (hi to low)</li>
<li>Score (low to hi)</li>
</ul>
</li>
</ul>
</div>
When I click the Price (hi to low) no work
(function() {
var dropBtns = document.querySelectorAll('.dropdown');
function closeOpenItems() {
openMenus = document.querySelectorAll('.dropMenu');
openMenus.forEach(function(menus) {
menus.classList.remove('show');
});
}
dropBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
var
dropContent = btn.querySelector('.dropMenu'),
shouldOpen = !dropContent.classList.contains('show');
e.preventDefault();
// First close all open items.
closeOpenItems();
// Check if the clicked item should be opened. It is already closed at this point so no further action is required if it should be closed.
if (shouldOpen) {
// Open the clicked item.
dropContent.classList.add('show');
}
e.stopPropagation();
});
});
// close menus when clicking outside of them
window.addEventListener('click', function(event) {
if (event.target != dropBtns) {
// Moved the code here to its own function.
closeOpenItems();
}
});
})();
.room-sort {
background: #434A54;
margin: 0;
padding: 0;
text-align: center;
}
.room-sort-menu ul {
margin: 0;
padding: 0;
}
span.sort {
margin-right: 30px;
color: #fff;
font-weight: 500;
}
.sort-mobile {
display: none;
}
.room-sort-menu>li {
display: inline-block;
color: #fff;
}
.room-sort-menu>li>a {
display: inline-block;
padding: 16px 30px;
margin: 0;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}
.room-sort-menu>li>a:hover,
.room-sort-menu>li>a:focus {
background: #2e333a;
}
.dropdown {
position: relative;
}
.dropMenu {
position: absolute;
display: none;
top: 46px;
left: 0px;
border: 1px solid color;
width: 109px;
background: #CB242D;
font-size: 0.8em;
z-index: 1;
}
.show {
display: block;
}
.room-sort-menu li:last-of-type ul.dropMenu {
width: 166px;
}
.dropMenu li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
.dropMenu li a:hover {
background: #a0080d;
}
<div class="room-sort">
<ul class="room-sort-menu">
<span class="sort">Sort by :</span>
<li class="dropdown"><a class="dropBtn" href="#">Price <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Price (hi to low)</li>
<li>Price (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Stars <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Stars (hi to low)</li>
<li>Stars (low to hi)</li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Review score <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li>Score (hi to low)</li>
<li>Score (low to hi)</li>
</ul>
</li>
</ul>
</div>
Here is my code of side-bar:
<div class="span1">
<!-- start: Main Menu -->
<div id="sidebar-nav">
<ul id="dashboard-menu">
<li >
<a href="/amain">
<i class="fa fa-home fa-fw"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-signal"></i>
<span>Charts</span>
</a>
</li>
<li>
<a class="" href="#">
<span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign">
<i class="fa fa-group"></i>Replication</span>
</a>
<ul class="children nav-child unstyled small collapse" id="sub-item-1">
<a class= "" href ="#" >
<li>
<span data-toggle="collapse" data-parent="#menu-group-1">
<i class="fa fa-user"></i>
</span>New
</li>
</a>
<a class="" href="#">
<li>
<span data-toggle="collapse" data-parent="#menu-group-1">
<i class="fa fa-frown-o"></i>
</span>Pending</li>
</a>
<a class="" href="#">
<li><span data-toggle="collapse" data-parent="#menu-group-1">
<i class="fa fa-thumbs-down" ></i>
</span>Rejected</li>
</a>
<a class="" href="#">
<li><span data-toggle="collapse" data-parent="#menu-group-1">
<i class="fa fa-thumbs-up"></i>
</span>Approved</li>
</li>
</a>
</ul>
<li>
<a class="" href="#">
<span data-toggle="collapse" data-parent="#menu-group-2" href="#sub-item-2" class="sign">
<i class="fa fa-shopping-cart"></i>Asset</span>
</a>
<ul class="children nav-child unstyled small collapse" id="sub-item-2">
<li class="item-2 deeper parent active">
<li><span data-toggle="collapse" data-parent="#menu-group-2">
<i class="fa fa-plus"></i>
</span>ADD</li>
<li><span data-toggle="collapse" data-parent="#menu-group-2">
<i class="fa fa-eye"></i>
</span>View</li>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-th-large"></i>
<span>Tables</span>
</a>
</li>
</ul>
</div>
</div>
Css:-
#media (max-width: 1020px) {
#dashboard-menu {
margin-left: 5px;
}
#dashboard-menu .pointer {
display: none;
}
#dashboard-menu li a span {
visibility: hidden;
}
}
#media (min-width: 980px) and (max-width: 1224px){
.nav-first{
display: none !important;
}
.sidebar-right{
display: none;
}
}
#media (min-width: 768px) and (max-width: 979px){
.navbar-inverse input.search {display: none;}
.sidebar-right{
display: none;
}
.nav-collapse .nav{
background-color: #2c3e50;
margin-top: 11px;
}
.nav-collapse{
position: relative;
z-index: 1000;
}
.nav-collapse .nav>li>a:focus{
background: none;
}
}
#media (max-width: 767px) {
.nav-first{
display: none !important;
}
#content {
margin-left: 0px;
}
.sidebar-right{
display: none;
}
.navbar .brand {
font-size: 13px;
}
.input-prepend.input-append input{
width: 75px;
}
.navbar-fixed-top{
margin-left: 0px;
}
.nav-collapse .nav{
background-color: #2c3e50;
margin-top: 11px;
}
.nav-collapse{
position: relative;
z-index: 1000;
}
.nav-collapse .nav>li>a:focus{
background: none;
}
#sidebar-nav{
margin-left: -15px;
}
#main-stats .stat{
width: 50%;
float: left;
}
#dashboard-menu a span {
display: block;
}
#sidebar-nav {
left: -200px;
position: fixed;
z-index: 9999;
background-color: #f7f7f7;
padding-top: 0px;
border-right: 1px solid #ccc;
width: 165px;
box-shadow: 1px 1px 4px 1px rgb(233, 233, 233);
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-o-transition: left .25s ease;
-ms-transition: left .25s ease;
transition: left .25s ease;
}
#sidebar-nav #dashboard-menu {
margin-left: 10px;
}
#sidebar-nav #dashboard-menu li a span {
visibility: visible;
margin-left: 25px
}
#sidebar-nav #dashboard-menu li:last-child a {
border-bottom: 0px;
box-shadow: none;
}
#dashboard-menu a i,#dashboard-menu > li.active i{
margin-left: 20px;
}
#dashboard-menu ul.submenu li{
margin-left: -10px;
}
#sidebar-nav.display {
position: absolute;
left: 0;
height: 100%;
top: 103px;
padding-left: 32px;
width: 115px;
}
.btn-res {
display: inherit;
}
}
Can anyone help me for generating the jquery and ajax for rendering different pages on every li without loading the sidebar.
You can add one div as a container. And in that container you can put your content on click of "li".