I want to make my app responsive but I just founded a problem with a <ul>, when I reduce the windows he disapear but I want to make it pass over the other elements (look the images)
This is ok :
But this is not ok :
He changes side when I reduce the window...
So that's the HTML of the 3 options
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li>
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li><a id="allMch">All machines</a>
</li>
<li><a id="rngMch">Only running machines</a>
</li>
<li><a id="stpMch">Only stopped machines</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
And the css of dropdown-menu:
.dropdown-menu {
overflow: auto;
border: medium none;
box-shadow: none;
display: none;
// float: left;
font-size: 12px;
left: 0;
list-style: none outside none;
padding: 0;
// position: absolute;
text-shadow: none;
top: 100%;
z-index: 9998;
border: 1px solid #D9DEE4;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu>li>a {
color: #5A738E;
}
If #nashcheez put an answer with his code I'll mark is as answer but the solution for me was to add this code in the css :
.panel_toolbox>li>ul {
left:auto;
right:0;
position: absolute;
}
Related
I'm creating a website for my school soccer program and I'm trying to create a drop down menu with another drop down menu inside to show the "previous teams" and all of their items (roster, pictures, matches, etc.).
I've tried removing the position: absolute and while that makes the submenu show up, the buttons I created that should in theory expand to the actual links don't end up doing anything. When not removing the position: absolute, 1 item (the final item I add) shows up and I can interact with it.
The HTML code:
<div class="nav-link-wrapper-drops">
<button class="Team">
Previous Teams
<i class="fa fa-caret-down"></i>
</button>
<div class="nav-link-wrapper-down">
<button class="button-down">
> 2018/2019
<i class="fa fa-caret-down"></i>
</button>
<div class="nav-link-wrapper-twodown">
Roster
Schedule
Pictures
</div>
</div>
<div class="nav-link-wrapper-down">
<button class="button-down">
> 2017/2018
<i class="fa fa-caret-down"></i>
</button>
<div class="nav-link-wrapper-twodown">
Roster
Schedule
Pictures
</div>
</div>
<div class="nav-link-wrapper-down">
<button class="button-down">
> 2016/2017
<i class="fa fa-caret-down"></i>
</button>
<div class="nav-link-wrapper-twodown">
Roster
Schedule
Pictures
</div>
</div>
</div>
The CSS code going with this:
.nav-link-wrapper-drops:hover .nav-link-wrapper-down {
display: block;
}
.nav-link-wrapper-down .button-down {
border: none;
outline: none;
color: red;
background-color: inherit;
font-family: inherit;
text-transform: uppercase;
padding: 12px 16px;
}
.nav-link-wrapper-twodown {
display: none;
position: absolute;
background-color: navy;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
left: 100%;
top: 0%;
}
.nav-link-wrapper-twodown a {
float: none;
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
left: 100%;
top: 0%;
}
.nav-link-wrapper-twodown a:hover {
background-color: white;
border-color: navy;
}
.nav-link-wrapper-down:hover .nav-link-wrapper-twodown {
display: block;
}
I expect the output to essentially create a "double" drop down menu where there are two levels to the drop down menu.
I'm not very familiar with HTML and I created the drop down menus with <button>s because of an online tutorial but on this site I've seen many people using <li> and <ul> so I'm also wondering if there IS a way to make it with <button>.
EDIT:
The inspiration for this style of navbar came from this website. It's eventually what I want my website to look like - with different colors - visually.
*ALL OF MY CODE CAN BE FOUND AT THIS GITHUB.
Is this what you are trying to do?
.button-down {
border: none;
outline: none;
color: red;
background-color: inherit;
font-family: inherit;
text-transform: uppercase;
padding: 12px 16px;
height: 20px;
}
.nav-link-wrapper-twodown {
display: none;
float: left;
background-color: navy;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
left: 100%;
top: 0%;
}
.nav-link-wrapper-twodown a {
float: none;
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
left: 100%;
top: 0%;
}
.nav-link-wrapper-drops {
display: flex;
flex-direction: row;
}
.Team {
height: 20px;
}
.Team:hover + .nav-link-wrapper-down, .nav-link-wrapper-down:hover {
display:block;
}
.nav-link-wrapper-down {
display:none;
margin: 0;
}
.button-down:hover + .nav-link-wrapper-twodown, .nav-link-wrapper-twodown:hover {
display:flex;
flex-direction: column;
float: right;
}
ul {
list-style: none;
padding: 0;
}
.nav-link-wrapper-twodown a:hover {
background-color: white;
border-color: navy;
}
<div class="nav-link-wrapper-drops">
<button class="Team">
Previous Team
<i class="fa fa-caret-down"></i>
</button>
<ul class="nav-link-wrapper-down">
<li class="item">
<button class="button-down">
> 2018/2019
<i class="fa fa-caret-down"></i>
</button>
<ul class="nav-link-wrapper-twodown">
<li>Roster</li>
<li>Schedule</li>
<li>Pictures</li>
</ul>
</li>
<li class="item">
<button class="button-down second-btn">
> 2017/2018
<i class="fa fa-caret-down"></i>
</button>
<ul class="nav-link-wrapper-twodown">
<li>Roster</li>
<li>Schedule</li>
<li>Pictures</li>
</ul>
</li>
<li class="item">
<button class="button-down second-btn">
> 2016/2017
<i class="fa fa-caret-down"></i>
</button>
<ul class="nav-link-wrapper-twodown">
<li>Roster</li>
<li>Schedule</li>
<li>Pictures</li>
</ul>
</li>
</ul>
</div>
Not an exact answer for the code you provided, but consider refactoring your menu system to use nested lists. Here is a dead simple prototype: https://codepen.io/JimmyJames88/pen/xvzOyg
Then it's just a matter of using css rules to show/hide the sub UL's strategically.
<ul class="nav">
<li>
Menu item 1
<ul>
<li>
Menu item 1.1
<ul>
<li>
Menu item 1.1.1
</li>
</ul>
</li>
</ul>
</li>
<li>
Menu item 2
<ul>
<li>
Menu item 2.1
<ul>
<li>
Menu item 2.1.1
</li>
</ul>
</li>
</ul>
</li>
<li>
Menu item 3
<ul>
<li>
Menu item 3.1
<ul>
<li>
Menu item 3.1.1
</li>
</ul>
</li>
</ul>
</li>
</ul>
.nav > li ul {
display: none;
}
.nav li:hover > ul {
display: block;
}
I am getting a problem when hovering on a link. the unordered list .shownav is not displaying. I am not sure if have declared the correct selector in my CSS. please help.
.shownav {
display: none;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background: #1a1a1a;
right: 20px;
top: 45px;
min-width: 20%;
border-radius: 20px 0 15px 10px;
z-index: 99999;
}
.shownav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
.promainlink:hover {
text-decoration: none;
color: #FFB600;
}
.promainlink:hover .shownav {
display: block;
}
<div class="mainnav">
<ul class="mainul">
<li>
<span class="promainimg"><img src = "./images/profilepic.jpg" alt=""
style="border-radius:17px;height=26px;width:26px"></span>
<a class="promainlink" href=""> User <i class= "glyphicon glyphicon-
triangle-bottom"></i></a>
</li>
<ul class="shownav">
<li><a class="navlinks" href="">View my Profile</a></li>
<li><a class="navlinks" href="">Account Settings</a></li>
<li><a class="navlinks" href="">Sign Out</a></li>
</ul>
</ul>
</div>
Can anyone tells me whats wrong with my CSS? any help will be appreciated.
This has been solved. thanks for all your help. I very much appreciate it.
i have solved the problem on the issue of the ul not displaying by just rearranging the html itself. i simply just put the unordered list .shownav inside the anchor tag. i guess i have to go back to basics and understand the css selectors reference in w3school.
here is how it looks.
<div class="mainnav">
<ul class="mainul">
<li>
<span class="promainimg"><img src = "./images/profilepic.jpg" alt=""
style="border-radius:17px;height=26px;width:26px"></span>
<a class ="promainlink" href=""> Waduhek <i class= "glyphicon glyphicon-triangle-
bottom"></i>
<ul class="shownav">
<li><a class = "navlinks" href = "">View my Profile</a></li>
<li><a class = "navlinks" href = "">Account Settings</a></li>
<li><a class = "navlinks" href = "">Sign Out</a></li>
</ul>
</a>
</li>
</ul>
</div>
.shownav{
display:none;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background:#1a1a1a;
right: 20px;
top: 45px;
min-width: 20%;
border-radius: 20px 0 15px 10px;
z-index:99999;
}
.promainlink:hover + .shownav{display:block;}
You should try this
.mainul > li:hover + ul.shownav { display:block; }
You should learn about CSS Selector
https://www.w3schools.com/cssref/css_selectors.asp
.shownav {
display: none;
position: fixed;
padding: 20px;
border: 2px solid #FFB600;
background: #1a1a1a;
right: 20px;
top: 45px;
min-width: 20%;
border-radius: 20px 0 15px 10px;
z-index: 99999;
}
.shownav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
.promainlink:hover {
text-decoration: none;
color: #FFB600;
}
.promainlink:hover + .shownav {
display: block;
}
<div class="mainnav">
<ul class="mainul">
<li>
<span class="promainimg"><img src = "./images/profilepic.jpg" alt=""
style="border-radius:17px;height=26px;width:26px"></span>
<a class="promainlink" href=""> User <i class= "glyphicon glyphicon-
triangle-bottom"></i></a>
<ul class="shownav">
<li><a class="navlinks" href="">View my Profile</a></li>
<li><a class="navlinks" href="">Account Settings</a></li>
<li><a class="navlinks" href="">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
The dropdown-menu is not close to the drowpdown icon. Putting a margin doesn't help.
And how to make the outer color white to black?
.dropdown-toggle {
position: absolute;
display: inline-block;
margin-left: 90%;
top: -50px;
background-color: black;
height: 40px;
width: 40px;
padding-left: 14px;
padding-top: 10px;
}
.dropdown-menu {
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
background-color: black;
}
.dropdown .dropdown-menu li {
background-color: black;
}
.dropdown .dropdown-menu a {
color: white;
background-color: black;
}
.dropdown .dropdown-menu ul {
top: 10px;
}
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bars white"></i>
</a>
<ul class="dropdown-menu">
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>BLOG</li>
<li>CONTACT</li>
<li><i class="fa fa-search" title="fafa"></i></li>
</ul>
</li>
Well, try inline style, not advisable tho, but you can create a custom class on dropdown-menu and copy my inline style and target, also add important to the styles so it would override the default bootstrap style,and your question looks a little confusing in the sense that from the code snippet ran below it shows a different thing from the snapshot you shared, but I think I understand what you mean.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bars white"></i>
</a>
<ul class="dropdown-menu" style="width:100px;position:absolute;margin-top:-20px;padding-top:20px;"> //adjust this until it fits your taste
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>BLOG</li>
<li>CONTACT</li>
<li><i class="fa fa-search" title="fafa"></i></li>
</ul>
</li>
and for the color inspect element from your browser,
find the div from the style and element column in the inspector and change border-top to black like this <div style="border-top:1px solid #000;"></div> from your code on code editor. Happy coding.
I'm currently using the AdminLTE template.
But I'm struggling with a third level menu. I've just tried with and without this plugin I'm using and I cannot figure out what I'm doing wrong, because my third level menu does not show up.
Here's the jsfiddle.
And also a image that shows what's going on.
I've read that since bootstrap 3 the dropdown-submenu was implemented, and I've tried to use it, without any success.
<ul class="dropdown-menu">
<li>Login</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
</ul>
</li>
</ul>
I've searched around google and I found this example, which is the one I'm trying to implement.
As far as I know, bootstrap3 has no default multi-level dropdown functionality. What you are using as markup is taken from this "extension".
You are simply lacking the according CSS for this dropdown solution:
Add this to your stylesheet:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
Your updated fiddle
I would like to have a long border underneath my menu UL, but the "border-bottom" property on the list items does not work well:
#headermenu {
height: 40px;
background: #f47a20;
position: relative;
}
#headermenu .menu {
background: #F47B20;
float: left;
border: 1px solid #D66C1C;
padding: 0.6em 1em;
margin-top: 0.5em;
list-style-type: none;
}
#headermenu-left {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 70%;
margin: 0;
}
#headermenu-left .menu {
border-bottom: 4px solid #004B8D;
}
<body>
<div id="headermenu">
<ul id="headermenu-left">
<li class="menu">
Link 1
</li>
<li class="menu">
Link 2
</li>
<li class="menu">
Link 3
</li>
<li class="menu">
Link 4
</li>
<li class="menu">
Link 5
</li>
<li class="menu">
Link 6
</li>
</ul>
</div>
</body>
The border is interrupted at the corners by -I guess- the border-left and border-right properties not being there?
I can't put it on the <ul> element, because then the line runs too long.
You can put it on the UL if you get rid of the width on it. Remove your last rule and use this:
#headermenu {
height: 40px;
background: #f47a20;
position: relative;
}
#headermenu .menu {
background: #F47B20;
float: left;
border: 1px solid #D66C1C;
padding: 0.6em 1em;
margin-top: 0.5em;
list-style-type: none;
}
#headermenu-left {
padding: 0;
position: absolute;
top: 0;
left: 0;
margin: 0;
border-bottom: 4px solid #004B8D;
}
<body>
<div id="headermenu">
<ul id="headermenu-left">
<li class="menu">
Link 1
</li>
<li class="menu">
Link 2
</li>
<li class="menu">
Link 3
</li>
<li class="menu">
Link 4
</li>
<li class="menu">
Link 5
</li>
<li class="menu">
Link 6
</li>
</ul>
</div>
</body>
The problem, as you suggest, is the missing left and right borders, which have a width, but no color, so this distorts the appearance of the bottom border with the illusion of a missing notch.
To solve this you can simply define border-width: 0 for the element, and allow the border-bottom property to override that setting.
#headermenu {
height: 40px;
background: #f47a20;
position: relative;
}
#headermenu .menu {
background: #F47B20;
float: left;
border: 1px solid #D66C1C;
padding: 0.6em 1em;
margin-top: 0.5em;
list-style-type: none;
}
#headermenu-left {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 70%;
margin: 0;
}
#headermenu-left .menu {
border-width: 0;
border-bottom: 4px solid #004B8D;
}
<body>
<div id="headermenu">
<ul id="headermenu-left">
<li class="menu">
Link 1
</li>
<li class="menu">
Link 2
</li>
<li class="menu">
Link 3
</li>
<li class="menu">
Link 4
</li>
<li class="menu">
Link 5
</li>
<li class="menu">
Link 6
</li>
</ul>
</div>
</body>
Unfortunately this is how borders work. Those are the ends of your border-left, and border-right. Here's a work around though, I added a div to the bottom of your list:
(I also removed your width:70%; from your list)
#bluebar {
position:absolute;
bottom:0px;
width:100%;
height:5px;
background-color:blue;
}
http://jsfiddle.net/BjGvp/6/