I try to make a list menu with a submenu using JSX(React) and css Pure (Not jquery!). My intention is show "box-blue" under the <li> "Technologies" but I don't know how to make the div "box-blue" stay visible when I move out from the <li> "Techonologies" element. (obviously always inside the <div> "box-blue")
<ul className="display-menu">
<li className="display-menu-item"><NavLink className="link-categories" exact to="/">Technologies</NavLink>
<div className="box-blue"></div>
</li>
<li className="display-menu-item"><NavLink className="link-categories" exact to="/">Furniture</NavLink></li>
<li className="display-menu-item"><NavLink className="link-categories" to="/">Entertainment</NavLink></li>
</ul>
CSS code
.display-menu-item{
margin-left: 1rem;
position:relative;
}
.link-categories{
text-decoration: none;
color:white;
font-size: 0.85rem;
width: 40%;
text-align: center;
white-space: nowrap;
width:10rem;
}
.box-blue{
height:25rem;
width: 80rem;
background-color: blue;
position: absolute;
bottom: -25.5rem; /* the box appears under the ul */
z-index: 10;
display: none;
right: -45.5rem; /* the box appears at center */
}
.link-categories:hover ~ .box-blue{
display:block;
}
Related
How can you display an item per default in its "normal" position (preferably over any following items), like this:
div {
border: 1px solid black;
}
ul {
display: flex;
padding: 0;
list-style: none;
width: 250px;
border: 1px solid black;
}
li {
display: flex;
position: relative;
}
.item {
padding: 0.4em;
background-color: #f99;
}
.dropdown {
position: absolute;
left: 100%;
z-index: 1;
padding: 0.4em;
opacity: 0.7;
background-color: #2f6f44;
}
<ul>
<li>
<div class="item">First</div>
</li>
<li>
<div class="item">Second</div>
<div class="dropdown">Dropdown</div>
</li>
<li>
<div class="item">Third</div>
</li>
<li>
<div class="item">Fourth</div>
</li>
</ul>
but if the window becomes too small (represented by the ul here), it sticks to the right:
div {
border: 1px solid black;
}
ul {
display: flex;
position: relative;
padding: 0;
list-style: none;
width: 150px;
border: 1px solid black;
}
li {
display: flex;
}
.item {
padding: 0.4em;
background-color: #f99;
}
.dropdown {
position: absolute;
right: 0;
z-index: 1;
padding: 0.4em;
opacity: 0.7;
background-color: #2f6f44;
}
<ul>
<li>
<div class="item">First</div>
</li>
<li>
<div class="item">Second</div>
<div class="dropdown">Dropdown</div>
</li>
<li>
<div class="item">Third</div>
</li>
<li>
<div class="item">Fourth</div>
</li>
</ul>
In other words, if (this.left + this.width > totalWidth) stick right else stay left.
I can either get one or the other behaviour (like above), but not so that it switches seamlessly between the two.
The simplest solution is to compute the element width and the window width and position it using JavaScript, but bugs/edge cases easily slip in, so I'm trying to look for a complete CSS solution.
Any number of containers/wrappers are welcome. One solution I tried looking at was wrapping all the "following" elements (Third and Fourth in the examples above) in a separate li with Dropdown. That way a flex element can take up the space between the previous element (Second) and the edge of the container, but then Dropdown can't go any further left than Second (if the container gets too small).
The elements are dynamic in width based upon changing content.
There are many similar examples, but none I found to deal with this issue. I'm trying to make <nav> bar with drop-down menu to be sticky. I have a <nav> bar with many menu entries, but I simplified it as much as possible to see where it breaks. There is simple example from w3schools, modified a bit, and it stops working as soon as I add position:sticky (you can see it commented out bellow)
So example code in one file for practicality is:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 28px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
/* position: -webkit-sticky; /* Safari */
/* position: sticky; */ /* If enabled it breaks dropdown menu */
top: 0;
}
li {
float: left;
}
li a, .mDrop {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.mDrop li:nth-of-type(-n+1) { float: down; }
.mDrop {
position: relative;
top: 13.6rem;
}
li .mDrop {
visibility: hidden;
opacity: 0;
width: 8rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1.5rem;
display: none;
}
li a:hover, .mDrop:hover .li:hover {
background-color: green;
}
li:hover > ul,
li:focus-within > ul,
li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li { clear: both; width: 100%; }
.active { background-color: #4CAF50; }
</style>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Contact</li>
<li style="float:right">Help</li>
</ul>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling. </p>
<div style="Height:80vh"></div>
<p>Some text to enable scrolling. </p>
</body>
</html>
I've tried many different options examples and no luck. I don't want to encapsulate entire content area in separate <div>, just would like adding stickiness to working drop-down menu. I also would like solution with CSS/HTML only.
Thanks
Your dropdown is broken because you are giving position: sticky to the ul tag. Since you have two nested uls in your code, the style is applied to both of them.
<ul> <!-- first ul -->
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop"> <!-- second ul -->
...
</ul>
</li>
...
...
</ul>
Solution
First of all, wrap your ul (navbar) in a <nav> element. Don't be afraid of "adding another div". This makes you HTML code more semantic and more readable, no need to say it's good for SEO too.
<nav class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Contact</li>
<li style="float:right">Help</li>
</ul>
</nav>
REMOVE these parts from your CSS:
ul {
position: -webkit-sticky; /* remove */
position: sticky; /* remove */
top: 0; /* remove */
}
ADD these to your CSS:
.navbar {
position: sticky;
position: -webkit-sticky;
top: 0;
}
li .mDrop {
visibility: hidden;
opacity: 0;
width: 8rem;
position: absolute;
top: 40px; /* I just added these line. Replace 40px with any value that fits your design */
transition: all 0.5s ease;
margin-top: 1.5rem;
display: none;
}
What I'm basically doing is changing how you "style" your elements. Never use "pure" or "element" selectors like (h1, h2, p, ul) unless you really want to do some general styling; for example, resetting browser default styles.
Full Code
body {
font-size: 28px;
}
.navbar {
position: -webkit-sticky; /* Safari */
position: sticky; /* If enabled it breaks dropdown menu */
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.mDrop {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.mDrop li:nth-of-type(-n + 1) {
float: down;
}
.mDrop {
position: relative;
top: 13.6rem;
}
li .mDrop {
visibility: hidden;
opacity: 0;
width: 8rem;
position: absolute;
top: 40px;
transition: all 0.5s ease;
margin-top: 1.5rem;
display: none;
}
li a:hover,
.mDrop:hover .li:hover {
background-color: green;
}
li:hover > ul,
li:focus-within > ul,
li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
.active {
background-color: #4caf50;
}
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<nav class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News
<ul class="mDrop">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Contact</li>
<li style="float:right">Help</li>
</ul>
</nav>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling. </p>
<div style="Height:80vh"></div>
<p>Some text to enable scrolling. </p>
</body>
I found this really simple way to make responsive menu on w3schools (article) but I have been struggling for a few days trying to center it horizontally.
html
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
CSS
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
I made a fiddle from you linked code: https://jsfiddle.net/gqm7zdf9/
A solid option is to add a wrapper around your UL so that you can move the background-color there. Then you position it inside its wrapper.
HTML
<div class="nav-wrapper">
<ul class="topnav">
...
</ul>
</div>
additional CSS
div.nav-wrapper {
background-color: #333;
}
div.nav-wrapper ul.topnav {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
If you're able (depending on the browsers you need to support) to use display:flex, there's an even way more simple option. You just need to add some CSS:
ul.topnav {
/* ... */
display: flex;
justify-content: center;
}
https://jsfiddle.net/gqm7zdf9/1/
I think you'll be able to continue with your media-queries from there...
I am having difficulty removing the white space to the left of my vertical nav bar.
I have tried setting padding-left to 0 on my main-bar.
It's my first time building a nav bar, so if you see something semantically wrong with my codes, do let me know as well.
Thank you!
This is the HTML code.
<title>Mockup of Zopim</title>
<body>
<main>
<nav class = "side-bar">
<ul class ="main-bar">
<li class="user-nav"><a class ="big-box" href="#">User</a></li>
<li class="main-nav">Home</li>
<li class="main-nav">Visitor List</li>
<li class="main-nav">Visualization</li>
<li class="main-nav">History</li>
<li class="divider-nav">Manage</li>
<li class="manage-nav">Agents</li>
<li class="manage-nav">Departments</li>
<li class="manage-nav">Shortcuts</li>
<li class="manage-nav">Banned Visitors</li>
<li class="manage-nav">Triggers</li>
<li class="divider-nav">Settings</li>
<li class="settings-nav">Widgets</li>
<li class="settings-nav">Personal</li>
<li class="settings-nav">Accounts</li>
</ul>
</nav>
<article>
<header>
<h1>Hello!</h1>
</header>
</article>
</main>
</body>
This is the CSS code.
#charset "utf-8";
/* CSS Document */
body {
background-color: black;
}
main {
width: 100%;
}
.side-bar {
width: 15%;
height: 100%;
background-color: #585858;
position: relative;
float: left;
}
nav li {
list-style: none;
}
.main-bar {
padding-left: 0px;
}
.main-bar li a {
display: block;
width: 100%;
height: 100%;
line-height: 2.5em;
text-decoration: none;
color: white;
text-align: center;
}
article {
width: 60%;
height: 30%;
float: right;
position: relative;
}
a.big-box {
display: block;
line-height: 7em;
}
header h1 {
color: white;
}
Here is the JSfiddle link.
http://jsfiddle.net/codermax/fe0L3d08/
Most Web browsers have different default settings for the base margins and padding. So The best way to solve this is to set all the margin and padding
*{
margin:0;
padding:0;
}
or
html,body {
margin:0;
padding:0;
}
Also better if you reset your css then you can use. something like this:
http://necolas.github.io/normalize.css/
You'll want to use a reset.css to resolve different browser quirks.
I've updated your sample and set body margin, and padding to 0.
body {
margin:0;
padding:0;
}
http://jsfiddle.net/fe0L3d08/1/
For some reason, I am getting a weird overlapping dropdown menu glitch. It works fine when I open it with Firefox, but when I publish the HTML onto Blogger.com website, it overlaps.
My website I am updating it to is http://clubpenguinspin.com/, as you can see, when you mouseover "Chat", it has so many choices and weird overlapping menus. Heres a picture of it:
http://prntscr.com/aopk4
Take a look at my HTML:
<center>
<!-- Link to styles used for our Navigation Bar -->
<link href="http://cpspintest123.x10.mx/nav-id-19fnroex/tea.css" rel="stylesheet" type="text/css" />
<!-- Link to a file with couple simple JavaScript functions used for our Navigation Bar -->
<script src="http://cpspintest123.x10.mx/nav-id-19fnroex/SimpleNavBarScripts.js" language="JavaScript" type="text/javascript"></script>
<!-- main nav bar titles -->
<!-- Note how the the closing angle bracket of each </a> tag runs up against the next <a> tag,
to avoid leaving a gap between each menu title and the next one. -->
<!-- REPLACE each "placeholder.html" URL below with the specific page you want the user
to go to when the given menu title is clicked. For example, the first link below
is for the "Home" menu title, so you'd probably replace the first URL with index.html. -->
<div class="mynavbar">
<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
onmouseout="HideItem('products_submenu');"
onmouseover="ShowItem('products_submenu');"
>Home<a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
onmouseout="HideItem('services_submenu');"
onmouseover="ShowItem('services_submenu');"
>Chat<a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
onmouseout="HideItem('funstuff_submenu');"
onmouseover="ShowItem('funstuff_submenu');"
>Twitter<a class="navbartitle" id="t4" href="#"
onmouseout="HideItem('aboutus_submenu');"
onmouseover="ShowItem('aboutus_submenu');"
>Extras<a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
onmouseout="HideItem('contact_submenu');"
onmouseover="ShowItem('contact_submenu', 't5');"
>Support</a>
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon
<!-- Products sub-menu, shown as needed -->
<div class="submenu" id="products_submenu"
onmouseover="ShowItem('products_submenu');"
onmouseout="HideItem('products_submenu');">
<div class="submenubox">
</div>
</div>
<!-- Services sub-menu, shown as needed -->
<div class="submenu" id="services_submenu"
onmouseover="ShowItem('services_submenu');"
onmouseout="HideItem('services_submenu');">
<div class="submenubox">
<ul>
<li>CPCheatZone Chat</li>
<li>NoeExclusives Chat</li>
<li>TheCpWorld Chat</li>
</ul>
</div>
</div>
<!-- Fun Stuff sub-menu, shown as needed -->
<div class="submenu" id="funstuff_submenu"
onmouseover="ShowItem('funstuff_submenu');"
onmouseout="HideItem('funstuff_submenu');">
<div class="submenubox">
<ul>
<li>CPCheatZone</li>
<li>444ppenguin</li>
<li>Noe231</li>
<li>Rich Nich</li>
<li>Master Swamp</li>
</ul>
</div>
</div>
<!-- About Us sub-menu, shown as needed -->
<div class="submenu" id="aboutus_submenu"
onmouseover="ShowItem('aboutus_submenu');"
onmouseout="HideItem('aboutus_submenu');">
<div class="submenubox">
<ul>
<li>Freebies</li>
<li>Graphics Store</li>
<li>Club Penguin Cheats</li>
<li>Fun</li>
<li>More coming soon!</li>
</ul>
</div>
</div>
<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed -->
<div class="submenu" id="contact_submenu"
onmouseover="ShowItem('contact_submenu');"
onmouseout="HideItem('contact_submenu');">
<div class="submenubox">
<ul>
<li>Banners</li>
<li>Contact Us</li>
<li>More</li>
</ul>
</div>
</div>
<div class="submenu" id="yeaman_submenu"
onmouseover="ShowItem('yeaman_submenu');"
onmouseout="HideItem('yeaman_submenu');">
<div class="submenubox">
<ul>
</ul>
</div>
</div><!-- end of sub-meus -->
</a></a></a></a></a></div>
</center>
Here is my CSS:
.mynavbar {
position: relative;
width: 974px;
height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
margin: 0; border: 0; padding: 0;
background-color: #005EFF;
border-bottom: #003cff solid 3px;
border-left: #003cff solid 3px;
border-right: #003cff solid 3px;
}
a.navbartitle {
display: block;
float: left;
color: white;
text-shadow: 1px 1px 3px #000;
outline: 0;
background-color: #005EFF;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0; border: 0; padding: 0;
line-height: 23px; /* corresponds to 'top' value of .submenu below */
text-align: center;
text-decoration:none;
}
a.navbartitle:hover {
background-color: #0241AD;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 102px; }
#t4 { width: 102px; }
#t5 { width: 120px; }
#t5 { width: 110px; }
#t6 { width: 120px; }
/* We just specify a fixed width for each menu title. Then, down below we specify
a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
Using these fixed values isn't as elegant as just letting the text of each
menu title determine the width of the menu titles and position of the submenus,
but we found this hardwired approach resulted in fewer cross-browser/cross-OS
formatting glitches -- and it's pretty easy to adjust these title widths and the
corresponding submenu 'left' positions below, just by eyeballing them whenever
we need to change the navbar menu titles (which isn't often). */
.submenu {
position:absolute;
z-index: 2;
top: 23px; /* corresponds to line-height of a.navbartitle above */
padding: 0; margin: 0;
width:166px; /* If adjust this, then adjust width of .submenu below a too */
color: white;
background-color: #0241ad;
border: 1px solid transparent; /* box around entire sub-menu */
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 11px;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */
/* End */
/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move left or right as needed.
If you adjust menu title text, you might want to adjust these too. */
#products_submenu { left: 0px; visibility: hidden; }
#services_submenu { left: 104px; visibility: hidden; }
#funstuff_submenu { left: 204px; visibility: hidden; }
#aboutus_submenu { left: 306px; visibility: hidden; }
#contact_submenu { left: 408px; visibility: hidden; }
#contact2_submenu { left: 408px; visibility: hidden; }
#yeaman_submenu { left: 517px; visibility: hidden; }
/* Note, each submenu is hidden when the page loads - then made visible when
the mouse goes over the menu title. Using the 'visibility' property instead
of using the 'display' property avoided a bug in some versions of Safari.
(The bug is pretty where esoteric: The browser ignored the 'hover' property
on 'li' objects inside an object whose display property was set to 'none'
when the page loaded...) Using the 'visibility' property instead of 'display'
would normaly take up extra room on the page, but that's avoided here by putting
the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
in .submenu definition, higher up this page. */
.submenu a
{
display: block;
color: #eee;
background-color: #005EFF;
width: 146px; /* This should be width of .submenu above minus right-side padding on next line */
padding: 5px 0px 4px 20px;
text-decoration: none;
background-color: #005EFF;
border-bottom: #003cff solid 1px;
border-left: #003cff solid 1px;
border-right: #003cff solid 1px;
}
ul { position: left; display: block; }
li { position: left; display: block; }
.submenubox {
margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
margin: 0; padding: 0; border: 0;
list-style-type: none;
}
.submenubox ul li {
margin: 0; padding: 0; border: 0;
}
.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
color: #c6e8e2; /* text color for submenu items */
background-color: transparent;
border-bottom: transparent solid 1px;
}
Please help me! This is very annoying to my website viewers, and others.
:(
You have to add a closing </a> after "Coming Soon" and your other links:
<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
onmouseout="HideItem('products_submenu');"
onmouseover="ShowItem('products_submenu');"
>Home</a><a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
onmouseout="HideItem('services_submenu');"
onmouseover="ShowItem('services_submenu');"
>Chat</a><a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
onmouseout="HideItem('funstuff_submenu');"
onmouseover="ShowItem('funstuff_submenu');"
>Twitter</a><a class="navbartitle" id="t4" href="#"
onmouseout="HideItem('aboutus_submenu');"
onmouseover="ShowItem('aboutus_submenu');"
>Extras</a><a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
onmouseout="HideItem('contact_submenu');"
onmouseover="ShowItem('contact_submenu', 't5');"
>Support</a>
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon</a>
Fortunately, the problem is simple. Add an </a> to the end of your "Coming Soon" link:
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon
I'd run a fine tooth comb through that and make sure your HTML is set up properly. Also, considered taking out the JS from the HTML file where possible and making a separate JS file? You'll thank yourself later.