I'm using the following radial menu...
http://www.cssscript.com/demo/radial-popup-menu-with-javascript-and-css3-circlemenu/#
Looks great, however I want two on my page. One bottom right and one bottom left.
That's no biggy, however obviously when on the left of the screen i need the buttons to pop out to the right and visa versa.
my question...
for each of the list items there's a transform in the CSS like...
transform: translate(-144px, 0);
obviously having it as a positive 144 will make it move to the right, which is great when the menu is positioned in the bottom left...
Rather than having to have a left class and right class with essentially the same CSS behind it, just one being positive and the other negative, is there a nice way to have 1 set of css rules that will just translate the li away from the div/screen edge?? or maybe I am thinking about this completely wrong (feel free to say if i am being a numpty)?
thanks
marking as resolved, as per #hissvards comment
"I don't think there's a way to do it using pure CSS, but it would be
dead easy with a preprocessor. - Hissvard"
Related
I have this:
div {
transform:rotateX(120deg);
}
But when I make the transformation it leaves me a white space over the div. How can I make the div to stay at the top.
Pretty sure you are looking for transform-origin.
Something like transform-origin: 0% 33%; works in your case.
jsFiddle here - play around with it.
By default, the origin is set to 50% 50%.
See MDN documentation.
To change the rotation point of an element, you can use transform-origin.
Browser support is limited, and prefixed, so check in here for some more information:
(it will only work in chrome and safari for 3D transformations like this, I believe)
http://www.w3schools.com/cssref/css3_pr_transform-origin.asp
Here is an example:
http://jsfiddle.net/zAZuY/1/
notice how the second div sticks to the top. Also, take note that a 120 degree rotation will begin to flip your element upside down if the origin point is at the top (you are actually seeing the backside of the element at this point)
Something like:
div {
transform:rotateX(120deg);
transform-origin:top left;
}
Best way to grasp this is to pretend the DIV is a piece of paper and you're sticking a nail onto the top left hand side of the paper. Now since you're flipping the paper on the X axis, it uses the top of the paper as the folding point and turns itself around that area.
Remember to declare both the "webkit" and "ms" versions of "transform" and "transform-origin" in your CSS since the vanilla statements haven't been universally adopted yet.
I'm going for a pretty minimalistic look on my site and I was wondering how I could achieve a look like this:
http://iq.gs/cssdropdown
The top left hand corner in the picture would be transparent or a solid color to match the top navigation bar. What I'm looking to do is to show the six different colored boxes as block elements so when someone hovers over the navigation part, the six boxes drop down and can be used as links. I'm not sure how to do this, as I'm a newbie to CSS.
Please help!
Something like this? : http://jsfiddle.net/SpJ5f/
I didn't bother using the colours/fonts etc you asked for, just the idea behind it
So I have a case of client-itus here. The client is whining and my boss is demanding that I add a logo underneath the Archives tab over the banner ad seen, which would break through the structure I've set up. We're two days from launch and I have a choice of either taking precious time away from other work to restructure the layout, or find a way to position that logo without having to futz with the divs. I understand HTML and basic CSS, so I thought I'd see if I could find a better solution before going about this the hard way. Thank you for all your help! The current page can be seen at ctdailydose.com/new
(Just for clarity, what I want to do is add big circular logo on the right that says "Scolari Engineering" without having to rewrite the CSS and change the header's entire structure.)
Just add your image (logo) at the end of the end of the achor in your menu-banner div and position:absolute right:0px top:0px for it in your css. Adjust the position as needed.
I think this will be easier to show you than explain, but basically I am trying to create a transition effect on two separate div tags when the user hovers over one of them. Here's an example I just whipped up. It's not perfect, I'm just trying to figure out how to split the robot in half.
http://color-reel.com/growbot.html
currently, the right half will move when you hover over it, but I want both left halves and the right have to open up so it looks like the robot is coming apart.
thanks in advance for your help!
edit: p.s. something small that annoys me that I don't know if it's "fixable" is if div element slides past the user's mouse when the element is being hovered over, it glitches. is there an easy way to fix this?
Maybe if you nest the divs you might be able to target the parent div.
So you get something like this:
#parent:hover #three,
#parent:hover #four {
....
}
I know that when you set a new css translate you need to the pixels you want to move, ex: 50px,60px.
So that is a relative movement to those pixels: http://jsfiddle.net/8CECx/
The div's remain next to each-other
Is there a way to move absolutly? For example you can say "move to 30px 50px" and have 2 elements overlap?
Thanks for the info :)
Ok, I’m adding another answer, since the question changed.
I’m still not sure what you’re trying to achieve. If you just want the 1st div to move and overlap the 2nd, why animate the 2nd as well? Or if you want both to move, just the 1st one more, why give it the same translateX value?
Also, I don’t see why you need transforms at all for this. If you just need translate() and no other transform, chances are absolute or relative positioning probably works for you just as well (and has much better browser support)