I've been trying to solve this for 2 days now and tried everything I can think of. Ive tried a thousand combos of position, display, and floats.
I am trying to make a vertical navigation bar in which the content of the navigation buttons comes out as a 2nd tier of vertical buttons and from the second set comes a 3rd tier of vertical buttons, etc.
My problem is that the 2nd tier of buttons displaces the buttons in 1st tier. Strangely the 3rd tier does not displace the 2nd or 1st tier.
I have attached a JSfiddle.
<html>
<head>
<style>
.dropdown {
position: relative;
display: block;
clear: both;
margin: 5px;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
float: left;
min-width: 100px;
margin-top: 5px;
}
.dropdown-options {
display: none;
min-width: 160px;
z-index: 1;
}
.dropbtncontent {
min-width: 160px;
border: none;
font-size: 16px;
background-color: #4CAF50;
color: white;
padding: 2px;
text-decoration: none;
margin: 2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-options {
display: block;
}
.dropdown-options:hover .dropdown-content {
display: inline-block;
}
.dropdown-content a {
background-color: #4CAF50;
color: white;
padding: 2px;
text-decoration: none;
margin: 2px;
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown1</button>
<div class="dropdown-options">
<button class="dropbtncontent">Dropdown1.1</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown-options">
<button class="dropbtncontent">Dropdown1.2</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown-options">
<button class="dropbtncontent">Dropdown1.3</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown2</button>
<div class="dropdown-content">
Link 3
Link 2
Link 4
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown3</button>
<div class="dropdown-content">
Link y
Link r
Link a4
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown4</button>
<div class="dropdown-content">
Lin
Lin 2
Lk 4
</div>
</div>
</body>
</html>
If anyone has any suggestions, I'd really appreciate it.
You can achieve the desired effect by changing your .dropbox class to this:
.dropdown {
position: relative;
display: block;
clear: both;
margin: 5px;
//new code below
overflow:show;
height: 50px;
}
The fixed height would cause some of the 2nd tier options to show until it reached the height.
With that, by setting overflow:show you allow children to show even if they're bigger than it's parent size without affecting other elements.
Related
* {
box-sizing: border-box;
}
body {
font-family: 'Times New Roman', Times, serif;
padding: 10px;
background: #f1f1f1;
}
.header {
text-align: center;
background-color: rgb(255, 255, 255);
padding: 20px;
margin-bottom: 15px;
}
.header h1{
font-size: 30px;
}
.navbar {
overflow: hidden;
background-color: rgb(52, 52, 52);
position: sticky;
top: 0;
box-shadow: 5px 5px 10px rgba(52, 52, 52, 0.753);
}
.drop {
float: left;
overflow: hidden;
}
.drop .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.navbar .a {
float: left;
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 14px 16px;
font-size: 20px;
}
.navbar .a:hover {
background-color: white;
color: black;
}
.drop-content {
display: none;
position: absolute;
background-color: rgb(234, 234, 234);
min-width: 160px;
z-index: 1;
}
.drop-content .a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.drop:hover .drop-content {
display: block;
}
.leftside {
float: left;
width: 75%;
}
.rightside {
float: left;
width: 25%;
padding-left: 20px;
}
.fakeimg {
background-color: rgb(176, 176, 176);
width: 100%;
padding: 20px;
}
div .fakeimg:hover {
border: 1px solid black;
cursor: pointer;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 30px;
text-align: center;
background-color: rgb(248, 248, 248);
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 800px) {
.leftside, .rightside {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<!--This is a link to the CSS.-->
<link rel="stylesheet" href="first_webpage.css">
<body>
<!--This is our header.-->
<div>
<header class="header">
<h1>First Webpage</h1>
</header>
</div>
<!--This is a navigation bar.-->
<div class="navbar">
Home
Projects
Contact
<div class="drop">
<button class="dropbtn">Dropdown
<i></i>
</button>
<div class="drop-content">
Link 1
Link 2
Link 3
</div>
</div>
About
</div>
<!--This is the first and main colum.-->
<div class="row">
<div class="leftside">
<div class="card">
<h2>Title One</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.1 City</figcaption>
<p>This is subsection title</p>
<p>This is the first paragraph of the main section.
This also my first webpage. It definitly looks
like something from the <i><a href="https://www.nytimes.com/">
New York Times</a></i>. It's coming out pretty good;
i just need to continue taking it one step at a time.
Nonetheless, I will contue on with this section and
not bore you. Enjoy the rest of my layout.</p>
</div>
<div class="card">
<h2>Title Two</h2>
<h5>Description, May 31, 2022</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<figcaption>Section 1.2 Flowers</figcaption>
<p>This is a second section Title</p>
<p>This is a second paragraph, I really don't know
what to write. It's not like this is an engligh
101 class. i mean jesus. Talking about jesus, do
you know they're making a jesus game... i mean
what has the gaming industry come to?</p>
</div>
</div>
<div class="rightside">
<div class="card">
<h3>About Me</h3>
<div class="fakeimg" style="height: 100px;">Image</div>
<p>Some text about me so that the visiter may
know a bit more about the developer that they're
interested in...</p>
</div>
<div class="card">
<h3>Popular Posts</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Social Media</h3>
<p>Some social media pages that individuals can
follow me on....</p>
</div>
</div>
</div>
<!--This is a footer-->
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
I'm trying to create a dropdown menu for my dropdown button; as I create the dropdown button everything seems to be fine, however, once I put the position to "absolute" it does not allow me to view the content that is within the dropdown button even when I'm hovering over it. I tried changing the position to anything other than "absolute" and it does allow me to view the content, but it would either stretch the navigation bar down to make room for the options or place the content lower than where the button is located. Can anyone help me out with this problem? I provided the full code for my html and CSS because I think it may be clashing with another code.
Please help.
When mouseover on "Products" tab the "services" items shifts to the right. I need help on the CSS settings.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
position: relative;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 4px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<table width=960 border=0 cellspacing=0 cellpadding=0 align=center bgcolor='#bbeeff' style='padding:10px'>
<tr>
<td>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- <div class="header">
<h2>...</h2>
</div> -->
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- <div class="header">
<h2>...</h2>
</div> -->
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
<p>home page ....</p>
</div>
</td>
</tr>
</table>
.dropdown-content {
position: absolute;
position: relative;
}
These two are mutually exclusive. What you actually want is to put position: relative on the parent element, .dropdown.
You will also have to remove overflow: hidden on the parent .dropdown and .navbar or the dropdown, which is outside of the element's frame, will not show.
Finally, because you've floated everything and nothing has a defined width, you will have to set a non-% width/height on some elements. I added height: 46px to your navbar and width: 500px to your .row.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
height: 46px;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
position: relative;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 4px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.row
{
width: 500px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<table width=960 border=0 cellspacing=0 cellpadding=0 align=center bgcolor='#bbeeff' style='padding:10px'>
<tr>
<td>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- <div class="header">
<h2>...</h2>
</div> -->
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- <div class="header">
<h2>...</h2>
</div> -->
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
<p>home page ....</p>
</div>
</td>
</tr>
</table>
Is it possible to locate the hamburger icon in the fixed menu bar?
I tried to put the element inside the class="sidenav" in the body tag but the I couldn't find the icon.
span {
font-size: 30px;
cursor: pointer;
position: absolute;
}
/* Style the navigation bar */
.navbar {
width: 100%;
margin-left: 0px;
background-color: #555;
overflow: auto;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
<body>
<div id="main">
<span onclick="openNav()">☰</span>
<div class="navbar">
Home
Search
Contact
Login
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
</body>
Expectation
Reality
Try this, I noticed a few things that can be improved on you code, for one, you can use Flexbox to align all items on a single row quite easily; removing the absolute position from the nav icon so everything behaves normally, this also lets you remove the float property. Then the you can wrap your links in another div (or a ul tag) and push them to right with margin-left: auto
span {
font-size: 30px;
cursor: pointer;
}
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
display: flex;
align-items: center;
}
/* Navbar links */
.navlinks{
margin-left: auto;
}
.navbar a {
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
<body>
<div id="main">
<div class="navbar">
<span onclick="openNav()">☰</span>
<div class="navlinks">
Home
Search
Contact
Login
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
</div>
You can fix your issue with 2 lines on CSS:
#main {
display: flex;
justify-content: space-between;
}
http://jsfiddle.net/r24uyeq5/
You can set 'margin-left' a value equal to the width of the icon to navBar
.navbar {
width: 100%;
margin-left: 100px;//Icon width
background-color: #555;
overflow: auto;
}
I was looking at the mega menus on the w3schools website: (https://www.w3schools.com/howto/howto_css_mega_menu.asp).
Using the "try it yourself", I was playing around with it, but struggling to see how to add another mega menu or another link button next to the dropdown link.
Can anyone help me out?
Please check the code below, might help you:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
<div class="navbar">
Home
News
<!-- START FIRST DROPDOWN -->
<div class="dropdown">
<button class="dropbtn">First Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu - first dropdown</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<!-- END FIRST DROPDOWN -->
<!-- START SECOND DROPDOWN -->
<div class="dropdown">
<button class="dropbtn">Second Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu - second dropdown</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
<!-- END SECOND DROPDOWN -->
</div>
The code which gives you the megamenu is the following:
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
Hope this is what you were looking for.
Please try to add some code to your question next time. It will be easier and quicker to analyze.
Regards
Is it possible to use something similar to toggle on/off or show/hide but rather than using panels or accordion menu, use icon-blocks instead?
There are 4 icons arranged in a row, clicking each icon should display the contents below the icon row, but only one content should be displayed at any given time.
I'm looking for CSS/HTML solution only - no javascript.
Icons are arranged in a row, using grid
<!--display icons in a row, 4 columns-->
<div class="quarter">
<span class="icon1"></span>
</div>
Below the 4th 'quarter' div is where the contents should be displayed.
Edit: Final Code
I replaced the position: absolute with float to display all the text below the icons.
.iconBlock{
display: inline-block;
margin: 20px;
padding: 0px 40px 15px 40px;
cursor: pointer;
outline: none !important;
}
.iconBlock a{
font-size: 40px;
color: #000;
}
.contentBlock {
display: none;
height: auto !important;
opacity: 0;
}
.iconBlock:hover a{
color: #444;
}
.iconBlock:focus a{
color: #ff4455;
}
.iconBlock:focus + .contentBlock{
opacity: 1;
display: block;
float: left;
top: 0;
left: 0;
}
I'd recommend using javascript. But here's how to do it without js:
.icon{
display: inline-block;
margin: 20px;
cursor: pointer;
outline: none;
}
.icon i{
font-size: 40px;
color: #000;
}
.content{
position: absolute;
opacity: 0;
}
.icon:hover i{
color: #444;
}
.icon:focus i{
color: #ff4455;
}
.icon:focus + .content{
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="quarter">
<i class="fa fa-cog"></i>
<div class="content">Content for icon 1</div>
<i class="fa fa-trash"></i>
<div class="content">Content for icon 2</div>
<i class="fa fa-pencil"></i>
<div class="content">Content for icon 3</div>
<i class="fa fa-user"></i>
<div class="content">Content for icon 4</div>
</div>