I'm trying to make a drop down component (in Reactjs), and I am having trouble on how to make it not pop up outside the browser width.
I have tried to set right: 0px, it works fine when the dropdown is at the rightmost of the panel, but if the dropdown is not then it gets messed up.
here is the codepen for the sample.
here is a sample css
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
here is a sample html
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
, you can notice that there is a scrollbar there.
What I want to achieve is that I can right align the drop down content, relative to the drop down header.
Thanks
You just need to adjust right side dropdown contents. One possible way is as follow
<div class="dropdown-content d2">
Link 1
Link 2
Link 3
</div>
.d2 {
right:0;
}
Ping me if you have any query.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
float: right;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
div.dropbtn {
display: inline-block;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.d2 {
right:0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content d2">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
<div class="dropdown">
some other dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
Related
I am building a navbar with hover effects over the nav items and an inline button, however, the text in my button is not lining up with the other nav items. In addition I am having trouble figuring out how to get the red hover background to space itself evenly above and below the text of my nav items. What am I doing wrong?
<nav class="navbar">
<a id="header" href="#">Adopt <span class="me">Me</span> </a>
<ul >
<div id="rightitems">
<li>About Us</li>
<li>What we do</li>
<li>Benefits</li>
<li>Our Buddies</li>
<button class="btn">Contact Us</button>
</div>
</div>
</ul>
</nav>
.btn{
display: inline;
width: auto;
text-decoration: none;
margin: 0;
}
.btn a{
margin: 0;
}
body{
background-image: url(bulldog.jpg)
}
a{
text-decoration: none;
}
nav ul{
list-style-type: none;
margin: 0;
padding:0;
text-decoration: none;
display: flex;
position: relative;
}
nav a{
margin-right: 10px;
margin-left: 10px;
padding-top: 10px;
}
.navbar{
display: flex;
justify-content: space-between;
width: 100%;
}
#rightitems{
display: flex;
}
li{
width: auto;
}
li:hover{
width: auto;
}
li:hover {
background-color: #FF4850;
color: white;
border-radius: 10px;
}
nav li:hover{
color: white;
}
nav a:hover{
color: white;
}
Looks like some duplicate selectors and a bit of redundant styling. I've made some adjustments check out this fiddle:
nav a {
margin: 10px;
text-decoration: none;
}
nav a:not('me'):hover{
color: white;
}
.navbar #rightitems li{
padding: 10px 5px;
}
https://jsfiddle.net/cf2vd64y/2/
I have two bars:
1.Top bar - Name, Search bar, Account, Cart
2.Navigation Bar (with dropdowns)
The problem is with the top bar. Im trying to have all the elements be on the same line, with Account and Cart on the right side. I tried using flex but now the search bar is not in line with the other elements. Event Account and Cart are kind of off line. When I don't use flex and just try to float Account and Cart to the right, they are swapped(Cart comes first, then Account), and also they don't become in line, they're kind of floating on the top right.
HTML:
<div class="top">
<h1>TDX</h1>
<form>
<div>
<input type="search" id="mySearch" name="q"
placeholder="Search the site..." size="50">
<button>Search</button>
</div>
</form>
<h4>Account</h4>
<h4>Cart</h4>
</div>
<ul class="topnav">
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
CSS:
.topnav{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin:0 auto;
text-align:center;
}
.topnav li {
float: left;
}
.topnav li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width:120px;
}
.topnav li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
.top{
display: flex;
align-content: space-between;
}
.top a{
margin: 0 5px;
}
.top h1, .top a{
flex: 0 1 auto;
}
.top form{
flex: 1 1 auto;
vertical-align:middle;
}
This is a screenshot of how it looks
Add align-items: center; to your .top element in CSS.
Your updated .top CSS element:
.top {
display: flex;
align-content: space-between;
align-items: center;
}
Here's a demo: https://jsfiddle.net/7p1phnd8/3/
I'm trying to do a nav menu in a particular style, It needs to be a bunch of square buttons/list items, then when you hover over an item, the background behind the item changes color, a decent height above the item and behind the drop down list, as seen in the image below.
My issue is that Im curious if I'm doing it the most efficient way and also when I hover over the initial item, it is working but then you go to one of the drop down items and the main/parent item disappears into the background.
Code:
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
padding-top: 100px;
padding-left: 100px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
border: solid 4px #fff;
width: 150px;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
}
li a:hover {
color: #fff;
border: solid 4px #00ee98;
border-top: solid 100px #00ee98;
margin-top: -100px;
}
.droplinks {
position: absolute;
background-color: #00aeef;
min-width: 150px;
display: none;
margin-left: -2px;
}
.droplinks a {
padding: 10px;
display: block;
border: solid 2px #00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
Then on hovering a menu item, it changes to this;
However, when I then go to a sub menu item the top level item messes up as in the example above. Would could be done to resolve this?
take a look at this fiddle,
and here is how you can properly show the sub menu on hovering on menu item:
li:hover .droplinks{
display: block;
}
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
text-align:center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
vertical-align: middle;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
width: 150px;
position: relative;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
border-width: 30px 5px;
border-color: #fff;
border-style: solid;
}
li:hover a {
color: #fff;
border-color:#00ee98;
}
.droplinks {
background-color: #00aeef;
top: 100%;
display: none;
margin-left: 0;
min-width: 150px;
position: absolute;
margin-top: -15px;
}
.droplinks a {
padding: 10px;
display: block;
border-width: 2px 4px;
border-style: solid;
border-color:#00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
This is driving me insane, and I just can't figure out the cause. I have a JSP application that is connected to bootstrap. First of all, I am by no means an expert in CSS, and am green in that area. My issue is that inline-block just will not work. My bootstrap is used for the collapse plugin that allows me to use a menu button instead of the regular menu in smartphones.
When I use a desktop-size, the menu items are displayed in block format (vertical), even though I have used display: inline-block. Here's my code, and if anyone has an idea why inline-block is not working please let me know.
The html:
<ul id="menu-items" class="navbar-collapse collapse menubar-items">
<li>
<a class="menuItems" href="home.jsp">Home</a>
</li>
<li>
<a class="menuItems" href="business.jsp">Business</a>
</li>
<li>
<a class="menuItems" href="new-form.jsp">New Order</a>
</li>
<li>
<a class="menuItems" href="logout.do">Logout</a>
</li>
</ul>
The css:
#menu-items {
min-width: 250px;
background: #CFC3F8;
box-shadow: 5px 5px 2px #888888;
padding: 0;
float: right;
}
#menu-items li {
height: 100%;
width: 100%;
margin-right: 10px;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 60px;
font-size: 16px;
border-left: solid white 2px;
color: #332419;
//The attempt
display: inline-block;
}
#menu-items li a.menuItems {
height: 100%;
width: 100%;
}
#menu-items li a.menuItems:hover {
color: #332419;
background-color: #f1f1f1;
}
//ensuring that bootstrap doesn't override it
.navbar-collapse li {
display: inline-block;
text-decoration: none;
}
.collapse li {
display: inline-block;
text-decoration: none;
}
ul li {
display: inline-block;
text-decoration: none;
}
I've tried for the past 3 hours to try and get this to work properly with no luck, and am so frustrated.
I have a horizontal menu with links, but I can't get the entire button to be clickable. I then ran into trouble with centering the menu.
Page looks like this (it's centered on the website, container width 900px)
http://i.stack.imgur.com/cFKpf.png
HTML:
<div id="container">
<div id="title">
<h1>Welcome to my website</h1>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
<li>FAQ</li>
</ul>
</div>
<div id="content"></div>
</div>
CSS:
#container{
background-color: whitesmoke;
width: 900px;
margin: 0px auto;
padding-bottom: 20px;
}
#menu, #menu ul {
width: 100%;
height: 35px;
background-color: #333;
color: whitesmoke;
margin: 0px auto;
padding: 0px;
float: left;
display: table;
text-align: center;
font-weight: bold;
}
#menu li{
display: table-cell;
padding: 0px 50px;
vertical-align: middle;
border: solid 1.5px olive;
}
#menu a, #menu a:visited {
color: whitesmoke;
text-decoration: none;
}
#menu li:hover {
background-color: olive;
color: white;
}
Any help on how to get the entire button clickable while maintaining the look of the page?
Thanks
You shouldn't give the li a padding. You should set the a to display: block; and give them the padding. Doing that the a will fill the whole box, because there won't be any padding between li and a.
Just set display: block on the anchors:
#menu a {
display: block;
}