How to make dropdown box to open upward direction [duplicate] - javascript

I've created a dropdown menu with pure CSS and I've gotten it to a place that I like except I want it to be "drop-up" not "drop-down" since the menu bar is going at the bottom of the layout. What I need to add or change to make it "drop-up"?
#menu * {
padding:0;
margin: 0;
font: 12px georgia;
list-style-type:none;
}
#menu {
margin-top: 100px;
float: left;
line-height: 10px;
left: 200px;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover { background: #B0BD97;}
#menu ul li ul li a:hover {
background: #ECF1E7;
padding-left:9px;
border-left: solid 1px #000;
}
#menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
}
#menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
}
#menu li {
position:relative;
float:left;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {
display:none;
list-style-type:none;
width: 140px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display:block;
}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
<div id="menu">
<ul>
<li><center>Home</center>
<ul>
<li>About Us</li>
<li>Disclaimer</li>
</ul>
</li>
<li>
<center>Practice Areas</center>
<ul>
<li>Civil Law</li>
<li>Criminal Law ›
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>Wordpress</li>
</ul>
<li>Family Law ›
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>Wordpress</li>
</ul>
<li>Personal Injury ›
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>Wordpress</li>
</ul>
<li>Traffic Offenses ›
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>Wordpress</li>
</ul>
<li>FAQ </li>
</ul>
</li>
<li><center>Attorney</center>
<ul>
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
</ul>
</li>
<li><center>Contact Us</center>
<ul>
<li>Locations ›
<ul>
<li>Rockville Office</li>
<li>Frederick Office</li>
<li>Greenbelt Office</li>
</ul>
<li>Phone Directory</li>
<li>Mailing Address</li>
</ul>
</li>
<li><center>Resources</center>
<ul>
<li>Helpful Links</li>
<li>Affiliates ›
<ul>
<li>Healthcare Providers</li>
<li>Insurance Companies</li>
</ul>
</li></ul>
<li><center>News & Events</center>
<ul>
<li>Press Articles</li>
<li>Newsletter</li>
<li>Events</li>
<li>Blog</li>
</ul>
<li><center>Espanol</center>
<ul>
<li>X</li>
</ul>
</ul>
</div>

Add bottom:100% to your #menu:hover ul li:hover ul rule
Demo 1
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
bottom: 100%; /* added this attribute */
}
Or better yet to prevent the submenus from having the same effect, just add this rule
Demo 2
#menu>ul>li:hover>ul {
bottom:100%;
}
Demo 3
source: http://jsfiddle.net/W5FWW/4/
And to get back the border you can add the following attribute
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}

If we are use chosen dropdown list, then we can use below css(No JS/JQuery require)
<select chosen="{width: '100%'}" ng-
model="modelName" class="form-control input-
sm"
ng-
options="persons.persons as
persons.persons for persons in
jsonData"
ng-
change="anyFunction(anyParam)"
required>
<option value=""> </option>
</select>
<style>
.chosen-container .chosen-drop {
border-bottom: 0;
border-top: 1px solid #aaa;
top: auto;
bottom: 40px;
}
.chosen-container.chosen-with-drop .chosen-single {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-image: none;
}
.chosen-container.chosen-with-drop .chosen-drop {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: none;
margin-bottom: -16px;
}
</style>

Related

Can't get sidebar nav to display properl

I can't get my child <ul> to display properly. When the dropdown is open, it displays underneath the rest of the menu. What I want is the rest of the <li> to move down to make room for the dropdown.
HTML:
<ul class="nav">
<li>One</li>
<li>Two
<ul>
<li>Two One</li>
<li>Two Two</li>
</ul>
</li>
<li>
Three
<ul>
<li>Four</li>
<li>Five</li>
</ul>
</li>
</ul>
CSS:
.nav {
width: 250px;
font-size: 18px;
color: white;
list-style: none;
display: block;
z-index: 2;
}
.nav li {
background-color: #000;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav li:hover {
background-color: #008cba;
}
.nav ul {
display: none;
font-size: 16px;
z-index: 3;
}
.nav ul li {
background-color: #cccccc;
color: #000;
border-bottom: #464646 solid 1px;
}
.nav ul li:hover {
background-color: #464646;
}
.active {
display: initial!important;
tranistion: 0.5s;
}
jQuery:
$(document).ready(function() {
$("ul.nav li ").click(function() {
$(this).find("ul").toggleClass("active");
});
});
You should:
Add "position: relative" to your ".nav ul"
Remove "height: 40px" from your ".nav li"
Change in your ".active" class from "display: initial !important" to "display: block !important"
Here are the relevant classes:
.nav li {
background-color: #000;
display: block;
line-height: 40px;
text-align: center;
}
.nav ul {
display: none;
font-size: 16px;
z-index: 3;
position: relative;
}
.active {
display: block !important;
transition: 0.5s;
}

slideToggle() not working withe <ul>

I am trying to use slideToggle() function to create a submenu but it's not working. I saw some examples and it was on <div>s not <ul>s so it's only working with <div>s ? Here's my code on fiddle : Fiddle
I am inserting the <script> tags correctly in my HTML and my other jQuery codes run correctly.
You are missing jQuery library in your fiddle. Also there is a typo in your code, callback function should be function() not Function()
$(document).ready(function() {
$('.mainmenu').click(function() {
// ----^----- f should be small letter
$('.submenu').slideToggle('fast');
});
});
.mainmenu {
cursor: pointer;
color: #ffffff;
text-align: center;
display: block;
}
.mainmenu p {
font-size: 20px;
line-height: 10px;
}
.submenu {
list-style-type: none;
padding: 0;
text-align: center;
border: 2px solid black;
border-top: 0;
border-radius: 0 0 10px 10px;
background-color: #464646;
width: 90%;
margin: 0 auto;
margin-bottom: 5px;
display: none;
}
.submenu li {
border-bottom: 2px solid white;
}
.submenu li:last-child,
.submenu li:last-child a:last-child {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
.submenu a:hover {
background-color: aliceblue;
color: #000000;
}
#sidebar {
background-color: white;
float: right;
}
#sidebar>ul {
list-style-type: none;
margin: 0;
padding: 20px;
}
#sidebar>ul >li {
position: relative;
width: 21em;
background-color: #1a8891;
border: 2px solid #0c383a;
margin-bottom: 5px;
border-radius: 20px;
}
#sidebar a:link,
#sidebar a:visited {
display: block;
position: relative;
width: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
}
#sidebar li:hover {
background-color: #156b72;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="mainmenu">
<div class="arrow-up"></div>
<p>Text</p>
</li>
<ul class="submenu">
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
</div>;

Blank Page On Right Side After Nav Bar

Sorry if this topic has been discussed too much. I created a navigation menu that will appear on the screen when the vertical scroll 100px and I managed to make it out of the tutorial from the internet. however I found that there is a blank page on the right side of the screen by approximately 5 times the size of the current screen.
Here is the HTML:
<header>
<div>
<ul>
<li style='margin-left:30px;'><a href='index.php'>Beranda</a></li>
<li><a href='#'>Tutorial ▾</a>
<ul class='sub-menu'>
<li><a href='#'>CSS</a></li>
<li><a href='#'>HTML5</a></li>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
<li><a href='#'>Web Design ▾</a>
<ul class='sub-menu'>
<li><a href='#'>Blogger Template</a></li>
<li><a href='#'>Menu Navigasi</a></li>
<li><a href='#'>Responsive Design</a></li>
<li><a href='#'>Codding</a></li>
</ul>
</li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</header>
Here is the CSS:
header {
position: fixed;
top: 0;
display: none;
width: 100%;
margin: 0;
height: 30px;
background-color: rgba(238,238,238,0.8);
z-index:100;
font-family:'Oswald', Arial, sans serif;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}
header ul, header ul ul.sub-menu {
padding:0;
margin: 0;
}
header ul li, header ul ul.sub-menu li, header ul ul.sub-menu ul.sub-sub-menu li {
list-style-type: none;
display: inline-block;
margin:0;
padding:0;
}
header ul li a {
padding:0 5px;
display: inline-block;
height: 30px;
text-align: left;
line-height: 30px;
text-decoration: none;
color:#333;
font-size:20px;
}
header li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li ul.sub-menu li a {
display: inline-block;
background: rgba(238,238,238,0.8);
color: #333;
height: 30px;
line-height: 20px;
font-size:14px;
font-weight:300;
min-width: 160px;
padding: 5px;
border-bottom: 1px solid #333;
}
header ul li ul.sub-menu li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li ul.sub-menu li ul.sub-sub-menu li a {
display: inline-block;
background: rgba(238,238,238,0.8);
color: #333;
height: 30px;
line-height: 20px;
font-size:14px;
font-weight:300;
min-width: 160px; padding: 5px;
border-bottom: 1px solid #333;
}
header ul li ul.sub-menu li ul.sub-sub-menu li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li {
position: relative;
}
header ul li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
header ul li:hover ul.sub-menu {
display: inline-block;
text-decoration: none;
font-weight:300;
}
header ul li ul.sub-menu li ul.sub-sub-menu {
display:none;
position: absolute;
top:0;
left: 100%;
width: 100px;
}
header ul li ul.sub-menu li:hover ul.sub-sub-menu {
display: inline-block;
text-decoration: none;
font-weight:300;
}
Here is the JS:
$(window).scroll(function () {
if ( $(this).scrollTop() > 100 && !$('header').hasClass('open') ) {
$('header').addClass('open');
$('header').slideDown();
} else if ( $(this).scrollTop() <= 100 ) {
$('header').removeClass('open');
$('header').slideUp();
}
});
I want to ask, if there are any errors in the CSS that I made?
Thank you for your help.
* sorry I was not very good at speaking English
It looks as though it works in this fiddle. I just added a declaration of body height like this:
body {
height: <any height greater than 100px>;
}
I think maybe a bit more info is needed to see what you are talking about. Do you have this page live somewhere? Even a slightly more complete picture of the html that you are working with. I can't see the 'blank area' you are talking about here.

How can I have white urls in all the selected li-s?

I made a jQuery vertical drop down menu and I want to have white urls in all li-s hovered, not just the last one.
HTML:
<div class="left_menu">
<ul class="menu">
<li>
Categories
<ul>
<li>Add category</li>
<li>Manage categories</li>
</ul>
</li>
<li>
Galleries
<ul>
<li>Add gallery</li>
<li>Manage galleries</li>
</ul>
</li>
<li>
Pages
<ul>
<li>
Add page
<ul>
<li>Add page</li>
<li>Manage pages</li>
</ul>
</li>
<li>Manage pages</li>
</ul>
</li>
<li>Settings</li>
</ul>
</div>
CSS:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.left_menu {
width: 219px;
}
.menu li {
font-weight: 300;
font-family: verdana;
font-size: 12px;
border-bottom: 1px solid #222222;
border-right: 1px solid #222222;
background-color: rgba(0,0,0, 0.2);
}
.menu li:hover {
background-color: rgba(0,0,0, 0.4);
}
.menu li:last-child {
border-bottom: none;
}
.menu li a {
text-decoration: none;
display: block;
color: #666666;
padding: 10px 15px;
}
.menu li a:hover {
color: #ffffff;
}
.menu li ul {
display: none;
position: absolute;
margin: -34px 0 0 219px;
width: 219px;
}
.menu li ul li {
background-color: rgba(0,0,0, 0.2);
}
.menu li ul li:hover {
background-color: rgba(0,0,0, 0.4);
}
jQuery:
$('.menu li').hover(function(){
$(this).children('ul').show();
}, function(){
$(this).children('ul').hide();
});
Please take a look here: JSFiddle
Also if you think you can improve my CSS and jQuery you are welcome. Thank you!
Have a look here http://jsfiddle.net/Xg6jR/3/
What I did was change the hover from on the a tag to the li tag which, and modified the path to be immediate to the a:
.menu li:hover > a {
color: #ffffff;
}
I also added the below line and remove the jQuery all together to make the menu show without javascript.
.menu li:hover > ul {
display: block;
}
Change the CSS to this:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.left_menu {
width: 219px;
}
.menu li {
font-weight: 300;
font-family: verdana;
font-size: 12px;
border-bottom: 1px solid #222222;
border-right: 1px solid #222222;
background-color: rgba(0,0,0, 0.2);
}
.menu li:hover {
background-color: rgba(0,0,0, 0.4);
}
.menu li:hover > a {
color: #fff;
}
.menu li:last-child {
border-bottom: none;
}
.menu li a {
text-decoration: none;
display: block;
color: #666666;
padding: 10px 15px;
}
.menu li a:hover {
color: #ffffff;
}
.menu li ul {
display: none;
position: absolute;
margin: -34px 0 0 219px;
width: 219px;
}
.menu li ul li {
background-color: rgba(0,0,0, 0.2);
}
.menu li ul li:hover {
background-color: rgba(0,0,0, 0.4);
}
You could add this to your CSS:
.menu > li:hover > a, .menu > li > ul li:hover a {color: white}

CSS Jquery vertical navigation menu with horizontal submenus

I'd like to create a navigation menu like this:
|main-item1|
|main-item2| |sub-item1| |sub-item2| |sub-item3|
|main-item3|
|main-item4|
what I see now is this:
|main-item1|
|main-item2|
|sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4|
I've found another question like this here on stackoverflow, but I couldn't manage to adapt the code.
The html code I have is this:
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li>Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
And this is the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative
}
It would be ok to use some jquery plugin, also because I'd like to add some effect on hovering, but I thought it was better to align everything with css first.
Thanks
try this:
#mainmenu>li {
height: 40px;
margin: 5px;
position: relative;
clear:both
}
and float to links:
#mainmenu a {
float:left;
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
overflow: hidden;
}
this is what you may want:
the css:
#mainmenu {
position: fixed;
left: 20px;
top: 50%;
z-index: 999999;
margin-top:-200px;
}
#mainmenu li {
height: 40px;
margin: 5px;
position: relative;
}
#mainmenu a {
background: none repeat scroll 0 0 #333;
color: #fff;
display: block;
font-family: Folio;
font-size: 30px;
padding: 2px 15px;
text-decoration: none;
text-transform: uppercase;
width: 160px;
height: 40px;
/*background: url(Images/dotnav.png) 0 100% no-repeat;*/
/*text-indent: -10000px;*/
overflow: hidden;
}
#mainmenu a:hover,
#mainmenu li.active a {
background-position: 0 0;
}
.submenu
{
list-style-type: none;
position:relative;
float:left;
}
.submenu li
{
display: inline;
float:left;
position:relative;
}
#mainmenu .submenu li{
margin:0px;
}
and the html
<div>
<nav>
<ul id="mainmenu">
<li>Chi siamo</li>
<li>Servizi
<ul class="submenu">
<li>
speciale
</li>
<li>
privati
</li>
<li>
aziende
</li>
<li>
cerimonie
</li>
<li>
consulenza
</li>
</ul>
</li>
<li style="clear:both;">Location</li>
<li>contatti</li>
<li class="last">partner</li>
</ul>
</nav>
</div>
In html I added at "servizi" float left and in css i added :
#mainmenu .submenu li{
margin:0px;
}
So they are now at the same level.

Categories

Resources