As you can see in JSFiddle I have slideout menu. I want to slide or animated left to the right opening "div" on my page center, when someone click menu buttons. I've already searched about that but always saw lightbox but I dont want it. By the way I cannot add JSFiddle link so I have to write it like that. h ttp://jsfiddle.net/ygzsmsk/4b2Zs/
Based on my understanding of your question, I've modified your code a bit.
I understood that you want the first div to move from left to right instead of just the menu.
You need to remove the position CSS attributes from internal elements and add the same to your parent div; in addition, you need to have your JS act on the parent div.
Have a look at this:
.cbp-spmenu-push {
left: -200px;
position: absolute;
}
http://jsfiddle.net/4b2Zs/1/
You can play around with the final arrangements as you see fit.
Related
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I am sorry if this is really a newbie question - or if it is very simple...
I am trying to make a very basic image tooltip based only on CSS ( no JS ).
Fiddle here :http://jsfiddle.net/ufs44/1/
My problem is how to distance the image from the link in order for it not to obscure the text.
I really would like to make it with only CSS (later I will add some transitions) But right now, the tooltip is always hiding the other links below.
Doing position:relative actually makes the whole page "jump" because it is changing from display:none to display:block and the space is missing for the element...
I would like to know how I can make the tooltip to appear ABOVE the link for example, or to the side...
You need to use position: relative; within the link itself, and then position the image tooltip absolutely.
Fiddle
how to distance the image from the link in order for it not to obscure
the text .
Elements with css position:absolute are positioned using css left , right, bottom, top
As the comment - http://jsfiddle.net/5W5bB/1 - using left
left:200px;
I don't know how to formulate my question perfectly, so I made a (quick) example so will illustrate my problem exactly : http://jsfiddle.net/kn5GT/1/
If the last item is near the bottom and you hover it, the submenu will be displayed like the other, but this will extend the height of the page, thus showing the vertical scrollbar of the browser.
I'd like to avoid that by making all dropdown that would extend the height of the page by showing not from the up, but from the bottom (the bottom of the submenu would be near the end).
Is this possible only in CSS or do I have to put some js in it?
this might not be the best solution, but you could fix this with a little help of the css-pseudoclass nth-last-of-type().
I have modified your fiddle (the borders are just there for better visual distinction.)
I just added the following rule:
ul>li:nth-last-of-type(-n+2)>div {
top:auto;
bottom: 50px;
}
Don't get confused by the strange selector, essentially (-n+2) makes the last 2 Submenus pop up from the bottom instead from the top.
On my site : Dev.stevehamber.com
I am trying to get the image "New Page" (currently behind the slider) to be positioned outside it's current DIV, overlapping the top right hand corner, but so that it also moves with the Auto margin of the main content. Can't seem to figure out how, with out it being either behind something or not following the auto margin of the container.
I have also had problems with the :hover attribute. Experimenting with fixed position Divs I have noticed the image/background doesn't change on the bottom right hand corner of the fixed "F", is this something to do with positioning too? :/
I tried Googling this but couldn't explain myself in 1 sentence, so I hope this makes sense. Ha!
Thanks.
In your CSS, add z-index, like this:
img.newpage {
position: absolute;
right: 1px;
z-index: 2;
}
Give the F a high z-index to make it be on top
Put the newpage.png in a div that's on top of the slider div. Put both of those div's inside another div; assign the css auto-margin attributes to this parent div.
So something like
<div id="slider">
<div id="slidercontent"><!-- in here, put the slider -->
</div>
<div id="newpage"><!-- make newpage.png the background image of this-->
</div>
</div>
As for the hover; please explain a bit more thoroughly, it seems to work fine with me. You mean the facebook button right? (its positioned top-left in my FF btw)
I have two buttons in a div with position: fixed; but when you click, the list of options disappeared.
I wrote my code in the link below, you can help me?
http://jsfiddle.net/T9QHw/
Thanks.
The list of options disappear, because you're telling the div to hide everything that goes beyond the div itself using overflow:hidden. Clearly, the dropdown menu is outside of the div.
Remove overflow:hidden and it will work.