I'm trying to design the nav bar of the website I'm building. I include the code below, but I cannot figure out how to get the nav bar options to appear like a folder tab. See this image:
I don't understand how to do this with HTML and CSS. What I have at the moment is:
HTML
nav {
margin: 0px;
}
ul {
list-style-type: none;
color: lightskyblue;
background-color: royalblue;
font-family: Helvetica;
font-size: 180%;
margin: 0px;
}
li {
display: inline-block;
background-color: white;
padding-top: 2px;
border: 5px;
border-colour: red;
}
a {
display: block;
color: lightskyblue;
}
li a {
text-decoration: none;
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}
li a:hover {
color: white;
background-color: lightskyblue;
text-decoration: none;
}
<nav>
<ul>
<li>
<a class="active" href="http://www.google.com/ncr">Home</a>
</li>
<li> Full list of Articles</li>
<li> Disciplines</li>
<li> More Resources</li>
<li> <a class="about" href="http://www.google.com/ncr">About Me</a></li>
</ul>
</nav>
In the below, I have created an offsett on the main 'ul' and set the 'li' items above it using "top: -41px" and "position: relative".
Then, using JavaScript, I added eventlisteners to each of the list items, that when hovered over will change the 'ul' background color.
Obviously the styling needs some work but that is something you should try to do yourself.
Please see below:
//event listeners for the 'hovers'
document.getElementById("firstitem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "royalblue";
});
document.getElementById("seconditem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "pink";
});
document.getElementById("thirditem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "green";
});
document.getElementById("fourthitem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "red";
});
document.getElementById("fifthitem").addEventListener("mouseover", function() {
document.getElementById("list").style.backgroundColor = "yellow";
});
* {
margin: 0px;
padding: 0px;
}
nav {
margin: 0px;
}
ul {
list-style-type: none;
color: lightskyblue;
background-color: royalblue;
font-family: Helvetica;
font-size: 180%;
margin: 0px;
margin-top: 41px;
}
li {
display: inline-block;
background-color: white;
padding-top: 0px;
border: 5px;
top: -41px;
padding: 0px 5px;
position: relative;
border-color: red;
}
li:first-child {
background-color: royalblue;
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3) {
background-color: green;
}
li:nth-child(4) {
background-color: red;
}
li:nth-child(5) {
background-color: yellow;
}
a {
display: block;
color: rgb(108, 162, 196);
}
li a {
text-decoration: none;
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<nav>
<ul id="list">
<li id="firstitem">
<a class="active" href="http://www.google.com/ncr">Home</a>
</li>
<li id="seconditem"> Full list of Articles</li>
<li id="thirditem"> Disciplines</li>
<li id="fourthitem"> More Resources</li>
<li id="fifthitem"> <a class="about" href="http://www.google.com/ncr">About Me</a></li>
</ul>
</nav>
<script src="scripts.js"></script>
</body>
</html>
Related
Well, according to the video I saw on YouTube, I wanted to start by creating a dropdown list. Everything was fine in the first step, and I created two sub-menus, host and domain, for the Services tag. Now I want to create several submenus for the host and domain submenus, but unfortunately the submenus are not fully displayed and only the last submenu is displayed?
What do you think I should do? where is the problem from ?
Attached image and html and css files
Note: I am totally newbie so simple explanations would be better
*{
box-sizing: border-box;
}
body{
margin: 0;
}
header{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu{
margin: 0px;
background-color: orange;
}
header nav ul{
margin: 0px;
}
a{
text-decoration: none;
}
.menu ul li{
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover{
background-color: rgb(132, 127, 127);
color:rgb(249, 249, 249);
}
.sub-menu1{
width:200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li{
width:200px;
margin: 0px !important;
}
.dropdown_menu:hover ul{
display: block ;
}
.sub-menu1 li:hover{
background-color: rgb(103, 197, 109);
color:rgb(249, 249, 249);
}
.sub-host ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
display: none;
}
.sub-host:hover li{
display: block;
}
.sub-domain:hover li{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<li> Home </li>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1" >
<li class="sub-host" >
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Image
You are facing this issue because by mistake you have made position of .sub-domain ul li and .sub-host ul li as absolute due to which all the sub-menus are stacking on each other and only last one is visible. To fix the issue remove position:absolute. I have also removed two bugs which occur while hovering on submenu. You can see the code.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu {
margin: 0px;
background-color: orange;
}
header nav ul {
margin: 0px;
}
a {
text-decoration: none;
}
.menu ul li {
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover {
background-color: rgb(132, 127, 127);
color: rgb(249, 249, 249);
}
.sub-menu1 {
width: 200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li {
width: 200px;
margin: 0px !important;
}
.dropdown_menu:hover ul {
display: block;
}
.sub-menu1 li:hover {
background-color: rgb(103, 197, 109);
color: rgb(249, 249, 249);
}
.sub-host ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
display: none;
}
.sub-host:hover li {
display: block;
}
.sub-domain:hover li {
display: block;
}
.sub-menu2,
.sub-menu3 {
position: absolute;
height: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<a href="#">
<li> Home </li>
</a>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1">
<li class="sub-host">
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
So I was creating the beginning of my hopefully, useful website. I started making the header and the menu part. In the search engine part, my intention is to create a dropdown menu with some options when I hover over Search Engine, until that it should disappear. I commented out in the CSS code display: none so that you can see how the dropdown looks like. I tried the pseudo-class .dropdown: hover but it didn't work. How can I make the dropdown menu only appear when I hover over the search Engine?
The linked image as the example of how it looks like, not how it should
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>SerFin</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<style>
.title {
font-family: 'Cinzel', cursive;
}
</style>
<link href='test.css' rel='stylesheet'/>
</head>
<body>
<header>
<nav>
<ul class="menu">
<li><a href='#'>Customer Service</a></li>
<li><a href='#'>Submission</a></li>
<li class="dropdown">Search Engine ▾<li>
</ul>
<ul class="dropdown-menu">
<li>Universities</li>
<li>Jobs</li>
<li>Courses</li>
<li>Internships</li>
<li>Services</li>
</ul>
<ul class="setup">
<li><a href='#'>Login</a></li>
<li>Sign up</li>
</ul>
</nav>
<img class="logo" src="Logo.jpg"></img>
</header>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 18px;
line-height: 1.8em;
}
header {
background-color:#5D6063;
}
nav {
display: flex;
justify-content: space-around;
background-color: #54575A;
width: 100%;
height: 40px;
}
li {
list-style: none;
display: inline;
padding-left: 10px;
padding-right: 10px;
}
a {
color: #D3D3D3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #54A5C4;
}
.menu {
color: #EEEEEE;
padding: 5px;
}
.setup {
color: #EEEEEE;
padding: 5px;
}
.title {
color: white;
display: flex;
justify-content: center;
padding: 150px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
padding: 100px;
}
/*
---------------------------------------------------------------------------------------------
All of this is the heading, from now on everything has to do with the dropdown menu
*/
.dropdown {
position: relative;
z-index: 2;
}
.dropdown-menu {
display: flex;
flex-direction: column;
background: #54575A;
border-radius: 1px;
padding-top: 60px;
position: absolute;
top: -25px;
left: 490px;
z-index: 1;
}
.dropdown-menu li {
list-style: none;
border-bottom: 1px solid #FFF;
padding: 0 40px 10px 20px;
margin: 10px;
}
.dropdown-menu li:last-of-type {
border-bottom: none;
}
.dropdown > span {
z-index: 2;
position: relative;
cursor: pointer;
}
/*.dropdown-menu {
display: none;
}*/
You can use plain javascript or jquery in this.
This is how to do it using jquery.
$('.dropdown').hover( function(){ $('.dropdown-menu').show(); });
If you are using Javascript, you can use the following attachment, onmouseover inside the html element. Such as:
<img onmouseover="yourfunction()" src="path">
or you can do the following in the javascript file:
object = document.getElementByID("element") (or any other reference to element)
object.addEventListener("mouseover", myScript);
I had assistance from: https://www.w3schools.com/jsref/event_onmouseover.asp
Hopefully this was helpful.
I am having a hard time on how to re-arrange my HTML/CSS code in order to move a few links inside of a hamburger nav menu.
I would like to have 'home' always visible but then, I would like the other linked pages to fall inside the hamburger menu, only visible when clicking the menu...
I would like the following to be inside the hamburger menu:
About
Contact
Portfolio ,etc.
Any suggestions on how to achieve this?
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
What you are looking for is called toggle. For this you need to use javascript or jquery (a simplified javascript "version"). To easy explain this, put for example a parent div for the child elements you want to toggle. Then in your css display this parent div none. Then you use jquery to be able to tell what you want to be clickable and then later what you want to toggle.
//Script.js
$(document).ready(function(){ //Use ready to make a function available after the document is loaded
$(".nav").click(function(){
$("#hamburger").toggle(250);
});
});
/* Style.css */
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
#hamburger{
display:none;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/javascript" src = "script.js">
</head>
<header>
<div class="header-logo">
<img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div id = "hamburger">
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</div>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
Edit: I added the src to the new script.js file which should contain your click function:)
Don't think you could achieve what you want only using CSS, maybe with a lot of CSS "hacks". I'd suggest adding some javascript to show on click.
I'd recommend checking this page https://www.w3schools.com/howto/howto_js_mobile_navbar.asp since they have an example just like the one you trying to achieve.
I am trying to sort out creating a basic nav menu.
I created a nav menu with :hover properties for the choices in the menu.
However, I have the current page, set as an active, and I do not want the active page on the menu bar to highlight like the other choices.
I have tried every which way to get it to work with no success. Please help!
/* Main Navigation Menu */
ul#main-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #336699;
}
li {
float: right;
}
li a, .menu-drop-btn {
display: inline-block;
color: white;
padding: 15px;
text-decoration: none;
}
/* li a:hover, .menu-drop-btn:hover .menu-drop-btn{
background-color: #6699cc;
cursor: pointer;
} */
li a:hover, :not(.menuactive #active):hover {
background-color: #6699cc;
cursor: pointer;
}
/* #active:hover {
background-color: #336600;
cursor: pointer;
} */
li.menu-drop-btn {
display: inline-block;
}
.menu-drop-content {
display: none;
position: absolute;
background-color: #003300;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3)
}
.menu-drop-content a {
color: white;
padding: 15px 15px 0 0;
display: block;
text-align: left;
}
.menu-dropdown:hover .menu-drop-content {
display: block;
}
.menu-drop-content a:hover {
background-color: #6699cc;
}
.menu-active {
float: left;
background-color: #336600;
}
/* Body and Background */
body {
background-color: #ffcc80;
height: 200vh;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<ul id="main-menu">
<li class="menu-active" id="active"><a>Home</a></li>
<li><a>Contact</a></li>
<li class="menu-dropdown"><a class="menu-drop-btn">Portfolio</a>
<div class="menu-drop-content">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div></li>
<li><a>About Us</a></li>
</ul>
<div>
<h1>Testing testing...</h1>
</div>
</body>
</html>
I would suggest moving the :not filter to the list item. This seems to work:
li:not(#active) a:hover {
background-color: #6699cc;
cursor: pointer;
}
The rule, when written like this, selects the hover "event" of any anchor element that is a child (a descendant) of a list item that does not have the ID of "active".
Like so:
/* Main Navigation Menu */
ul#main-menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #336699;
}
li {
float: right;
}
li a, .menu-drop-btn {
display: inline-block;
color: white;
padding: 15px;
text-decoration: none;
}
/* This is the change that seems to work */
li:not(#active) a:hover {
background-color: #6699cc;
cursor: pointer;
}
li.menu-drop-btn {
display: inline-block;
}
.menu-drop-content {
display: none;
position: absolute;
background-color: #003300;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3)
}
.menu-drop-content a {
color: white;
padding: 15px 15px 0 0;
display: block;
text-align: left;
}
.menu-dropdown:hover .menu-drop-content {
display: block;
}
.menu-drop-content a:hover {
background-color: #6699cc;
}
.menu-active {
float: left;
background-color: #336600;
}
/* Body and Background */
body {
background-color: #ffcc80;
height: 200vh;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<ul id="main-menu">
<li class="menu-active" id="active"><a>Home</a></li>
<li><a>Contact</a></li>
<li class="menu-dropdown"><a class="menu-drop-btn">Portfolio</a>
<div class="menu-drop-content">
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div></li>
<li><a>About Us</a></li>
</ul>
<div>
<h1>Testing testing...</h1>
</div>
</body>
</html>
You heard the title. I'm working on a webpage at www.thundergamingforums.com and I can't seem to find how to do that.
Please explain in CSS/HTML, however if you need to please completely rewrite the code in whatever language it takes.
<!DOCTYPE html>
<html>
<head>
<style>
#navbarc {}
#navbarc ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
#navbarc li {
float: left;
}
#navbarc li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navbarc li a:hover:not(.active) {
background-color: #111;
transition: color .1s;
color: #00a6ff;
}
#navbarc .active {
background-color: #00a6ff;
}
</style>
</head>
<body>
<div id="navbarc">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Forums</li>
<li>Youtube</li>
<li>Steam Group</li>
</ul>
</div>
</body>
</html>
Using html/css, you can use position: sticky though it's worth noting it has limited browser support http://caniuse.com/css-sticky/embed/
body {
padding-top: 100px;
height: 300vh;
}
#navbarc {
position: sticky;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<style>
#navbarc {
}
#navbarc ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
#navbarc li {
float: left;
}
#navbarc li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navbarc li a:hover:not(.active) {
background-color: #111;
transition: color .1s;
color: #00a6ff;
}
#navbarc .active {
background-color: #00a6ff;
}
</style>
</head>
<body>
<div id="navbarc">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Forums</li>
<li>Youtube</li>
<li>Steam Group</li>
</ul>
</div>
</body>
</html>
If I am correct you want to stick your nav bar to the top of the screen when it touches the top of the screen.
You may require jQuery for doing this with the help of scrollTop method.
<script>
var stickyNavTop = $('#navbarc').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickyNavTop) {
$('#navbarc').addClass('fixed');
}
else {
$('#navbarc').removeClass('fixed');
}
});
</script>