I have completed the sidebar menu already but I want it to dropdown coming from the right but mine is coming downwards. I try to search for those whose dropdown list comes out from the right but I can't find a lot of example. Can someone teach me what should I do to make it appear to the right side instead of coming downwards? Thanks in advance
As you can see in my screenshot, my dropdown is coming downwards only, I want it to appear at the right side. How do I do it?
sidebar.blade.php
<!DOCTYPE html>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/test.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li>Deleted Records</li>
<li>Verification</li>
<li>Evalaluation</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
<li>Driver License Class Edit</li>
<li>Language Edit</li>
</ul>
</li>
<li class="dropdown">
Evaluation <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Pending remarks</li>
</ul>
</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
test.css
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
}
#sidebar{
background:blue;
width:200px;
height:100%;
display:block;
position:fixed;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#0000FF;
color:white;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background:white;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#navbar-toggle collapsed{
background:#0000FF;
}
.navbar {
background:#0000FF;
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: white;
background-color: transparent;
}
Here is with working solution for the drop-down menu opening in left instead of in downward position
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#0000FF ;
color:white;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background:white;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#navbar-toggle collapsed{
background:#0000FF ;
}
.navbar {background:#0000FF ;}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: white;
background-color: transparent;
}
.dropdown-menu {
position: absolute;
top: 0;
left: 180px;
min-width: 180px;
}
Feel free if you need any further help
If you want to position the dropdown static, you can set the dropdown to absolute position.
ul{
margin:0px;
padding:0px;
position:absolute;
left:300px; /* adjust the left based on need */
}
If you want to set dynamic position, Calculate the offset and set left position.Set offset dynamically using javascript
Related
I have a problem with dropmenu. I created dropmenu from li:YOU and I want to create dropmenu from li: VIEW and HELP, but every dropmenu is below YOU. I don't know what I should to do that every dropmenu was below YOU, VIEW and HELP. I tried many ways but everything failed. And I have ask, I want to pubblish my question but show information that I have to add more detail.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
nav{
height:100px;
display:flex;
font-size:15px;
align-items:center;
justify-content:center;
text-transform:uppercase;
background-color:blue;
width:100%;
position:relative;
}
nav ul{
display:flex;
}
nav ul li{
list-style:none;
}
nav ul li a{
text-decoration:none;
color:black;
position:relative;
letter-spacing:2px;
padding:20px 20px;
margin:20px 0;
font-weight:bold;
background-color:green;
}
.dropOut .triangle{
width:0;
height:0;
position:absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid red;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain{
width:160px;
position:absolute;
margin-top:20px;
left:50%;
margin-left: -80px;
}
.dropOut{
width:160px;
background-color:yellow;
position:relative;
opacity:0;
}
.dropOut ul {
text-align:center;
padding: 10px 0;
display:block;
}
.dropOut ul li {
text-align: center;
width:160px;
padding: 12px 0 10px 0;
margin: 0px ;
color: red;
}
.dropOut ul li:hover {
background: #0D74FB;
}
nav ul li a:hover{
color:white;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
<nav>
<ul>
<li>View</li>
<li>You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Gallery</li>
<li>Contact</li>
<li>f1</li>
</ul>
</div>
</div>
</li>
<li>Help <div class="dropdownContain1">
<div class="dropOut">
<div class="tringle"></div>
<ul>
<li>Plan</li>
<li>Service</li>
<li>Contact</li>
<li>gallery</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
I am making a menu, but I have a problem with a link.
body,html{
margin:0;
font:1em "open sans",sans-serif;
}
/**************/
/* MENU BAR */
/**************/
.nav-main{
width:100%;
background-color:#222;
height:70px;
color:#fff;
padding-left: 33%;
padding-right: 33%;
}
.nav-main > ul{
margin:0;
padding:0;
float:left;
list-style-type:none;
}
.nav-main > ul > li{
float:left;
}
.nav-item{
display:inline-block;
padding:15px 20px;
height:40px;
line-height:40px;
color:#fff;
text-decoration:none;
}
.nav-item:hover {
background-color:#444;
}
.nav-content{
position:absolute;
top:70px;
overflow:hidden;
background-color:#222;
max-height:0;
}
.nav-content a{
color:#fff;
text-decoration:none;
}
.nav-content a:hover{
text-decoration:underline;
}
.nav-sub{
padding:20px;
}
.nav-sub ul{
padding:0;
margin:0;
list-style-type:none;
}
.nav-sub ul li a{
display:inline-block;
padding:5px 0;
}
.nav-item:focus{
background-color:#444;
}
.nav-item:focus ~ .nav-content{
max-height:400px;
-webkit-transition:max-height 400ms ease-in;
-moz-transition:max-height 400ms ease-in;
transition:max-height 400ms ease-in;
}
<nav class="nav-main">
<ul>
<li>
Search
</li>
<li>
Extra's
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Instructions </li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
try the links using [ctrl + click] to test the links
The "Search" box is working, but if you click on "Extras" --> "Instructions", nothing is happening.
I think that the link in Extra's is preventing it to work.
But without the "Extras" as a link, the menu wont expand.
Add this rule, so that the element is clickable:
.nav-item:focus ~ .nav-content,
.nav-content:hover {
max-height:400px;
-webkit-transition:max-height 400ms ease-in;
-moz-transition:max-height 400ms ease-in;
transition:max-height 400ms ease-in;
}
It is because, you have assigned the event on the focus, it goes off when you try to click on the link.
body,html{
margin:0;
font:1em "open sans",sans-serif;
}
/**************/
/* MENU BAR */
/**************/
.nav-main{
width:100%;
background-color:#222;
height:70px;
color:#fff;
padding-left: 33%;
padding-right: 33%;
}
.nav-main > ul{
margin:0;
padding:0;
float:left;
list-style-type:none;
}
.nav-main > ul > li{
float:left;
}
.nav-item{
display:inline-block;
padding:15px 20px;
height:40px;
line-height:40px;
color:#fff;
text-decoration:none;
}
.nav-item:hover {
background-color:#444;
}
.nav-content{
position:absolute;
top:70px;
overflow:hidden;
background-color:#222;
max-height:0;
}
.nav-content a{
color:#fff;
text-decoration:none;
}
.nav-content a:hover{
text-decoration:underline;
}
.nav-sub{
padding:20px;
}
.nav-sub ul{
padding:0;
margin:0;
list-style-type:none;
}
.nav-sub ul li a{
display:inline-block;
padding:5px 0;
}
.nav-item:focus{
background-color:#444;
}
.nav-item:focus ~ .nav-content, .nav-content:hover {
max-height:400px;
-webkit-transition:max-height 400ms ease-in;
-moz-transition:max-height 400ms ease-in;
transition:max-height 400ms ease-in;
}
<nav class="nav-main">
<ul>
<li>
Search
</li>
<li>
Extra's
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Instructions </li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
add to your css
.nav-content:hover{
max-height:400px;
}
because max-height of nav-content only have 400px when focus .nav-item, if you click in other site .nav-content lost max-height and you didn´t click in link
I am facing the problem that the jquery-tab block my Main menu class="oe_wrapper" that is located on the nav bar id="NavBar". I want the oe_menu can overlay the tabs. Is there any problem with this code? thanks in advance.
http://jsfiddle.net/Sp7Mk/
mark-up:
<div id="NavBar" style="width: 500px; height: 100px; background-color: blue;">
<div class="oe_wrapper" style="background-color: red;">
<ul id="oe_menu" class="oe_menu">
<li>
Main Menu
<div>
<ul>
<li class="oe_heading">
My Account
</li>
<li>Account Information</li>
</ul>
<ul>
<li class="oe_heading">
Forms
</li>
<li>F-1</li>
<li>F-2</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="searchTab">
<ul>
<li>Address</li>
<li>Other</li>
<li>Disabled</li>
</ul>
<div id="tabsAddll">
<p>Address</p>
</div>
<div id="tabsOther">
<p>Other</p>
</div>
<div id="tabsDis">
<p>Disabled</p>
</div>
</div>
js:
$(document).ready(function(){
$( "#searchTab" ).tabs({ disabled: [ 2 ] });
});
css:
*{ margin: 0 auto;}
body {
background:#000000;
}
ul.oe_menu{
list-style:none;
position:relative;
float:right;
clear:both;
left: -400px;
}
ul.oe_menu > li{
padding-bottom:2px;
float:left;
position:relative;
}
ul.oe_menu > li > a{
display:block;
background-color:#717171;
color:#ffffff;
text-decoration:none;
font-weight:bold;
font-size:12px;
/* a link */
width:90px;
height:16px;
padding:1.3px;
margin:1px;
text-shadow:0px 0px 1px #000;
/*opacity:0.8;*/
text-align: center !important;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
position:absolute;
left:1px;
background:#fff;
width:668px;
padding:30px;
}
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul.oe_full{
width:100%;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
text-align: left;
}
li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
width: 150px;
text-align: left;
}
In the line
<div id="NavBar" style="width: 500px; height: 100px; background-color: blue;">
You are explicitly declaring a height for the navbar of 100px, so after 100px it's space in the DOM ends and the next element starts to render. Try changing the height to 175px, for me that put it right underneath your other menu.
I have a demo here to illustrate my problem
http://www.ttmt.org.uk/
It's just a simple nav floated to the right and there is a drop down menu under 'Two'.
The drop down menu contain large buttons and I want the menu to stretch the with of the red bar above.
I got it working by giving the ul of the drop down menu a set with a negative left margin to pull it across.
#nav #topNav ul#fontSubMenu{
background:#e1e1e1;
left:-999em;
position:absolute;
padding:25px 0px 10px 22px;
margin:0 0 0 -784px;
z-index:120;
1width:100%;
width:1028px;
}
In Safari,Chrome (Mac) this seems to work but in Firefox it's a few pixels out.
Can anyone tell me why it's out in Firefox and is this the best way to do this.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
body{
font:1em Helvetica, sans-serif;
color:#555;
}
#wrap{
background:red;
margin:0 auto;
position:relative;
width:1050px;
}
#nav{
overflow:auto;
}
#nav #topNav{
float:right;
}
#nav #topNav li{
float:left;
margin:0 0 0 6px;
}
#nav #topNav li:hover,
#nav #topNav li a:hover{
background:#e1e1e1;
color:#555;
}
#nav #topNav li:hover .subNav{
border-bottom:6px solid #e1e1e1;
z-index:21;
}
#nav #topNav li a{
border-top:6px solid red;
border-bottom:6px solid red;
display:block;
padding:13px 13px;
color:white;
font-size:.98em;
font-weight:bold;
text-decoration:none;
}
#nav #topNav ul#fontSubMenu{
background:#e1e1e1;
left:-999em;
position:absolute;
padding:25px 0px 10px 22px;
margin:0 0 0 -784px;
z-index:120;
1width:100%;
width:1028px;
}
#nav #topNav li:hover ul#fontSubMenu{
left:auto;
}
#nav #topNav li ul#fontSubMenu li{
margin:0 14px 14px 0;
}
#nav #topNav li ul#fontSubMenu li a{
border: 1px solid #f7f7f7;
display:block;
color:#555;
position:relative;
font-size:.98em;
line-height:1.3em;
font-weight:normal;
width:162px;
height:45px;
}
#nav #topNav li ul#fontSubMenu li a em{
position:absolute;
left:75px;
bottom:13px;
width:100px;
font-style:normal;
}
#nav #topNav li ul#fontSubMenu li a:hover{
background:#aaa;
}
</style>
</head>
<body>
<div id="wrap">
<div id="nav">
<ul id="topNav">
<li>One</li>
<li >Two
<ul id="fontSubMenu">
<li><em>Two One</em></li>
<li><em>Two Two</em></li>
<li><em>Two Three</em></li>
<li><em>Two Four</em></li>
<li><em>Two Five</em></li>
<li><em>Two Six</em></li>
<li><em>Two Seven</em></li>
<li><em>Two Eight</em></li>
<li><em>Two Nine</em></li>
<li><em>Two Ten</em></li>
<li><em>Two Eeleven</em></li>
</ul>
</li>
<li >Three</li>
<li >Four</li>
<li >Five</li>
</ul>
</div><!--nav-->
</div><!--wrap-->
</body>
</html>
Why not use absolute positioning? The menu will always be on the same place, right?
ul#fontSubMenu{
left: 0;
top: 58px;
margin: 0;
}
(And remove the left: auto you set on the hover).
Your demo is also off by about 1-2px on Chrome Windows btw.
I have a CSS drop down menu that drops up instead of down. What could be wrong? here is the code and the aspx tags related to the problem. this is inside the master page; also on the pages inside ContentPlaceHolder1 eveything inside tags!
.wrapper {
position:relative; height:25px;
}
.mainmenu {
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}
ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}
ul.menu a {
text-decoration:none;
color:#fff;
padding-left:5px;
position:absolute;
}
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}
ul.menu li.list a.category {
position:absolute;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
}
ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
}
ul.submenu li a.endlist {
background:url(images/bottom1.png);
}
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
}
// and here is the portion of aspx
<div id="slidemenu" >
<ul id="nav">
<li>Home</li>
<li>History</li>
<li>....</li>
<li>Careers</li>
<li>Contact</li>
<li><span> ... </span> </li>
<li class="list">
<a class="category" href="....aspx"> ... </a>
<ul class="submenu" >
<li>1st drop down menu</li>
<li>2nd drop down menu</li>
</ul>
</li>
</ul>
</div>
<!-- ------------ -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
Apply this css to your menu text blocks:
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
You should post some code, but I wrote something that may help:
see it in action:
http://jsfiddle.net/HE8uj/
pasted code:
<div class="menu">
<em>hover me!</em>
<ul>
<li> item one </li>
<li> item two </li>
<li> item three </li>
</ul>
</div>
.menu {
font-size: 12px;
width: 100px;
background: #eee;
border: solid 1px black;
margin:1px;
height:20px;
position:relative;
}
.menu * {
display:block;
padding:0; margin:0;
}
.menu em {
padding:5px;
}
.menu ul {
display:none;
}
.menu:hover ul {
display:block;
position:absolute;
width:100%;
bottom:100%; /* change to TOP and it will drop down */
border:solid 1px black;
background: #fff;
}
.menu li {
padding:5px;
}