I have a dropdown menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.
My issue comes as the user clicks on the nav link they are brought to the location but the dropdown menu will not close.
Next to this I also want to animate my menu from top to bottom, so it looks more elegant.
I tried lots of things but I can't seem to make it work..
Hopefully you can help me out!
.toggle, [id^=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
float: center;
position: absolute;
z-index: 400;
border: solid 0px;
}
nav ul {
float: center;
position: relative;
width: 100vw;
}
.menu{
background: rgb(233, 233, 233);
background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
}
nav ul li {
text-align: center;
position: relative;
margin: 0px;
display:left;
}
nav a {
font-family: 'OggR';
color: black;
font-size:14px;
text-decoration:none;
position: relative;
text-align: center;
transition: 0.3s;
}
.toggle + a, .menu {
display: none;
}
.toggle {
position: fixed;
display: block;
padding:4px 20px;
color: rgb(233, 233, 233);
font-size:20px;
text-decoration:none;
width: 20px;
height: 30px;
z-index: 9999999999999999999;
}
<nav>
<label for="drop" class="toggle">☰</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>
<li>ABSTRACT</li>
<li>INTRODUCTION</li>
<li>I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</li>
<li>II. <br>CONTEMPORARY NOSTALGIA</li>
<li>III. <br>THE TWO FACES OF NOSTALGIA</li>
<li>CONCLUSION</li>
<li>BIBLIOGRAPHY</li>
</ul>
</nav>
There is no need for javascript, just add this to your css:
#drop:checked + .menu {
display: block;
}
Codepen: https://codepen.io/manaskhandelwal1/pen/poExqJv
html. i added ids:
<nav>
<label for="drop" class="toggle" id="toggle">☰</label>
<input type="checkbox" id="drop" />
<ul class="menu" id="menu">
<li>
<li><a class="navLink" href="#abstract">ABSTRACT</a></li>
<li><a class="navLink" href="#introduction">INTRODUCTION</a></li>
<li><a class="navLink" href="#chapterI">I. <br>THE MEANING OF NOSTALGIA IN CULTURAL HISTORY</a></li>
<li><a class="navLink" href="#chapterII">II. <br>CONTEMPORARY NOSTALGIA</a></li>
<li><a class="navLink" href="#chapterIII">III. <br>THE TWO FACES OF NOSTALGIA</a></li>
<li><a class="navLink" href="#conclusion">CONCLUSION</a></li>
<li><a class="navLink" href="#bibliography">BIBLIOGRAPHY</a></li>
</ul>
</nav>
css: i gave menu postion absolute and i added top: -100% to make it "dissapear", i deleted the position of nav, i added class .menu.open to handle the open, i added transition to .menu for the animation.
.toggle,
[id^=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
float: center;
z-index: 400;
border: solid 0px;
}
nav ul {
float: center;
position: relative;
width: 100vw;
}
.menu{
position:absolute;
top:-100%;
background: rgb(233, 233, 233);
background: linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
background: -webkit-linear-gradient(90deg, rgba(233, 233, 233,0.9) 40%, rgb(255, 101, 207) 99%);
transition: 0.3s ease-in;
}
.menu.open{
top:30px;
}
nav ul li {
text-align: center;
position: relative;
margin: 0px;
display:left;
}
nav a {
font-family: 'OggR';
color: black;
font-size:14px;
text-decoration:none;
position: relative;
text-align: center;
transition: 0.3s;
}
.toggle {
cursor:pointer;
position: fixed;
display: block;
padding:4px 20px;
color:black;
font-size:20px;
text-decoration:none;
width: 20px;
height: 30px;
z-index: 9999999999999999999;
}
and this is the js:
//adding the click event to the toggle
let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('link')
for(let i = 0; i < links.length; i++){
links[i].addEventListener('click', () => {
menu.classList.remove('open')
toggle.innerHTML = '☰'
})
}
document.getElementById('toggle').addEventListener('click', () => {
if(menu.classList.contains('open')){
menu.classList.remove('open')
toggle.innerHTML = '☰'
} else {
menu.classList.add('open')
toggle.innerHTML = 'X'
}
})
Edit:
I added class to the and i loop through them and give event on click to each link so when you click it will close the nav.
check the code pen now
https://codepen.io/Elnatan/pen/PoGyXwx
you can see it here
To be able to implement it in your page:
add to each <a class="navLink"> (check the HTML above)
add id to manu element and to toggle element <ul class="menu" id="menu"> and <label for="drop" class="toggle" id="toggle">☰</label>
add to your css .menu.open {display:block}
create navHandler.js file and add it to your HTML ```
5.copy this code and past it in your navHandler.js file:
let menu = document.getElementById('menu')
let toggle = document.getElementById('toggle')
let links = document.getElementsByClassName('navLink')
for(let i = 0; i < links.length; i++){
links[i].addEventListener('click', () => {
menu.classList.remove('open')
})
}
if you follow the steps correctly it should work
Related
I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.
I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:
function closeNav() {
document.getElementById("nav_bar").style.height = "0%";
document.getElementById("open-btn").style.display = "inline-block";
document.getElementById("close-btn").style.display = "none";
}
function openNav() {
document.getElementById("nav_bar").style.height = "100%";
document.getElementById("open-btn").style.display = "none";
document.getElementById("close-btn").style.display = "inline-block";
}
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav_bar {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: fixed;
top: 0;
width: 100%;
}
#nav_bar>img {
display: none;
}
.nav {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
.list-item {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
}
.list-item {
position: relative;
}
.list-item::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
.list-item:hover::before {
width: 100%;
}
.list-item:hover {
color: #C4C7C8;
}
#close-btn,
#open-btn {
display: none;
}
#media only screen and (max-width:768px) {
#nav_bar>img {
display: block;
position: absolute;
width: 10em;
left: 20%;
top: 10%;
}
#nav_bar {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow: hidden;
transition: 0.5s;
}
.nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.list-item {
text-decoration: none;
display: block;
color: #ffdada;
font-size: 1.5rem;
transition: 0.3s;
}
#close-btn,
#open-btn {
display: block;
position: absolute;
right: 25px;
top: 20px;
font-size: 2rem;
color: #818181;
transition: all 0.3s;
}
#close-btn:hover {
color: #fff;
}
<body>
<div id="nav_bar">
<a href="#" id="close-btn">
<i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
</a>
<img src="assests/images/moon.png" alt="" />
<div class="nav">
<a class="list-item" href="#">Home</a>
<a class="list-item" href="#">About Me</a>
<a class="list-item" href="#">Projects</a>
<a class="list-item" href="#">C.V</a>
<a class="list-item" href="#">Contact</a>
</div>
</div>
<a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
></a>
<script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:
const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');
BUTTON.addEventListener('click', function() {
NAV.classList.toggle('d-none');
});
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: sticky;
top: 0;
width: 100%;
}
menu {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
nav li a {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
position: relative;
}
nav li a::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
nav li a:hover::before {
width: 100%;
}
nav li a:hover {
color: #C4C7C8;
}
.d-none {
display: none;
}
<nav>
<img src="assests/images/moon.png" alt="" />
<menu>
<li><a class="list-item" href="#">Home</a></li>
<li><a class="list-item" href="#">About Me</a></li>
<li><a class="list-item" href="#">Projects</a></li>
<li><a class="list-item" href="#">C.V</a></li>
<li><a class="list-item" href="#">Contact</a></li>
</menu>
</nav>
<button id="toggle_navBar">Toggle NavBar</button>
A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!
I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.
You can do this in several ways, but here is an example of a simple way to do it:
// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");
// Create a variable to hold the state of your nav
let navIsOpen = false;
// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
// Update the nav state variable
navIsOpen = !navIsOpen;
// run a function that will update the nav "styles"
updateNav();
})
// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
navIsOpen
?
nav.classList.add('nav--is-open') :
nav.classList.remove('nav--is-open');
}
.nav {
margin-top: 1rem;
padding: 1rem;
background-color: lightgrey;
}
.nav--is-open {
background-color: purple;
color: white;
}
<button class="nav-toggle">Toggle nav</button>
<nav class="nav">
Your nav here
</nav>
Current setup (plain HTML/CSS):
I've currently got this plain HTML/CSS setup, which is basically using a checkbox with no opacity, with labels acting as buttons (which they in fact are not).
Codepen: https://codepen.io/MikaTheDesigner/pen/MWVYGoz
Video of my current HTML/CSS-demo (and the result goal): https://i.imgur.com/ha3NL0V.mp4
<div class="nav">
<input class="menuBtn" type="checkbox">
<label class="menuLabel open">Menu</label>
<label class="menuLabel close">Close</label>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav {
pointer-events: none;
position: fixed;
z-index: 100;
width: 100vw;
height: 100vh;
}
.nav > .menuBtn {
cursor: pointer;
width: 122.43px;
height: 122.43px;
margin: 0 0 0 3rem;
pointer-events: initial;
position: absolute;
z-index: 99;
opacity: 0;
}
.nav > .menuBtn:checked ~ .menuLabel.open {opacity: 0;}
.nav > .menuBtn:checked ~ .menuLabel.close {opacity: 100%;}
.nav > .menuBtn:checked ~ .menuBox.transitionBox {left: 100%;}
.nav > .menuBtn:checked ~ .menuBox.BG {left: 0;}
.nav > .menuLabel {
color: black;
font-size: 1.5rem;
position: absolute;
z-index: 98;
margin: 3rem 0 0 3rem;
text-align: center;
transition: all 0.2s ease-in-out;
}
.nav > .menuLabel.open {
text-shadow: 0 0 2rem rgba(0,0,0,.5);
width: 122.43px;
}
.nav > .menuLabel.close {
opacity: 0;
}
.nav > .menuBox.transitionBox {
background-color: black;
width: 200%;
height: 100%;
position: absolute;
z-index: 100;
left: -200%;
transition: all 2000ms;
}
.nav > .menuBox.BG {
background: linear-gradient(to bottom, white, black);
background-size: cover;
width: 100%;
height: 100%;
pointer-events: auto;
position: absolute;
z-index: 96;
left: -100%;
transition-delay: 500ms !important;
transition: all 200ms;
}
.nav > .menuBox.BG > nav {
position: absolute;
z-index: 97;
width: 100%;
height: 100%;
}
.nav > .menuBox.BG > nav > ul {
list-style: none;
padding: 122.43px 3rem 3rem calc(6rem + 122.43px);
}
.nav > .menuBox.BG > nav > ul li {
color: white;
font-size: 2rem;
line-height: 2rem;
margin-bottom: 1.5rem;
}
.nav > .menuBox.BG > nav > ul li > a {
color: inherit;
display: block;
text-decoration: none;
transition: all 0.2s ease-in-out;
width: max-content;
}
.nav > .menuBox.BG > nav > ul li > a:hover {cursor: pointer;}
Goal:
My goal is for the menu to act in the exact same way, when clicking the labels .menulabel.open and .menuLabel.close, but using javascript instead of plain HTML/CSS.
I would change these current labels to a-tags or p-tags and using onClick-functions, when I get the javascript working.
Like linked at the top of the thread, this is my goal, but using javascript to make it react, and not using a plain checkbox:
https://i.imgur.com/ha3NL0V.mp4
What have I tried so far?
Besides the plain HTML/CSS-solution I have tried setting up, which I wouldn't argue is the right way to make the menu, I have also tried setting this script up in my HTML-document, inwhich does not seem to work as I want it to:
function openNav() {
document.getElementsByClassName("menuTransition").style.left = "100%";
document.getElementsByClassName("menuBox").style.left = "0";
}
function closeNav() {
document.getElementsByClassName("menuTransition").style.left = "-200%";
document.getElementsByClassName("menuBox").style.left = "-100%";
}
(the javascript was supposed to just style the two elements when clicking on one of the a-tags the exact same way the CSS reacts, when checking the checkbox and "activating" the menu)
<div class="nav">
<a class="menuLabel open" onClick="openNav()">Menu</a>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<a class="menuLabel close" onClick="closeNav()">Close</a>
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
</div>
(basically the same HTML as above, just removing the labels and replacing them with a-tags)
You can use a single class and toggle that class on the click of a button, something like this:
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
document.getElementsByClassName("menuBox") return an array object .
you need to add the index , such as document.getElementsByClassName("menuBox")[0]
I am trying to turn the first two links of my navbar into dropdown menus. I want to make it so that when you click on them, the dropdown menu shows and the arrow icon turns from a downward pointing arrow to an upwards pointing one.
I have tried to use JavaScript to carry out the OnClick events but I have had no success.
For some reason as well, my two dropdown menus are overlapping each other and they are not positioned under the correct navbar links. One should be one appearing under the features link and the other under the company link in the navigation bar. I would also like to request help on how to fix this.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("dropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropdown-arrow')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
#import url('https://fonts.googleapis.com/css2?family=Epilogue:wght#500;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Epilogue', 'sans-serif';
}
.body-container {
background-color: hsl(0, 0%, 98%);
height: 100vh;
width: 100vw;
max-width: 100%;
}
.navbar {
display: flex;
align-items: center;
}
.navbar-flex li {
margin-right: auto;
display: inline-block;
padding: 1em;
}
.navbar-flex a {
color: hsl(0, 0%, 41%);
text-decoration: none;
}
.navbar-flex a:hover {
color: hsl(0, 0%, 8%);
}
.navbar li {
list-style-type: none;
}
.navbar img {
padding: 1.5em 1em 1em 2em;
}
.navbar-btn {
margin-left: auto;
padding: 1.5em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
/*display: none;*/
position: absolute;
min-height: 100px;
box-shadow: 0px 8px 16px 0px hsla(0, 0%, 0%, 0.2);
z-index: 1;
}
.dropdown-content a {
color: hsl(0, 0%, 8%);
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: hsl(0, 0%, 41%);
}
.dropdown-arrow {
color: hsl(0, 0%, 41%);
outline: none;
background: none;
border: none;
cursor: pointer;
}
.dropdown-arrow:hover {
color: hsl(0, 0%, 8%);
}
.dropdown-links {
text-decoration: none;
display: block;
padding: 1em;
color: hsl(0, 0%, 8%);
}
.dropdown-links:hover {
background-color: hsl(0, 0%, 98%);
}
.show {
display: block;
}
/* Styles for both buttons in the navbar */
.btn-primary {
color: hsl(0, 0%, 41%);
outline: none;
padding: 0.5em;
margin-left: 1em;
cursor: pointer;
}
.btn-primary:hover {
color: hsl(0, 0%, 8%);
}
/* Styles for login button in the navbar */
#login-btn {
border: none;
background: none;
}
/* Styles for register button in the navbar */
#register-btn {
padding: 0.8em;
border-radius: 10px;
background: none;
border-color: hsl(0, 0%, 41%);
border-width: 1px;
}
.register-btn:hover {
border-color: hsl(0, 0%, 8%);
}
<div class="body-container">
<nav class="navbar">
<img src="images/logo.svg" alt="company logo">
<ul class="navbar-flex">
<li>Features
<!-- Features dropdown menu-->
<div class="dropdown">
<button onclick="myFunction()" class="dropdown-arrow">
<svg class = "drop-image" svg width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg>
</button>
<ul class="dropdown-content">
<li><a class="dropdown-links" href="#">Todo List</a></li>
<li><a class="dropdown-links" href="#">Calendars</a></li>
<li><a class="dropdown-links" href="#">Reminders</a></li>
<li><a class="dropdown-links" href="#">Planning</a></li>
</ul>
</div>
</li>
<li>Company
<!-- Company dropdown menu-->
<div class="dropdown">
<button onclick="myFunction()" class="dropdown-arrow">
<svg class = "drop-image" width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg>
</button>
<ul id="my-dropdown" class="dropdown-content">
<li><a class="dropdown-links" href="#">History</a></li>
<li><a class="dropdown-links" href="#">Our Team</a></li>
<li><a class="dropdown-links" href="#">Blog</a></li>
</ul>
</div>
</li>
<li>Careers</li>
<li>About</li>
</ul>
<div class="navbar-btn">
<button class="btn-primary" id="login-btn">Login</button>
<button class="btn-primary" id="register-btn">Register</button>
</div>
</nav>
</div>
</div>
</div>
I wrote you a possible Vanilla JS approach to handle the behaviour you are looking for:
First select all the li elements in your list;
Add a click event listener;
On each click it adds or remove the classes that show the modal and rotate the arrow, based on a property that I attach to the DOM node, isOpen, so you can always know if a certain element is visually opened or closed. This is useful if you plan to close the other opened dropdowns while opening a new one to prevent overlapping.
const links = document.querySelectorAll(".navbar-flex>li")
links.forEach((el, i) => {
el.isOpen = false;
el.onclick = e => {
const dropdown = el.querySelector(".dropdown")
const arrow = el.querySelector(".dropdown-arrow")
el.isOpen ? close(dropdown,
arrow) : open(dropdown,
arrow)
el.isOpen = !el.isOpen
//Close other open dropdowns
links.forEach((el, j) => {
const dropdown = el.querySelector(".dropdown")
const arrow = el.querySelector(".dropdown-arrow")
if (i !== j) {
if (el.isOpen) {
close(dropdown, arrow)
el.isOpen = false
}
}
})
}
})
function open(el, arrow) {
el.classList.add("show")
arrow.classList.add("rotate")
}
function close(el, arrow) {
el.classList.remove("show")
arrow.classList.remove("rotate")
}
#import url('https://fonts.googleapis.com/css2?family=Epilogue:wght#500;700&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Epilogue', 'sans-serif';
}
.body-container {
background-color: hsl(0, 0%, 98%);
height: 100vh;
width: 100vw;
max-width: 100%;
}
.navbar {
display: flex;
align-items: center;
}
.navbar-flex li {
margin-right: auto;
display: inline-block;
padding: 1em;
}
.navbar-flex a {
color: hsl(0, 0%, 41%);
text-decoration: none;
}
.navbar-flex a:hover {
color: hsl(0, 0%, 8%);
}
.navbar li {
list-style-type: none;
}
.navbar img {
padding: 1.5em 1em 1em 2em;
}
.navbar-btn {
margin-left: auto;
padding: 1.5em;
}
.dropdown {
position: absolute;
display: none;
background: #FFF;
}
.dropdown-content {
min-height: 100px;
box-shadow: 0px 8px 16px 0px hsla(0, 0%, 0%, 0.2);
z-index: 1;
display: flex;
flex-direction: column;
}
.dropdown-content a {
color: hsl(0, 0%, 8%);
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: hsl(0, 0%, 41%);
}
.dropdown-arrow {
color: hsl(0, 0%, 41%);
outline: none;
background: none;
border: none;
cursor: pointer;
transition: all 0.2s ease-out;
}
.dropdown-arrow:hover {
color: hsl(0, 0%, 8%);
}
.dropdown-links {
text-decoration: none;
display: block;
padding: 1em;
color: hsl(0, 0%, 8%);
}
.dropdown-links:hover {
background-color: hsl(0, 0%, 98%);
}
.show {
display: block !important;
}
.rotate {
transform: rotate(180deg);
}
/* Styles for both buttons in the navbar */
.btn-primary {
color: hsl(0, 0%, 41%);
outline: none;
padding: 0.5em;
margin-left: 1em;
cursor: pointer;
}
.btn-primary:hover {
color: hsl(0, 0%, 8%);
}
/* Styles for login button in the navbar */
#login-btn {
border: none;
background: none;
}
/* Styles for register button in the navbar */
#register-btn {
padding: 0.8em;
border-radius: 10px;
background: none;
border-color: hsl(0, 0%, 41%);
border-width: 1px;
}
.register-btn:hover {
border-color: hsl(0, 0%, 8%);
}
<div class="body-container">
<nav class="navbar">
<img src="images/logo.svg" alt="company logo">
<ul class="navbar-flex">
<li>
Features
<button class="dropdown-arrow">
<svg class = "drop-image" svg width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg>
</button>
<!-- Features dropdown menu-->
<div class="dropdown">
<ul class="dropdown-content">
<li><a class="dropdown-links" href="#">Todo List</a></li>
<li><a class="dropdown-links" href="#">Calendars</a></li>
<li><a class="dropdown-links" href="#">Reminders</a></li>
<li><a class="dropdown-links" href="#">Planning</a></li>
</ul>
</div>
</li>
<li>
Company
<button class="dropdown-arrow">
<svg class = "drop-image" width="10" height="6" xmlns="http://www.w3.org/2000/svg"><path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"/></svg>
</button>
<!-- Company dropdown menu-->
<div class="dropdown">
<ul id="my-dropdown" class="dropdown-content">
<li><a class="dropdown-links" href="#">History</a></li>
<li><a class="dropdown-links" href="#">Our Team</a></li>
<li><a class="dropdown-links" href="#">Blog</a></li>
</ul>
</div>
</li>
<li>Careers</li>
<li>About</li>
</ul>
<div class="navbar-btn">
<button class="btn-primary" id="login-btn">Login</button>
<button class="btn-primary" id="register-btn">Register</button>
</div>
</nav>
</div>
</div>
</div>
So I am in the middle of working on creating my own website. I just started working on the about me section of the website and I wanted to add a slideshow to showcase pictures of my life and interests. I used the code in the book "Jquery & Javascript by Jon Duckett" but for some reason when I click on the buttons to change to the next slide nothing happens.
/*jslint browser: true*/
/*global $, jQuery, alert*/
$('.slider').each(function () {
'use strict';
var $this = $(this), //For every slider
$group = $this.find('.slides'), //Gets the current slider
$slides = $this.find('.slide'), //Gets the slide-group(container)
buttonArray = [], //jQuery object to hold all slides
currentIndex = 0, //Create array to hold nav buttons
timeout; //Used to store the timer
function move(newIndex) {
var animateLeft, slideLeft; //Declare variables
//advance();
//if current slide is showing or a slide is animating, then do nothing
if ($group.is(':animated') || currentIndex === newIndex) {
return;
}
buttonArray[currentIndex].removeClass('active'); //Remove class from item
buttonArray[newIndex].addClass('active'); //Add class to new item
if (newIndex > currentIndex) {
slideLeft = '100%';
animateLeft = '-100%'; //Animate the current group to the left
} else {
slideLeft = '-100%';
animateLeft = '100%';
}
//Position new slide to left (if less) or right (if more) of current
$slides.eq(newIndex).css({left: slideLeft, display: 'block'});
$group.animate({left: animateLeft}, function () {
$slides.eq(currentIndex).css({display: 'none'});
$slides.eq(newIndex).css({left: 0});
$group.css({left: 0});
currentIndex = newIndex;
});
}
function advance() {
clearTimeout(timeout); //Clear timer stored in timeout
//Start timer to run an anonymous function every 4 seconds
timeout = setTimeout(function () {
if (currentIndex < ($slides.length - 1)) { //If not the last slide
move(currentIndex + 1); //Move to next slide
} else { //Otherwise
move(0); //Move to the first slide
}
}, 4000); //Milliseconds timer will wait
}
$.each($slides, function (index) {
//Create a button element for the button
var $button = $('<button type="button" class="slide-btn">•</button>');
if (index === currentIndex) {
$button.addClass('active');
}
$button.on('click', function () {
move(index);
}).appendTo($this.find('.slide-buttons'));
buttonArray.push($button);
});
advance();
});
html {
height: 100%;
}
h1 {
color: white;
text-align: center;
}
h2{
color: white;
}
h3 {
color: white;
}
body{ min-height:100%;
padding:0;
margin:0;
position: relative;
overflow-x:hidden;
}
#IDE{
background-color: white;
width: 60%;
}
#banner {
position: absolute;
top: -20px;
left: 0px;
right: 0px;
width: 100%;
height: 200px;
z-index: -1;
}
#picture {
/* border: 50px solid black;*/
border-radius: 10px;
display:block;
margin: 0px auto;
}
#Paragraph{
color:white;
font-size:130%;
}
#Navbar
{
/*list-style-type: none;*/
margin: 100px;
margin-right: -10px;
margin-left: 0px;
padding: 0;
overflow: hidden;
/*background-color: orange;*/
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/*background-image: url("https://www.transparenttextures.com/patterns/black-orchid.png");*/
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! ");*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#Navbar a {
display: block;
padding: 14px;
/* background: #e2e2e2;*/
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
/* background-color: dodgerblue;
background-image: url("https://www.transparenttextures.com/patterns/fake-brick.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
table {
margin-top: 260px;
color: white;
background-color: black;
}
#Navbar li {
display:inline-block;
margin-right:0px;
font-weight: bold;
color: white;
float: left;
border-right: 0px solid #bbb;
}
#Skillset{
list-style-type: disc;
color: white;
}
li a, .dropbtn{
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn{
/* background-color:#111;*/
background-color: black;
color: red;
text-shadow: 0 0 20px blue, 0 0 10px lime;
font-style: oblique;
text-decoration:underline;
background-color: green;
}
#Skillset ul li{
list-style-type: disc;
}
li.dropdown{
display:inline-block;
}
.active {
background-color: #4CAF50;
}
/* THe container <div> - needed to position the drop down content*/
/*.dropdown{
position: relative;
display: inline-block;
}*/
/*Drop down content hidden by default*/
.dropdown-content {
display: none;
position: absolute;
background-color:#f9f9f9;
min-width;160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*Links inside the dropdown*/
.dropdown-content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
/*Changes color of dropdown links hover*/
.dropdown-content a:hover {background-color:black;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
#sidebar_container
{ float: right;
width: 300px;}
.sidebar_base
{ width: 200px;
height: 14px;
background-color: black;}
.sidebar
{ float: right;
width: 290px;
padding: 0;
margin: 100px 0 16px 0;
}
.sidebar_item
{ background-color: black;
padding: 0 15px;
width: 250px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
height: 1000px;
}
.sidebar li a.selected
{ color: #444;}
.sidebar ul
{ margin: 0;}
.footer {
position: absolute;
bottom: -1100px;
padding: 1rem;
background-color: black;
text-align: center;
width: 100%;
}
.footer p
{ line-height: 1.7em;
padding: 0 0 10px 0;
color: white;
}
.footer a
{ color: #A8AA94;
text-decoration: none;
}
.footer a:hover
{ color: blue;
text-decoration:underline;
}
.slider {
max-height: 430px;
max-width: 940px;
margin: 0px auto 30px auto;}
slide-viewer {
position:relative;
overflow: hidden;
height: 300%;
}
.slide-group{
width:100%;
height:100%;
position:relative;
}
.slide{
width: 100%;
height: 100%;
display: none;
position: absolute;
}
.slide:first-child{
display: block;
}
.slide-buttons {
text-align: right;
}
.slide-btn {
border:none;
background: none;
color: red;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}
button {
font-size: 90%;
text-align: left;
text-transform: uppercase;}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
<!DOCTYPE HTML>
<html id="About Me">
<style>
body {
background-image: url("http://wallpaperrs.com/uploads/3d-abstract/blue-square-pattern-wide-wallpaper-13878.jpg");
background-size: auto;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, intial-scale-1">
<title>Bart Allen</title>
<h1>Bartholomew Allen</h1>
<ul id="Navbar">
<!-- Each of the linked list are referenced as links that lead to alterantive pages-->
<li>HOME</li>
<li>Purpose</li>
<li class="dropdown" >
My Projects
<div class="dropdown-content">
C++
Java
</div>
</li>
<li>LinkedIn Profile link</li>
<li style="float:right"><a class="active" href="About me.html">About me</a></li>
</ul>
<!--The '#' are used as text links, once the other pages are created then they will use urls-->
</head>
<body>
<link rel="stylesheet" href="main.css">
<img id="banner" src="https://math.columbusstate.edu/images/math_banner.jpg" alt="Banner Image"/>
<section>
<div class="slider">
<div class="slide-viewer">
<div class="slide-group">
<div class="slide slide-1">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\CCBC Essex Logo.jpg" height="350px" width="860px">
</div>
<div class="slide slide-2">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Cross Country.jpg" height="350px" width="860px">
</div>
<div class="slide slide-3">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\TU Logo.jpg">
</div>
<div class="slide slide-4">
<img src="C:\Users\barta\Desktop\Personal website\About Me slide show\Jessica And I.jpg">
</div>
</div>
</div>
<div class="slide-buttons">
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
<button type="button" class="slide-btn">*</button>
</div>
</div>
</section>
<div id="sidebar_container">
<div class="sidebar">
<div class="sidebar_top"></div>
<div class="sidebar_item">
<h2>Skillset Currently</h2>
<h3>Programming languages known:</h3>
<div id="Skillset">
<ul>
<li>Java</li>
<li>C++</li>
<li>Javascript</li>
<li>JQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
<br>
<h3>Mathematics taken</h3>
<ul>
<li>Linear Algebra</li>
<li>Calculus I</li>
<li>Calculus II</li>
<li>Discrete Mathematics</li>
</ul>
<br>
</div>
</div>
</div >
</div>
<footer>
<div id="content_footer"></div>
<div class="footer">
<p>HOME | Purpose | My Project
</p>
<p>Copyright© Bartholomew Allen</p>
</div>
</footer>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/slider.js"></script>
<!--<script type="text/jquery.cycle2.min.js" src="js/jquery.cycle2.min.js"> </script>
</body>
</html>
I'm trying to create exactly this Content Panels- Responsive Slider
Unless you want to re-invent the wheel itself, [see example implementations below] you can use jquery ui carousel
http://code.runnable.com/WY_gouUfKGNOY4ET/output
or bootstrap to create carousel.
https://getbootstrap.com/docs/3.3/examples/carousel/
https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7
I made a progress bar that looks like the screenshot
and it turns to green when I hover on it.
I want to make make the bg-color changed to green
and change it back to white when I click another bar.
Please help!
I will suggest you use jquery, add click event to all <a> under element with class breadcrumb:
$('.breadcrumb > a').on('click', function() {
$('.breadcrumb > a').removeClass('active');
$(this).addClass('active');
})
Use CSS rule active, when a tab clicked, remove all active then add class active to the one you just clicked.
$('.breadcrumb > a').on('click', function() {
$('.breadcrumb > a').removeClass('active');
$(this).addClass('active');
})
.active {
background: #444
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
input[type="radio"] {
display: none;
}
.breadcrumb {
/*centering*/
display: inline-block;
background-color: white;
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
margin-bottom: 0px;
border: 1px solid #ccc !important;
padding: 0;
}
.breadcrumb a {
text-decoration: none;
outline: none;
display: block;
float: left;
line-height: 36px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
padding-left: 46px;
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb a.active,
.breadcrumb a:hover {
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after,
.breadcrumb a:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px;
/*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
/*some styles now*/
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
.flat a,
.flat a:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat a:hover,
.flat a.active,
.flat a:hover:after,
.flat a.active:after {
color: white;
background: #369F00;
}
.flat input[type="radio"]:checked~label {
background: #369F00;
color: white;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="breadcrumb flat">
<a href="#">
Invite a New Applicant
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="new" data-bind="checked: applicationsFilter" class="" name="ko_unique_9"> New Applicants (
<span data-bind="text: newApplicationsCount">4</span>)
</label>
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="shortlisted" data-bind="checked: applicationsFilter" name="ko_unique_10"> Shortlisted Applicants (
<span data-bind="text: shortlistedApplicationsCount">0</span>)
</label>
</a>
<a href="#">
<label class="radio-inline">
<input type="radio" value="connected" data-bind="checked: applicationsFilter" name="ko_unique_11"> Connected Applicants (
<span data-bind="text: connectedApplicationsCount">0</span>)
</label>
</a>
</div>
<div class="breadcrumb flat">
<a href="#">
<label class="radio-inline" data-bind="visible: applications().length > 0">
<input type="checkbox" data-bind="checked: showHiddenApplications">
Hidden
</label>
</a>
</div>
</div>
</div>
</body>
</html>