I'm trying to make a menu that opens to the right side of the the div that's clicked to activate it. However, I don't understand how I can do the positioning correctly. I would like the bottom of the last li (where I store the submenu options) to be even with the bottom of the div that activates the popout. However, giving is a negative margin
ul.dd{
z-index:100;
position:relative;
margin-bottom:-30px;
display:none;
}
isn't working out. How can I accomplish this
http://jsfiddle.net/mBPfG/1/
Thanks!
Your container div was preventing the hidden <ul> tag from floating to the right of the other. Also added a negative margin-top to adjust positioning.
I have updated the jsfiddle.
I simply added:
.dd_container { width:600px; }
ul.dd{
z-index:100;
position:relative;
margin-top:-60px;
display:none;
}
However, I would suggest nesting your second <ul> within the first <li>.
I have modified the HTML and CSS completely to have a more symatically correct answer.
<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
<li>more options -->
<ul class="dd">
<li>el1</li>
<li>el2</li>
<li>el3</li>
</ul>
</li>
</ul>
<div class="cb"></div>
Less markup is better
View the full jsfiddle.
Related
I would like to add a padding around a text placed inside a div
so that there is some place between the divs border and the text.
I have found an interesting post about that.
But somehow all the given examples expand my div so it does not fit in the entire layout anymore.
I have used that css code for the div:
.cell {
width:30%;
height:100%;
background-color:orange;
outline:10px solid black;
}
That code gives me the following result:
The orange colored area is the div I want to have the text positioned in.
All the solutions keep expanding the div with borders so the layout expands and that is what I am trying to avoid to.
So I have tried to add padding (that should be inside the div):
.cell {
width:30%;
height:100%;
background:orange;
padding: 10%;
}
Gave me the result:
Perhaps the problem is that I am using jQuery BigText to make the text fitting into the div:
jQuery:
$(function() {
$(window).on('resize', function() {
$(".area_competences_text").bigText();
});
$(window).trigger('resize');
});
Html:
<div class ="cell">
<div class="area_competences_text text_software">
<div class="referencesProductHeader">
HEADER TEXT
</div>
<ul class="listStyle">
<li>Some Text</li>
<li>Some Text</li>
<li>Some Text</li>
<li>Some Text</li>
<li>Some Text</li>
</ul>
</div>
</div>
You are probably looking for box-sizing:border-box, it makes the element include the padding in the width so it dosent expand on extra added padding.
Code:
.cell {
box-sizing:border-box;
width:30%;
height:100%;
background:orange;
padding: 10%;
}
Example
This is the expected behavior. You may want to learn about the CSS box model.
Basically, width and height are not the total width and height of the div. Padding, borders, and margin all need to be accounted for when calculating how big you want the div.
You can use box-sizing:border-box; to change this, or adjust the width and height values.
I have tried for months to find away of connecting my menu, but frustratingly I've had no luck. I don't know what else I can try so I want to ask you guys if you can help. I searched around here on Stack for an idea, this someway to describe the function I want but I'd like to utilise the data-attribute way instead of href and I want to use the on click function instead of the hover, as it's for desktop and mobile. I also want to close the submenu with the menu a on desktop version, would toggle be an option?
link: jquery dropdown with separate container
html
<div class="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div class="submenu">
<ul>
<li class="one">content1</li>
<li class="two">content2</li>
<li class="three">content3</li>
</ul>
</div>
content from submenu ul li is set to height:0 that I want to set to auto when triggered, or maybe add a class to the submenu ul li:
.submenu ul li{
display:block;
overflow:hidden;
height:0;
.submenu ul li.active{
height:auto;
}
JS Fiddle
I'm not sure if this is what you want, but try replacing
$(this).attr('data-section').slice(1)
with this
$(this).attr('data-section')
jsfiddle (based in yours)
Just remove the .slice(1). I don't know why you add this one.
when you click on the menu link, jquery will remove active class from list and it will added to a new link related to menu link by data-section.
I'd like the functionality of the Bootstrap tabbable nav but I want to style each tab with a background image and text underneath. In fact, what I'd really like is to just put my photoshop images right in each tab and set the active state to my selected image.
I'm having a very difficult time doing this. Is it going to take a lot of custom work to get this working with this component?
I thought I could just try with some CSS but it's not giving me the correct formatting I want:
ul.nav.nav-tabs li {
display:inline-block;
background:url(../images/skypeIcon.png) no-repeat left center;
background-size:20px auto;
font-size:15px;
padding:2px 0 2px 28px
}
By the way, I'm using Bootstrap 2.3 so I can't use Bootstrap 3 Navbar Generator.
I can use a div tag inside my a tag and put whatever content I want in there.
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>
<img src="<%=context%>/images/defaultAvatar.png"/>
<br/>
Computer
</div>
</a>
</li></ul>
On my website europebathroom.com I have a horizontal main menu. When I hover over one of the menu-items a dropdown appears. When I hover over another menu-item the drop-down of that menu-item appears, as it should of course.
However, I don't want this to happen when you accidentaly quickly touch another menu-item.
I want it to be like the horizontal menu on the following link: badkamerwinkel.nl.
So, there should be a delay in the change of the dropdown by some milliseconds on hover, to avoid annoying situations if you accidentaly touch another menu-item.
Is there a script I can use to do this? I am not very experienced yet, my apologies.
Thank you so much in advance, and please know this is my first post on this great support site, so any criticism and tips are welcome to make my next posts better!
Mike
EDIT:
The menu works approximately like the menu below.
<ul class="main">
<li class="item1">
<div class="submenu1">...</div>
</li>
<li class="item2">
<div class="submenu2">...</div>
</li>
<li class="item3">
<div class="submenu3">...</div>
</li>
</ul>
.submenu1{
display:none;
}
.main .item1:hover .submenu1{
display:block;
}
.submenu2{
display:none;
}
.main .item2:hover .submenu2{
display:block;
}
So if you hover item1 the submenu1 shows, if you hover item2 the submenu2 shows immediately. Is there a way to delay this action by a few milliseconds? Thanks!
You can use JQuery hoverIntent plugin to delay the animations. I have used this to create a similar kind of behavior.
check it out here
<div id="menu">
<ul><li>SocialSpot</li>
<li>Profile</li>
<li>Latest</li>
<li>Settings</li>
<li>Logout</li>
</div>
</ul>
I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?
CSS:
ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/
Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:
li.right { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/
You might want float: right on the css for the logout link.
Like this? http://jsfiddle.net/QAjkP/
You can use an id tag to specify the css properties for that one <li> item