Mobile bar closing transition isn't working on my code? - javascript

I'm new to coding, and I do not understand what is wrong with my code. The menu bar is for the media. I have it set to transition when a user clicks on it, and it works when they open it; however, when it closes, the transition doesn't work. I tried troubleshooting it; however, the transitions work if I move the line of code after the link list. I'm sure it's something silly, and I was hoping someone could take a look and provide some guidance.
The transition works for line 32, but I want it on line 25, however, only closes it without the transition, help please.
Menu Bar
HTML Code:
<!-- Main start to the webpage. Nav Bar and Business Name-->
<body>
<section class="header">
<nav>
<img src="img/light_logo.png"
<div class="nav-links" id="navLinks">
(LINE 25) <!-- <i class="fa-solid fa-xmark" onclick="hideMenu()"></i> -->
<ul>
<li>Home</li>
<li>Products</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
(LINE 32) <i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</nav>
Javascript code:
<!-- JavaScript for Toggle Menu -->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
My CSS Code:
#media(max-width: 700px){
.text-box h1{
font-size: 20px;}
.nav-links ul li{
display: block;
}
.nav-links{
position: absolute;
background: #6e6d6e;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fa-solid {
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}

Related

How to enforce <DIV> tag to use the free space in a page?

I am developing a sample website to learn CSS and HTML. Have created a horizontal nav bar, a side nav bar, and a welcome message on the top of the page. And when any of the links are clicked the corresponding Html file will be loaded onto the 'mainContent' . All are working as expected except the 'mainContent' is not occupying the remaining space of the page. Please advise me on what is missing.
/* Add a black background color to the top navigation */
.topnav {
background-color: #111;
margin-left:160px;
width: 90%;
height:10%;
overflow-x: hidden; /* Disable horizontal scroll */
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: green;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: sans-serif;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: Green;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: White;
}
/* The sidebar menu */
.sidenav {
margin-top: 0;
height: 80%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: absolute; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 1000; /* Stay at the top */
left: 0;
background-color: #00A555; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
display: block;
font-family: sans-serif;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 17px;
color: black;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
/*padding: 0px 10px;*/
/*top: auto;
position: static;*/
overflow: auto;
background-color: #FFF;
padding-top: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>XYZ Hostel</title>
<style>
li {
display: inline;
}
</style>
</head>
<link rel="stylesheet" href="divCss.css">
<body>
<script>
function lurl(page) {
let node = document.getElementById('mainContent');
let url = '<object type="text/html" data=' + "\""+ page + "\"" + '></object>';
node.innerHTML = url;
}
</script>
<div id="container">
<div id="Welcome">
<table style="width: 100%">
<tr>
<td>
<div>
<img alt="Hostel" src="hostel1.webp" width="200" height="100">
</div>
</td>
<td align="right">
<div>
<h2 style="color: black; font-family: Lucida Calligraphy; font-style: black;">Welcome to XYZ Hostel</h2>
</div>
</td>
</tr>
</table>
<div class="topnav">
<ul style="list-style: none; padding-left: 0;" >
<li><a class="active" href="#" onclick="lurl('Student_Home.html')">Home</a></li>
<li>Login</li>
<li>Room Details</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="menuOption">
<!-- Side navigation -->
<div class="sidenav">
<ul style="list-style: none; padding-left: 0">
<li><a class="active" href="#" onclick="lurl('Student_Home.html')">Home</a></li>
<li>Login</li>
<li>Room Details</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div id="mainContent" class="main">
<!-- iframe id="contentPage" height="600" width="1200" style="border: 0">
</iframe -->
</div>
<footer>
Thank you
</footer>
</body>
</html>
enter image description here
From your question i don't understand 100% what you are trying to do.
Because you are loading some extra content, i can't really see it here on the snippet.
But i think something like this would work:
.grid {
--grid-sidebar-width: 160px;
display: grid;
grid-template-columns: var(--grid-sidebar-width) 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas: "header header" ". topbar" "aside main";
min-height: 100vh;
}
.header {
grid-column: 1/ -1;
display: grid;
grid-template-columns: var(--grid-sidebar-width) 1fr;
grid-area: header;
}
.header__title {
text-align: right;
}
.topbar {
grid-area: topbar;
background-color: darkgrey;
}
.topbar__nav {
display: flex;
gap: 2rem;
}
.aside {
grid-area: aside;
background-color: green;
}
.main {
grid-area: main;
background-color: lightgrey;
}
.main__content {
padding: 1rem;
}
<div class="grid">
<header class="header">
<p>Logo</p>
<p class="header__title">Welcome to xyz hostel</p>
</header>
<div class="topbar">
<nav>
<ul class="topbar__nav">
<li>Home</li>
<li>Content A</li>
<li>Content B</li>
</ul>
</nav>
</div>
<aside class="aside">
<nav>
<ul>
<li>Link 1</li>
<li>Link 3</li>
<li>Link 3</li>
</ul>
</nav>
</aside>
<main class="main">
<div class="main__content">
<p>You content goes here</p>
</div>
</main>
</div>
This allows you to create the basic layout (grid) for the page without needing to place any elements with position absolute or by giving them hacky margins.
I didn't pay much attention to any other styles, just the grid layout.
This html and css create a grid with two columns:
a left column of 160px (defined by the --grid-sidebar-width variable)
a right column that takes the rest of the available space
You then just need to place your page elements on the grid areas where you want to show them.
The content you load with JS can be placed inside the main__content div.
Here is some more information about using CSS grid:
CSS Grid on MDN
Grid layout
CSS Grid Area
CSS Template Columns
CSS Template Rows

Why isn't the navigation showing from top to bottom but rather left to right

Here is the snippet:
const exitBtn = document.querySelector('#exitBtn');
menuBtn.addEventListener('click', () => {
const menu = document.querySelectorAll('.menu');
for (let el of menu) {
el.style.display = 'block'
}
})
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
}
.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
.menu ul li {
display: block;
}
.menu li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
</div>
<div class="exit">
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
I tried making it block but it did not work, I also tried making flex-direction to be column but still did not work. Am I doing something wrong somewhere? What is causing the issue of the menu not being displayed from up to down? Is there an alternative way to go about this?
Maybe try to set the position of the navbar class to fixed if it is a sidebar you are trying to do, or as how I perceive, you are trying to make a menu bar on the side supposedly and not a rowline. Then the class of menu should be the one flexed and not fixed. You are supposed to make a container for the menu that is the fixed one so that all of its content will be fixed on the side. Show me more of the css and I might help. But try doing
.navbar{
width: width;
height: 100vh;
position: fixed;}
Then the "max-width" class will have the flex attribute
.max-width{
display: flex;
flex-direction: column;}

<!DOCTYPE HTML> causes hamburger nav bar javascript to not function

I apologize for my lack of coding knowledge as I am fairly new to web designing. I've searched for a solution for days, trying different methods, and realized I need help.
Basically my code is programmed to illustrate a hamburger icon when the browser is shrunk, this works perfectly fine. What I am having issues with is that when I click on my hamburger icon, the dropdown menu will not display.
It used to work when I didn't add the line in the beginning, but my site was really slow and laggy. After adding the line, my javascript does not work at all and I'm lost.
Here is my code for html, css and js:
$('.hamburger').on('click', function () {
if ($('.menu').hasClass('open')) {
$('.menu').removeClass('open');
} else {
$('.menu').addClass('open');
}
});
#media only screen and (max-width: 768px) {
.hamburger {
cursor: pointer;
padding: 30px;
display: block;
}
.line {
border-bottom: 5px solid #fff;
width: 35px;
margin: auto;
margin-bottom: 6px;
}
.line:last-child {
margin-bottom: 0;
}
/* Our styles here */
#nav li {
width: 100%;
border-bottom: 1px solid white;
text-align: center;
border-top: 1px solid white;
border-bottom: none;
background: rgba(204, 204, 204, 1);
}
.menu {
height: 0;
overflow: hidden;
transition: height 0.3s;
margin: 0;
padding: 0;
margin-top:-14;
}
.open {
height: 255;
}
<!DOCTYPE HTML>
<body>
<div id="nav">
<div href="#" class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="clearfix menu">
<li>About Us</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
please msg if I need to provide any more info!!
You are giving the ul.open a height of 255 but the browser needs to know the unit (px/em/rem etc.). Setting this to 255px will fix your issue.
The reason you are experiencing this after setting a doctype is because by doing so you are setting your document to be rendered in standards mode instead of quirks mode. In standards mode you must specify units for dimensions, in quirks mode the browser assumes px.

Hiding Nav on Scroll and reavaling it on logo hover?

I m developing a site and I m about to add a little bit of transition to the nav bar, but I have few bugs can anybody help.
The Objective is when you scroll down the nav elements gets hidden and the logo of the site will be at the fixed position, if you move hover logo the nav appears again.
I think it still needs to be fixed.
Reference Navigation bar: https://www.barackobama.com/
.logo{
position: fixed;
}
.navigation{
position: fixed;
margin: 50px 20px;
display: block;
}
ul li{
padding: 0 30px;
display: inline-block;
}
ul li a{
color: #646464;
text-transform: uppercase;
font-weight: 600;
}
ul li a:hover{
color: #BE9503;
text-decoration: none;
}
.main{
min-height: 1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navig" id="navhome">
<div class="logo">
<img src="images/logo-4.png" width="70">
</div>
<nav id="navMain" class="navMain">
<ul class="navigation">
<li>Dr Ganesh</li>
<li>Connect</li>
<li>Achievers</li>
<li>News</li>
<li>Gallery</li>
</ul>
</nav>
</div>
<div class="main"></div>
<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop()>100)
{
$('.navMain').fadeOut();
}
else
{
$('.navMain').fadeIn();
}
$('.navig').mouseenter(function(){
$('.navMain').show();
});
$('.navig').mouseleave(function(){
$('.navMain').hide();
});
});
</script>
</div>

nav css not working after jquery .show()

My navigation has a border-bottom on hover, after you slide down on the site my first nav gits hidden and my 2nd nav gets shown. The navs have the same css, but my border-bottom on the 2nd nav doesn't work. Is this a problem with my css or jquery? Can anyone help me fix this?
HTML:
<header>
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo.png">
</a>
<nav>
Home
About
Projects
Contact
</nav>
</header>
<div id="header" class="fade">
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo-white.png">
</a>
<nav>
Home
About
Projects
Contact
</nav>
</div>
Jquery:
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').show();
$('header').removeClass('slideUp');
$('header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
CSS:
header, #header{
height: 75px;
background: rgba(26, 28, 30, 0.75);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 50;
}
header{
display: none;
}
#header{
background-color: transparent;
}
nav{
position: fixed;
right: 0;
margin-top: 22.5px;
margin-right: 30px;
z-index: 55;
}
nav a:link, nav a:visited{
position: relative;
display: inline-block;
padding: 0px 10px 0px 10px;
text-decoration: none;
font-size: 1.5em;
color: #fffffa;
}
nav a:after{
content: '';
display: block;
margin: auto;
width: 0px;
background: transparent;
transition: width .5s ease,
background-color .5s ease;
}
nav a:hover:after{
width: 100%;
border-bottom: 2px solid #fffffa !important;
}
Looks like your JQuery is having some syntax issues in the id selectors. Make sure to include #
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('#header').show();
$('#header').removeClass('slideUp');
$('#header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('#header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
Edit
Per feedback, I have re-visited this issue and have crafted a fiddle with my interpretation of what I believe will solve this. Continuous feedback will be great in getting this resolved.
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').addClass('hide');
$('#header').removeClass('hide');
} else {
$('#header').addClass('hide');
$('header').removeClass('hide');
};
});
Updated JSFiddle Link
The first problem in your script is HTML code.
You should put the second nav inside the header element like this:
<header>
<nav id="first-nav">
Home
About
Projects
Contact
</nav>
<nav id="second-nav">
Home
About
Projects
Contact
</nav>
</header>
I gave the id of "first-nav" and "second-nav" for easy handling.
Second problem is your jQuery. In your if condition, you tell jQuery to hide the header element when the browser has been scrolled more than 100. That's the problem because nav element need to be used inside header element.
I have edited your jQuery.
$(document).ready(funciton() {
//hide the second nav
$('#second-nav').hide();
//when the scroll event fired
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#second-nav').show();
$('#first-hav').hide();
}
else {
$('#first-nav').show();
$('#second-hav').hide();
}
});
});
If there is anything that is not clear please let me know, I'll be happy to help.

Categories