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>
Related
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
Hi everyone hope you are all well, just wondering if someone could give me hand I have a nav bar that when screen is max-width 750px the nav links turn into toogle menu. My problem is I can't seem to get the toggle menu to open and close when I click on it,I have googled and tried a few different code sorces with no luck.
Any help will be very appreciated.
This is my current code.
$(document).ready(function() {
$("menu-toggle").on("click", function() {
$('nav').toggleClass('showing');
$('.nav ul').toggleClass('showing');
});
});
header .menu-toggle {
display: none;
}
/***** MEDIA QUERIES*****/
#media only screen and (max-width: 750px) {
header {
position: relative;
}
header ul {
width: 100%;
background: #666666;
max-height: 0px;
overflow: hidden;
}
.showing {
max-height: 100em;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
}
header ul li ul li a {
padding: 10px;
background: #666666;
color: #ffffff;
padding-left: 50px;
}
header ul li ul li a.logout {
color: #ff0000;
}
header .menu-toggle {
display: block;
position: absolute;
right: 20px;
top: 20px;
font-size: 1.9em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<header>
<div class="logo">
<img src="img/logo.png" alt="logo" />
</div>
<i class="fa fa-align-justify menu-toggle"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
<!--<li>Login</li> -->
<li>
<a href="#">
<i class="fa fa-user"></i> Nathan Ashbury
<i class="fa fa-chevron-down"></i>
</a>
<ul>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</li>
</ul>
</header>
Modify the jquery .menu-toggle to toggle onclick() function
$(document).ready(function () {
$(".menu-toggle").on("click", function () {
$('.nav').toggleClass('showing');
$('.nav ul').toggleClass('showing');
});
});
Your nav is a class, use $('.nav').
You have not written CSS for the class name .showing for .nav or .nav ul. So, nothing will happen even if you click.
I have a sticky navbar. When the page loads, the first home div displays properly. But, after scrolling down, and then back up, some of the content from the home div is hidden by the sticky nav bar at the top. How can I fix this behavior? Any suggestions are appreciated!
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
body {
padding: 0px;
margin: 0px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.main-section {
height: 45vw;
}
<body>
<header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
</body>
The problem is that when you scroll you are adding the position of fixed to the #navbar so you are taking it out of the flow of the page and fixing it to the screen. In doing this you are taking it out of the <nav> and the <header> and these elements are now going to have a height of 0. If you inspect your #navbar with chrome dev tools you can see that it is 31px tall ,in my window at least, it may be different in your window since you coded it to have a padding in vw wich if you ask me is not a very good practice so you may want to rethink that and give it a padding in px, em, or rem so an easy fix would be to just give the parent div, either <header> or <nav> a height of 31px or whatever your navbars height is so when you take the navbar out of the page flow you won't lose the navs height when its gone so something like the following:
header{
height:31px;
}
Here it is in a snippet:
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
body {
padding: 0px;
margin: 0px;
}
header{
height:31px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
section{
height:100vh;
border:5px solid green;
}
<header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
But if if you are just going to have your navbar at the top of the page anyway there is no reason to have any of this javascript you can just add padding to the top of the body and give the navbar a position of fixed. There is no reason to have any of these scroll events at all. Adding the javascript scroll events like these are for if you have something above your navbar and you want it to fix after scrolling down the page a ways. Here is a snippet of that:
body {
padding: 0px;
padding-top:31px;
margin: 0px;
}
nav{
position:fixed;
top:0;
width:100%;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
section{
height:100vh;
border:5px solid green;
}
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
position: fixed;
doesn't leaves gap so the space it has cover will be taken by the other elements because of relative behaviour. You need to push the content with margin or padding with same size of the navigation height.
I needed to change window.pageYOffset >= sticky to window.pageYOffset > sticky since the class was not being removed upon scrolling to the top.
I am trying to make a nav menu for part of a practice website, and I made an animation that basically slides down a green div when one of the menu options are hovered over, but once that happens the whole nav menu slides down. which I do not want. I tried changing the nav menus position to absolute, but then it looses its position, and I can't re-position it. Any help would be appreciated, thank you!
Here is the JSfiddle version.
HTML:
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
<li class="navlistitems" id="home">Home</li>
</ul>
CSS:
#nav_animations {
display:inline;
position:relative;
bottom:13px;
}
#greenHome {
display:none;
}
.nav_square {
background-color:green;
width:100px;
height:15px;
z-index:22;
position:relative;
}
#navlist {
display:inline;
font-family: 'Dhurjati', sans-serif;
font-size:45px;
position:relative;
}
.navlistitems {
display:inline;
padding:50px;
color:black;
}
JavaScript:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').slideToggle('fast');
});
});
PS: Yes I do have the JQuery library linked in my actual code.
The quick and dirty solution using your work is as follows below. If you wanted the green dropdown to be below the parent nav item, you should add ul#nav_animations inside the li.navlistitems. That's what I've done below. I also modified your CSS a little to take this into consideration.
And here is a JSFiddle I threw together for you: http://jsfiddle.net/84amnjz7/1/
CSS:
#navlist {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Dhurjati', sans-serif;
font-size: 45px;
position: relative;
}
.navlistitems {
position: relative;
padding: 25px 0 0;
display:block;
float: left;
color: #000;
}
#nav_animations {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
#greenHome {
display: none;
}
.nav_square {
background-color: green;
width: 100%;
height: 15px;
z-index: 22;
position: relative;
}
jQuery:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
});
});
Modified HTML:
<ul id="navlist">
<li class="navlistitems" id="home">Home
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
</li>
</ul>
I'm trying to create a side bar with 4 different options, when the selected option is active (Meaning you are on that specific page), I want the entire area behind the li, but inside the DIV, a background color slightly darker than what is already there but don't know how to achieve this. I have tried making the li itself 100% width of the div but it doesn't affect it at all.
Here is the issue:
As you can see the li does not reach the start and end width of the sidebar div.
Code Here -
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
padding: 0;
text-align: center;
max-width: 100%;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
#searchbar{
padding-bottom: 0.5em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
Your problem is in your #nav. You need to remove the x-margins:
#nav{
margin: 2em 0;
}
You can then do something like this:
#nav li:hover
{
background:#333;
}
But you'll also want to fix this:
#searchbar{
text-align: center;
}
http://jsfiddle.net/5amL4tx5/
Your problem is the #nav rule. If you remove the margins it will fill the entire containing div.
#nav{
margin: 2em 1em;
color: #888888;
display: block;
max-width: 100%;
}
As for changing the background to make it darker for the active element. I suggest creating an .active class and assigning that on the fly to the active page based off of the url.
Example active class:
.active {
background: c2c2c2;
}
I think the problem is here (specifically the 1em for left/right margin):
#nav{
margin: 2em 1em;
}
That's going to limit the size of anything within #nav.