How to open en close menu using javascript? - javascript

Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>


You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.

Related

Hidden Things Appear when click elemet - javascript, css

I have a problem on learning the web.
When I click on the text, the hidden element be appear.
But there are several texts.
I used Javascript getElementsByClassName and it doesn't work.
i am doing web like probot.io (discord bot web commands)
i am not good at javascript :(
What should I do?
pls Help me (T_T)
// ??
#import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&family=IBM+Plex+Sans+Thai+Looped:wght#100&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Heebo:wght#700&family=Roboto:ital,wght#1,700&display=swap');
body {font-family: 'IBM Plex Sans Thai Looped', sans-serif; background-color: #36393F;}
.nav {
background-color: black;
padding: 7px;
font-family: 'Amatic SC', cursive;
}
#pagetitle {color: white; text-align: center; font-size: 30px;}
.heading {
/* text-align: center; */
background-color: #202225;
color: white;
margin: 30px;
margin-left: 30%;
margin-right: 30%;
padding: 20px;
border-left: 4px solid red;
}
.click,
a {
cursor: pointer
}
.cmlistname {
display: inline;
font-family: 'Heebo', sans-serif;
font-size: 24px;
}
.inline {
display: inline;
font-family: 'Roboto', sans-serif;
font-size: 17px;
}
.rtl .panel-body-rtl {
direction: rtl;
text-align: right;
}
.helpcommandHead {
color: #ccc;
font-weight: 700;
font-size: 15px
}
.helpcommandContent {
font-family: 'Roboto', sans-serif;
margin-left: 15px;
white-space: pre
}
.hide {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Command Lists</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css\commandlist.css">
<script src="js\commandscripts.js"></script>
</head>
<body>
<div class="nav">
<div id="pagetitle">Command List</div>
</div>
<div class="heading">
<div class="click">
<div>
<h6 class="cmlistname">?help</h6>
<p class="inline"> -content</p>
</div>
</div>
<div class="panel-body panel-body-rtl hide">
<h3 class="helpcommandHead">Usage:</h3>
<p class="helpcommandContent">#moveme [channel or user]</p>
<p class="helpcommandHead">예시:</p><p class="helpcommandContent">#moveme general
#moveme #Dramex</p>
</div>
</div>
</body>
</html>

you can add this code in your javascript file as the function called getElementsByClassName returns an array of elements and since we have a single element with class "click", i accessed it by [0] .
document.getElementsByClassName("click")[0].addEventListener("click",
unhide);
function unhide(){
document.getElementsByClassName("panel-body")
[0].classList.toggle("hide");
}

maybe like this you want. i add class on "click" event. & using css i show hidden content.
jQuery(document).ready(function($) {
jQuery('.click').click(function(event) {
jQuery('.panel-body').toggleClass('show-content');
});
});
body {font-family: 'IBM Plex Sans Thai Looped', sans-serif; background-color: #36393F;}
.nav {
background-color: black;
padding: 7px;
font-family: 'Amatic SC', cursive;
}
#pagetitle {color: white; text-align: center; font-size: 30px;}
.heading {
/* text-align: center; */
background-color: #202225;
color: white;
margin: 30px;
margin-left: 30%;
margin-right: 30%;
padding: 20px;
border-left: 4px solid red;
}
.click,
a {
cursor: pointer
}
.cmlistname {
display: inline;
font-family: 'Heebo', sans-serif;
font-size: 24px;
}
.inline {
display: inline;
font-family: 'Roboto', sans-serif;
font-size: 17px;
}
.rtl .panel-body-rtl {
direction: rtl;
text-align: right;
}
.helpcommandHead {
color: #ccc;
font-weight: 700;
font-size: 15px
}
.helpcommandContent {
font-family: 'Roboto', sans-serif;
margin-left: 15px;
white-space: pre
}
.hide {
display: none;
}
.panel-body.show-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="nav">
<div id="pagetitle">Command List</div>
</div>
<div class="heading">
<div class="click">
<div>
<h6 class="cmlistname">?help</h6>
<p class="inline"> -content</p>
</div>
</div>
<div class="panel-body panel-body-rtl hide">
<h3 class="helpcommandHead">Usage:</h3>
<p class="helpcommandContent">#moveme [channel or user]</p>
<p class="helpcommandHead">예시:</p><p class="helpcommandContent">#moveme general
#moveme #Dramex</p>
</div>
</div>
</body>
</html>

How can I use HTML, CSS, or JS to make an element active by default?

I would like for <li>Home</li> to be automatically active when a user arrives at my page.
Is there any way to use css, html, or js to set a link to active by default when the user initially arrives at the site? That way, the :active style will visually indicate the location of the nav bar.
Also, once the user clicks on another list item, <li>Home</li> should no longer be active until clicked again.
Thanks, everyone.
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./images/Pizza logo.jpg" type="image/x-icon">
<title>Best slice</title>
</head>
<body>
<!-- HEADING -->
<h1>Best Slice (NYC)</h1>
<!-- NAV -->
<div class="nav-container">
<ul>
<li>Home</li>
<li>Slices</li>
<li>Team</li>
<!-- <li>Locations</li> -->
</ul>
</div>
<!-- SLOGAN -->
<div class="slogan-container">
<p>Pizza, you'd <strong>die</strong> for.</p>
</div>
<!-- SLICES -->
<div id='slices' class="slices-container">
<div class="slices-text">
<h2>By the slice</h2>
<h4>Premium slices of za' just seconds out of the oven</h4>
</div>
<div class="slice-cards">
<div class="card">
<img src="./images/Sausage pizza.jpg" alt="Sausage Pizza">
<br>
<span>Sausage, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa">
<br>
<span>Pepperoni, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Cheese Pizza.jpg" alt="Cheese pizza">
<br>
<span>Cheese, $7.99/slice</span>
</div>
<div class="card">
<img src="./images/Pineapple Pizza.jpg" alt="Pineapple Pizza">
<br>
<span>Pineapple, $10.99/slice</span>
</div>
<div class="card">
<img src="./images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza">
<br>
<span>Buffalo Chicken, $10.99/slice</span>
</div>
</div>
</div>
<!-- TEAM -->
<div class="team-container" id="team">
<div class="team-text">
<h2>Team</h2>
<h4>Meet the genuis behind our insanely good recipes</h4>
</div>
<div class="team-cards">
<div class="team-member-card">
<img src="./images/Chef.jpg" alt="Head Chef">
<h3>Alex, Chef</h3>
<p>Awarded #1 slice in Manhattan.</p>
</div>
<div class="team-member-card">
<img src="./images/Cashier.jpg" alt="Cashier">
<h3>Jack, Cashier</h3>
<p>Decent at math.</p>
</div>
<div class="team-member-card">
<img src="./images/Delivery boy.jpg" alt="Pizza Delivery Boy">
<h3>Matt, Delivery Boy</h3>
<p>He has a need for speed.</p>
</div>
</div>
</div>
</body>
<footer>
<p>Email: Bestslice#bestslicenyc.com</p>
<p>Call us: (XXX) XXX-XXX</p>
<p>Dine with us: 111 Madison Ave NYC</p>
<p>© Best Slice NYC 2021</p>
</footer>
</html>
Here is the CSS
/* Global settings */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
/* GLOBAL HEADINGS & TEXT */
h1 {
text-align: center;
font-size: 6rem;
font-family: 'Bebas Neue', cursive;
margin-top: 1rem;
color: tomato;
}
h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
color: tomato;
}
h3, h4 {
font-size: 1.5rem;
font-family: 'Varela Round', sans-serif;
padding: 10px;
}
p {
font-size: 1.2rem;
padding: 10px;
}
/* NAV */
.nav-container {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
ul {
list-style-type: none;
}
li {
display: inline;
font-size: 1.25rem;
font-family: 'Varela Round', sans-serif;
}
li a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
transition: 0.5s;
}
li a:hover {
background-color: tomato;
border-radius: 2.5rem;
color: white;
}
/* SLOGAN */
.slogan-container {
margin-top: 2rem;
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 50vh;
/* border: red 1px solid; */
}
.slogan-container p {
font-family: 'Varela Round', sans-serif;
font-size: 6rem;
display: block;
}
/* SLICES SECTION */
.slices-container {
margin: auto;
margin-bottom: 7rem;
/* border: red 1px solid; */
margin-top: 1rem;
}
.slices-text {
margin-bottom: 2rem;
}
.slice-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* border: red 5px solid; */
padding-top: 2rem;
}
.card {
/* border: blue 3px solid; */
margin-top: 2rem;
}
.card img {
width: 350px;
height: 300px;
overflow: hidden;
}
.card span {
font-family: 'Varela Round', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: tomato;
}
/* TEAM */
.team-container {
width: auto;
/* border: red 5px solid; */
margin-bottom: 3rem;
}
.team-text {
margin-bottom: 2rem;
}
.team-cards {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.team-member-card img {
height: 300px;
width: 250px;
}
/* FOOTER */
footer {
background-color: black;
padding: 15px;
}
footer p {
color: white;
z-index: 10;
font-family: 'Varela Round', sans-serif;
}
#media only screen and (max-width: 500px) {
h1 {
font-size: 5rem;
}
.slogan-container {
height: 40vh;
margin-top: 3rem;
margin-bottom: 3rem;
}
}

You can .focus the element.
const anchor = document.querySelector('a[href="#"]')
anchor.focus()
/* Global settings */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Varela+Round&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
/* GLOBAL HEADINGS & TEXT */
h1 {
text-align: center;
font-size: 6rem;
font-family: 'Bebas Neue', cursive;
margin-top: 1rem;
color: tomato;
}
h2 {
font-family: 'Bebas Neue', cursive;
font-size: 4rem;
color: tomato;
}
h3, h4 {
font-size: 1.5rem;
font-family: 'Varela Round', sans-serif;
padding: 10px;
}
p {
font-size: 1.2rem;
padding: 10px;
}
/* NAV */
.nav-container {
display: flex;
justify-content: space-around;
margin-top: 2rem;
}
ul {
list-style-type: none;
}
li {
display: inline;
font-size: 1.25rem;
font-family: 'Varela Round', sans-serif;
}
li a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
transition: 0.5s;
}
li a:hover {
background-color: tomato;
border-radius: 2.5rem;
color: white;
}
/* SLOGAN */
.slogan-container {
margin-top: 2rem;
align-content: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
height: 50vh;
/* border: red 1px solid; */
}
.slogan-container p {
font-family: 'Varela Round', sans-serif;
font-size: 6rem;
display: block;
}
/* SLICES SECTION */
.slices-container {
margin: auto;
margin-bottom: 7rem;
/* border: red 1px solid; */
margin-top: 1rem;
}
.slices-text {
margin-bottom: 2rem;
}
.slice-cards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
/* border: red 5px solid; */
padding-top: 2rem;
}
.card {
/* border: blue 3px solid; */
margin-top: 2rem;
}
.card img {
width: 350px;
height: 300px;
overflow: hidden;
}
.card span {
font-family: 'Varela Round', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: tomato;
}
/* TEAM */
.team-container {
width: auto;
/* border: red 5px solid; */
margin-bottom: 3rem;
}
.team-text {
margin-bottom: 2rem;
}
.team-cards {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-around;
}
.team-member-card img {
height: 300px;
width: 250px;
}
/* FOOTER */
footer {
background-color: black;
padding: 15px;
}
footer p {
color: white;
z-index: 10;
font-family: 'Varela Round', sans-serif;
}
#media only screen and (max-width: 500px) {
h1 {
font-size: 5rem;
}
.slogan-container {
height: 40vh;
margin-top: 3rem;
margin-bottom: 3rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="shortcut icon" href="./images/Pizza logo.jpg" type="image/x-icon">
<title>Best slice</title>
</head>
<body>
<!-- HEADING -->
<h1>Best Slice (NYC)</h1>
<!-- NAV -->
<div class="nav-container">
<ul>
<li>Home</li>
<li>Slices</li>
<li>Team</li>
<!-- <li>Locations</li> -->
</ul>
</div>
<!-- SLOGAN -->
<div class="slogan-container">
<p>Pizza, you'd <strong>die</strong> for.</p>
</div>
<!-- SLICES -->
<div id='slices' class="slices-container">
<div class="slices-text">
<h2>By the slice</h2>
<h4>Premium slices of za' just seconds out of the oven</h4>
</div>
<div class="slice-cards">
<div class="card">
<img src="./images/Sausage pizza.jpg" alt="Sausage Pizza">
<br>
<span>Sausage, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Pepperoni Pizza.jpg" alt="Pepperoni Pizaa">
<br>
<span>Pepperoni, $8.99/slice</span>
</div>
<div class="card">
<img src="./images/Cheese Pizza.jpg" alt="Cheese pizza">
<br>
<span>Cheese, $7.99/slice</span>
</div>
<div class="card">
<img src="./images/Pineapple Pizza.jpg" alt="Pineapple Pizza">
<br>
<span>Pineapple, $10.99/slice</span>
</div>
<div class="card">
<img src="./images/Buffalo Chicken Pizza.jpg" alt="Buffalo Chicken Pizza">
<br>
<span>Buffalo Chicken, $10.99/slice</span>
</div>
</div>
</div>
<!-- TEAM -->
<div class="team-container" id="team">
<div class="team-text">
<h2>Team</h2>
<h4>Meet the genuis behind our insanely good recipes</h4>
</div>
<div class="team-cards">
<div class="team-member-card">
<img src="./images/Chef.jpg" alt="Head Chef">
<h3>Alex, Chef</h3>
<p>Awarded #1 slice in Manhattan.</p>
</div>
<div class="team-member-card">
<img src="./images/Cashier.jpg" alt="Cashier">
<h3>Jack, Cashier</h3>
<p>Decent at math.</p>
</div>
<div class="team-member-card">
<img src="./images/Delivery boy.jpg" alt="Pizza Delivery Boy">
<h3>Matt, Delivery Boy</h3>
<p>He has a need for speed.</p>
</div>
</div>
</div>
</body>
<footer>
<p>Email: Bestslice#bestslicenyc.com</p>
<p>Call us: (XXX) XXX-XXX</p>
<p>Dine with us: 111 Madison Ave NYC</p>
<p>© Best Slice NYC 2021</p>
</footer>
</html>

Add an id to your object, es "homeLink":
<li>Home</li>
.
window.addEventListener('load', (event) => {
document.getElementById("homeLink").focus();
});

FIRST METHOD:
You can just simply make an ID and tabindex="0" attribute for the element:
<li>Home</li>
And then focus it with JS:
document.getElementById("focusTime").focus();
SECOND METHOD:
You can just simply make an :active CSS pseudo-class by default only in JS!:
document.getElementById("focusTime").active();
And then it'll simply make the element "clicked" by JS!
THIRD METHOD:
document.getElementById("focusTime").click()
SAME AS THE SECOND METHOD
I hope very much this helps!

CSS deactivating href links with unrelated line, "left: 0;"

Two divs on my homepage contain nav elements: the .header-nav and the .visualizer.bars nav. For some reason my .header-nav links weren't active, and I've narrowed down the culprit to a single line in my css file: .bars {left:0;}.
When I remove this line, the links in my .header-nav work fine. I have no idea what's linking these two div elements, but I need that line in place for the visualizer effect to work properly.
Everything I've seen in my research indicates a problem with the JavaScript, but unlinking the JS doesn't affect the hrefs so I don't think that's it.
What can I do to keep all links active with the correct styling?
https://jsfiddle.net/vespertron/Leebz05q/
HTML
<header>
<div class="header-left">
<h3>This Is A Site </h3>
<nav class="header-nav">
<ul>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="header-right">
<form class="login">
<fieldset>
<input type="text" name="username" tabindex="1" placeholder="Username">
</fieldset>
<fieldset>
<input type="text" name="password" tabindex="2" placeholder="Password">
</fieldset>
<fieldset>
<button type="submit" tabindex="3" value="submit">Login</button>
</fieldset>
</form>
</div>
</header>
<main>
<p class="blurb">stuff that makes me sound like a badass</p>
<div class="visualizer">
<p>What am I up to?</p>
<nav>
<ul class="bars">
<div class="bar">
Link 1
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 2
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 3
<li>
<a href="http://www.dappergrind.com" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 4
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
<div class="bar">
Link 5
<li>
<a href="#" target="_blank">
<span class="link-spanner"></span>
</a>
</li>
</div>
</ul>
</nav>
</div>
</main>
<footer>
<span>Copyright © 2018, Entity</span><br />
Privacy
</footer>
<script src="js/script.js"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
var showWidth = 1;
if(showWidth == 1) {
$(document).ready(function() {
$(window).resize(function() {
var width = $(window).width();
document.getElementById('output_width').innerHTML="Window Width:"+width.toString();
});
});
}
</script>
CSS
html,
body {
background-color: #22201d;
background-image: url(../img/leather.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: #b7b7b6;
font-family: 'Playfair Display SC', serif;
}
a {
color: #686766;
text-decoration: none;
}
a:hover {
color: #b7b7b6;
}
a:after {
color: #141311;
}
li {
list-style: none;
}
header {
height: 100px;
letter-spacing: 1em;
}
.header-left {
float: left;
}
form {
float: right;
}
fieldset {
border: 0 none;
}
input[type=text] {
float: right;
color: #686766;
}
.header-nav ul {
clear: both;
}
.header-nav li {
float: left;
}
main p.blurb {
font-size: 2rem;
text-align: center;
letter-spacing: 1em;
}
.visualizer {
text-align: center;
font-weight: bold;
letter-spacing: .5em;
}
.bars {
position: fixed;
top: 30px;
right: 0;
bottom: 75px;
left: 0;
margin: 10px auto;
text-align: center;
overflow: hidden;
}
.bars::before {
content: "";
display: inline-block;
height: 100%;
}
.bar {
position: relative;
display: inline-block;
vertical-align: bottom;
width: 15%;
height: 50%;
min-height: 30px;
background: #800000;
opacity: 0.7;
-moz-opacity: 70%;
-webkit-opacity: 70%;
-webkit-transition: height 0.5s ease-out;
color: #141311;
padding-top: 10px;
font-family: 'Anton', sans-serif;
font-size: 1.75em;
writing-mode: vertical-lr;
text-orientation: upright;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0;
transition: 0.75s ease-out;
box-shadow: 0px -3px 4px #141311;
}
.bar:hover {
opacity: 1;
-moz-opacity: 100%;
-webkit-opacity: 100%;
color: #b7b7b6;
transition: .25s ease-in-out;
}
.bar:after {
color: #686766;
}
.link-spanner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
footer {
position: fixed;
height: 75px;
width: 100%;
bottom: 0;
text-align: center;
letter-spacing: .2em;
}

Fixed & shrinking navbar

I didn't find anything on Google about this without using Bootstrap and in my project I didn't want to. (because I'm a beginner and I decided to start with a vanilla project - only css html and js and mostly because when I started building this I didn't even know what bootstrap was).
So how I can make the white (id: top-mare + logo) navbar fixed and shrinking while scrolling?
HTML
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Best DAVNIC73</title>
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
<link href="css/mqueries.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="shadow">
<header id="top">
<nav id="top-mic">
<ul>
<li>Contact</li>
<li>Despre noi</li>
<li>Locatie</li>
</ul>
</nav>
<img src="img/logo.jpg" alt="davnic" id="logo"></img>
<div id="top-mare-wrap">
<nav id="top-mare">
<ul>
<li>Acasa</li>
<li>Buton1</li>
<li>Buton2</li>
<li>Buton3</li>
<li>Buton4</li>
</ul>
</nav>
</div>
</header>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="js/sshow.js"></script>
<button onclick="topFunction()" id="myBtn" title="Inapoi la inceputul paginii"><img src="img/arrow-up-01-128.jpg"/></button>
<script src="js/myBtn.js"></script>
<footer class="footer">
<ul>
<li id="nume">SC Best DAVNIC73 SRL</li>
<li><img src="img/location_1.png" class="location"/> Judet Dambovita, Oras Targoviste, Strada, Nr</li>
<li><img src="img/phone.jpg" class="phone"/>074 44 44 444</li>
<li><img src="img/mail.jpg" id="mail"/>bestdavnic73#gmail.com</li>
<li class="copyright">Copyright Ⓒ 2017</li>
</ul>
</footer>
</div>
</div>
</body>
</html>
CSS
html {
box-sizing: border-box;
height: 100%;
font-family: Roboto, Arial;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: auto;
width: 100%;
padding: 0;
padding-bottom: 6vw;
margin: 0;
font-size: 1.1vw;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 0.73vw;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 0.416vw 1.5625vw;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6vw;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 2.8645vw;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
max-width: 100%;
float: left;
margin-left: 12.5vw;
margin-right: 6.77vw;
width:15vw;
height: auto !important;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom: 3.125vw;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display: inline;
}
#top-mare li a {
margin-top: 2.1875vw;
margin-left: 2.083vw;
padding-right: 1.041vw;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1vw;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background-color: #F28A00;
}
.footer ul {
list-style-type: none;
margin: 0;
padding: 1.041vw;
}
.footer li {
font-size: 0.9vw;
font-weight:bold;
display: inline;
margin-left: 2.604vw;
padding-right: 0.78125vw;
padding-bottom: 0.263vw;
}
.copyright {
float:right;
}
#nume {
font-weight: italic;
}
#myBtn {
display: none;
position: fixed;
bottom: 3.646vw;
left: 3.125vw;
z-index: 99;
border: none;
outline: none;
background-color: #F28A00;
color: white;
cursor: pointer;
padding: 0.78125vw;
border-radius: 10px;
width: 3.33333vw;
height: 3.3333vw;
}
.location {
width: 0.677vw;
height: 0.677vw;
}
.phone {
width: 0.677vw;
height: 0.677vw;
}
#mail {
height: 0.677vw;
width: 0.9375vw;
}

To create shrinking animation I would suggest you to use CSS transition and jQuery addClass.
So, you're going to measure the scroll position from top. When at height wanted, add CSS class holding shrink values to that element.
For example your logo has class 'logo':
<img src="image/logo.jpg" class="logo"/>
Logo CSS:
.logo {
width: 200px;
transition: all .5s ease-in-out;
}
The class you're going to add/remove is called eg. 'shrink'. It holds shrink values (eg you want the shrinking logo to be 125px wide):
.logo.shrink {
width: 125px;
}
Next add shrink class to logo when needed (70px from top in this example).
$(document).on('scroll', function() {
if ($(this).scrollTop > 70) {
$('.logo').addClass('shrink');
} else if ($(this).scrollTop < 70) {
$('.logo').removeClass('shrink');
}
});
I made you an example: https://jsfiddle.net/cr29y1tc/29/

View divs when click buttons

As you can see on this website http://www.templategarden.com/preview/tempo/template/index.html In the portfolio section different divs appear on clicking the buttons. And the size of the main Container also increases or decreases accordingly. I guess JS/Jquery will be required. Please help guys I am new to web development and am stuck here.
.wrap {
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
#portone {
text-align: center;
margin-top: 80px;
}
.porttwo {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
#portthree {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 2.1;
}
/*buttons starts here*/
#select {
width: 660px;
height: 45px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.buttonz {
margin-left: 9px;
padding: 10px 22px;
font-size: 12px;
font-weight: normal;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background-color: #f7f7f7;
border: 1px solid #f7f7f7;
cursor: pointer;
}
.buttonz:hover {
background-color: #7cc576;
border-color: #7cc576;
color: #fff;
transition: ease 0.5s;
}
/*buttons end here*/
#portfolio_img {
margin-top: 50px;
}
.project {
margin-left: 16px;
margin-bottom: 90px;
}
<section class="wrap">
<div id="portone">
<h1 class="porttwo" id="portfolio">portfolio</h1>
<h3 id="portthree">Fresh portfolio designs that will keep you wanting you more.</h3> </div>
<!--buttons starts here-->
<div id="select">
<input class="buttonz" name="button" type="button" value="ALL">
<input class="buttonz" name="button" type="button" value="BRANDING">
<input class="buttonz" name="button" type="button" value="WEB DESIGN">
<input class="buttonz" name="button" type="button" value="PRINT DESIGN">
<input class="buttonz" name="button" type="button" value="PHOTOGRAPHY"> </div>
<!--buttons end here-->
<!--portfolio images starts here-->
<div id="portfolio_img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic1.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic2.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic3.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic4.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic5.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic6.jpg" alt="project-img">
</div>
<!--portfolio images ends here -->
</section>

JS/JQ not required. Check this. U can change the attributes all, web, app, brand belonging to the list
<div class="item" all brand web>1</div>
.item {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 16px 16px 0;
line-height: 100px;
text-align: center;
color: #08f;
font-size: 100px;
background-color: lightblue;
}
.item,
input[type="radio"] {
display: none;
}
label {
display: inline-block;
border: 1px solid #000;
padding: 1em;
margin-bottom: 16px;
}
label:hover {
background-color: blue;
color: #fff;
}
#rball:checked ~ .item[all] {
display: inline-block;
}
#rbweb:checked ~ .item[web] {
display: inline-block;
}
#rbapp:checked ~ .item[app] {
display: inline-block;
}
#rbbrand:checked ~ .item[brand] {
display: inline-block;
}
hr {
border: transparent;
padding: 0;
margin: 0;
}
<input name="rb" type="radio" id="rball" checked><label for="rball">All</label>
<input name="rb" type="radio" id="rbweb"><label for="rbweb">Web Design</label>
<input name="rb" type="radio" id="rbapp"><label for="rbapp">App Development</label>
<input name="rb" type="radio" id="rbbrand"><label for="rbbrand">Branding</label>
<hr>
<div class="item" all brand web>1</div>
<div class="item" all app>2</div>
<div class="item" all brand>3</div>
<div class="item" all web>4</div>
<div class="item" all app web>5</div>
<div class="item" all web>6</div>
<div class="item" all app>7</div>
<div class="item" all web>8</div>

Categories

Resources