I'm using superfish menu for the WordPress. I want to add some margin between the menu parent item and its dropdown and want to add an icon on the top of the drop down, so that it looks like following image:
The menu markup is automatically generated by the WordPress so it cannot be changed. I'm trying following CSS but it does not seem to work:
ul > li ul.subs{
margin-top: 10px;
}
ul > li ul.subs:before{
content: " ";
display: block;
height: 10px;
width: 20px;
position: absolute;
top: 0;
background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;
}
Problems:
When I hover, the sub menu disappears
The arrow icon does not appear.
Demo:
http://jsfiddle.net/y9Rk9/
The solution for the problem 2 is change the :before position to relative
The solution for the problem 1 is to make the menu height higher
ul > li ul.subs{
padding-top: 10px;
}
ul > li ul.subs::before{
content: " ";
display: block;
height: 10px;
width: 20px;
position: relative;
top: 0;
background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;
}
http://jsfiddle.net/y9Rk9/11/
Use ul > li ul.subs {padding-top: 10px;} instead margin-top: 10px;
A fiddle.
Related
I am trying to build a main menu navigation with a full width screen drop downs below it. I found an awesome example to build off of, but I cannot seem to figure out how center the main menu items themselves.
Here is what I have so far, See example here : http://codepen.io/ajmajma/pen/ALJbdk .
This works perfectly, however I need those main menu items (home, about, etc..) to be centered.
My first thought was to inline-block them, however this causes some screwy behaviour with the sub menu.
IF I add
.desktop-nav {
text-align: center
}
.menu {
display: inline-block
}
I get the desired centered effect, however the sub menu is confined the the small center size of the ul, and I need it to remain the full width of the page. See behavior here - http://codepen.io/ajmajma/pen/wzYPQm .
Any idea of how to fix this to get desired effect? Thanks!
You could add a text-align:center to the ul and add a display:inline-block to the li. Just remove the float:left from the li and you're good.
.menu > ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
box-sizing: border-box;
text-align:center;
}
.menu > ul > li {
display: inline-block;
padding: 5px;
margin: 0;
}
http://codepen.io/Founded1898/pen/amREJm
I have found the solution to this:
.desktop-nav {
margin-left: 50%;
}
.menu > ul > li > ul {
margin-left: -50%;
}
If you don't want to set the margin in the desktop, you have to create a something like .iWantThisMenuToCenter {margin-left: 50%}and assign it to the <nav> tag.
Im basicly trying to get my span to show on mouseover and that works as intended. What I want to do is get the spans to the correct images, because I plan on filling that list with more stuff.
This is how it looks like now: http://jsfiddle.net/uc8jc/539/
Heres my code:
<ul class="frontpagephotos">
<li>
<img src="http://www.myrtlebeachproduce.com/wp-content/uploads/2013/01/Banana-300x300.jpg" alt="Jogginglarms armband" />
<span>Jogginglarms armband</span>
</li>
<li>
<img src="http://www.myrtlebeachproduce.com/wp-content/uploads/2013/01/Banana-300x300.jpg" alt="Jogginglarms armband" />
<span>Jogginglarms armband</span>
</li>
</ul>
$(document).ready(function(){
$("span").hide();
$(".frontpagephotos").on("mouseenter", "li", togglePhotos);
$(".frontpagephotos").on("mouseleave", "li", togglePhotos);
function togglePhotos() {
$(this).find("span").slideToggle("fast");
}
});
and the css:
ul.frontpagephotos li{
display: inline;
}
ul.frontpagephotos li img{
border: 2px solid black;
position: relative;
}
ul.frontpagephotos span{
position: absolute;
color: rgb(255, 255, 255);
background-color: rgb(0,0,0);
opacity: 0.5;
width: 18em;
margin-top: -2.5em;
padding: 0.5em;
display: block;
text-align: center;
}
Appreciate any answers, cheers!
Your span has the position: absolute property, so it's positoned relative inside the next parent with position: relative. It should be positioned relative inside the li, but actually the next parent with position: relative is the body (or window?).
The simple solution: Change your CSS code to this:
ul.frontpagephotos li {
display: inline-block;
position: relative;
}
When the li has position: relative, the span is positioned relative inside the li. You also need block or inline-block in order to be able to set position: relative.
That's it! Working fiddle: http://jsfiddle.net/uc8jc/545/
You could use hover instead, and just pass $(this) into the functions for on and off states:
$(document).ready(function(){
$('span').hide();
$("img").hover(function(){
togglePhotos($(this));
},
function(){
togglePhotos($(this));
});
function togglePhotos(obj) {
obj.next().slideToggle();
}
});
http://jsfiddle.net/uc8jc/544/
Is it possible to combine all the text in one. Below I gave an example of how not right. I would like to make the word "ОН" was common cause with the text below.
I would like to like this: https://www.dropbox.com/s/e3qzv55rbopefet/good.png?dl=0
Roughly speaking I need a div with the attribute "el", to connect with the upper elements. Possible and through js, if there is a solution ... but these attributes are not lost. Thank you!
http://jsfiddle.net/syxc5yv4/
#content-area {
visibility: visible;
position: relative;
z-index: 1;
left: 0px;
-webkit-column-width: 595px;
-webkit-column-gap: 99px;
top: 0px;
}
#content-area > div {
display: inline;
}
#content-area > div div {
white-space: normal;
text-indent: 30px;
}
Add display:inline to the #content-area > div div class
#content-area > div div {
white-space: normal;
display: inline;
padding-right: 5px;
}
FIDDLE
I need to assign .dropdown .has-panel ul .dd-panel:nth-child(2) different top:x values but it seems my nth-child is not working correct as i may be doing something wrong.
fiddle sample http://jsfiddle.net/Ed9nk/4/
I need to align Level 3/ Grand Child menus at top of the container like level 2 /Child menus so that respective level3 me menus always show at top.
i added following css
/* has set top: -64px; manually so that Parent One > Child Menu> Grand Child align to top*/
.dropdown ul ul .dd-panel {
background: none repeat scroll 0 0 red;
border-left: 0px solid #30a784;
border-right: 0px solid #008438;
bottom: 0;
display: none;
font-size: 11px;
height: 100%;
left: 175px;
line-height: 15px;
min-height: 100px;
padding: 10px;
position: absolute;
text-align: justify;
top: -64px;
width: 400px;
}
.dropdown .has-panel ul .dd-panel:nth-child(2)
{
top: -64px;
background-color:green;
}
.dropdown .has-panel ul .dd-panel:nth-child(4)
{
top: -164px;
background-color:yellow !important;
}
My simple question is i always want Image & Text related to level 2 or level 3 menus to show up as top, i tried so many thing but nothing is working finally if thought of working with nth-child but i am not abel to get it right may be mixed up elements.
Based on your Image you have added in your question, I am going to give the solution. Update your CSS like below.
ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel
{
margin-top: -90px;
background-color:green !important;
}
DEMO
I am using Bootstrap 3 dropdown-menu inside a dynamically generated container. The dropdown-menu appears behind the newly generated elements. See image reference.
container item position: relative; z-index: 1;
dropdown-menu position: absolute; z-index: 10000;
I also did test btn-group with a higher z-index and it did not work.
Here is a working fiddle http://jsfiddle.net/sGem8/
You don't need to add z-index property.. Simply remove it and it will work..
i.e.
#container > li {
display: block;
border-radius: 3px;
position: relative;
padding: 15px;
background: #ecf0f1;
margin-bottom: 15px;
}
Working Fiddle
I have faced the same issue.
Inside the main container which had all the nav-items, I had every outermost div items as position: relative
Only the dropdown menu had position: absolute
To make the dropdown appear above all items, add
.dropdown{
position: absolute;
z-index : 999; //some high value
}
and other items in the container have
.outer-divs{
position: relative;
z-index: 1; //some low value
}
If you still find your dropdown to behave not as expected,
try setting the div item that opens the dropdown when clicked to
.dropdown-container{
position :static;
}
Most people will find the last trick to be the most valuable.
Hope this helps.
Modify the below css in your styles
#container > li {
display: block;
border-radius: 3px;
position: relative;
/* z-index: 0; */
padding: 15px;
background: #ecf0f1;
margin-bottom: 15px;
}