Curved Menu Responsive possible? - javascript

a client wants his old menu in his website re-design I should make for him. It looks like this:
Curved Menu
I tried some code with svg etc but I didn't get it to work.
Is it even possible to make a navigation/menu like this responsive?
Maybe you can help me out with a little hint or something. Would be glad about it!
Thanks in advance.

Yes, you could use the SVG. Then, you could set its z-index higher, this way you will bring it to front in page. The menu will have a z-index lower than the SVG. Each item of menu will have a transform: translateY() moving it up. So you will position each of them differently. Lastly, you will modify the height of each item in order to compensate the transform displacement.
Like this:
.item1 {
transform: translate(-20px);
height: 100px;
}
.item2 {
transform: translate(-40px);
height: 120px;
}
.item3 {
transform: translate(-60px);
height: 140px;
}
Hope it helps.

Related

Owl Carousel | How To Change Size Of .Item Using CSS

Good morning evening or afternoon,
Not too long ago I made some code that takes the fourth .item of the carousel and gives it a new class.
Owl Carousel: How to change the size of the fourth item
Now I'm trying to make the selected .item bigger than the rest and centered using CSS with no luck.
This is the reference I'm working with :
Reference Design:
I've tried using `display: flex` and `flex-grow:1`<br>
and `position:relative` `position:absolute` too.
any idea on how to tackle this?
Thanks :D
.your-item {
transform: scale(1.1);
transform-origin: 50% 50%;
}
should fix your problem. Obviously, you want to change scale factor from 1.1 to whatever makes sense for your example.
If you want the transform origin to be at the bottom, use transform-origin: 50% 100%;

sliding menu body wont collapse

i found this half page sliding menu and i think it it really cool. But i noticed that a part of the menu stays hidden behind the main body. And since i am still a beginner with all this i hope you could help me figure out what is wrong here.
I would like to see it happen so that when the menu slides open, the two sections appear, on the left is the realy menu part, and on the right is the adres part.
But if the screen isnt wide enough the menu part collapses on top and the adres part goes to the bottom..
I think it has something to do with the:
<div class="cd-half-block">
.cd-half-block {
width: 50%;
float: left;
}
But i cant figure it out! Pls help me..
I placed it on JSfiddle
jsfiddle
add jquery cdn
change this css:
.navigation-is-open main {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}

Large mysterious margin on push in menu

I have implemented a "push-in menu" mobile menu to a very basic site structure.
The menu is based on http://callmenick.com/post/slide-and-push-menus-with-css3-transitions
For some odd reason, when I click on the "Push right" button the menu has a large margin to the right. I am not sure why this is happening or how to fix it. It works fine in IE11 but not in Chrome v52.
An example of the problem can be found here: http://seyoum.net/playground/1/
I have tried to use the DevTools to pinpoint any CSS or markup that may cause the problem without any luck.
What is causing this and how can I fix it?
This is what it should look like and what it looks like in IE 11:
And this is the problem and what it looks like in Chrome:
You've set your main wrapper to move -300px in the CSS, but you only want your menu to move. Remove this...
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
#media all and (min-width:320px) {
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
}
}
A jsFiddle (free tool) would be nice next time, I used your link to make one here. It does make it very much easier to answer questions. People who click on the question can look, solve, and test the solution quickly to make sure they really made a valid correction.
Turns out, I forgot a closing tag for the #page. I am so embarrassed. I shall check my markup thoroughly next time.
The reason for the blank space is that you have the following CSS rules (prefixed variants omitted for brevity):
.overlay-wrapper.has-push-right
{
transform: translateX(-300px);
}
.push-menu--push-right.is-active
{
transform: translateX(0);
}
.push-menu--push-right
{
transform: translateX(300px);
position: absolute;
width: 300px;
right: 0;
}
The last set of rules places the menu "to the right" of the container. The second rule resets the translate, and puts it back inside the container. The first one moves the whole thing to the left.
Remove the second one and you should be all set.

CSS - Android browsers scrolling too much

so I made this tiny little page. www.farley.cz
It's using jQuery's load function to switch content in div. That's the whole functionality.
Now, the idea is that this containing div is in the middle of the screen. I've used the negative margin method.
#mydiv {
position:relative;
top: 50%;
left: 50%;
width: 880px;
height: 476px;
margin-top: -238px;
margin-left: -440px;
}
I'm happy how it looks on desktop, but on Andoid, it behaves strangely. I'm experiencing scroll drifts (link highlight drawn outside of image), strange little jumps as I'm zooming in and zooming out. ...and when I flip the phone horizontally, the div scrolls down out of the picture.
is there away to fix this? Or should I find a better method for such a centering?
Kind regards,
Martin.

Rotate content around a central pivot in html5

So Im a graphic desinger and I've been asked to develop a concept for a client's new site. Its a micro-site with limited amounts of content. The idea I have come up with is to place all the sections of the site on divs and then rotate them like a wheel when a user clicks a menu link. What I need to find out is this: Is it possible to rotate entire divs containing normal content around a central pivot point using html5? The rotation needs to be animated the content contained in each rotated div needs to rotate in unison with its container div. If it is possible, how?
I've googled it and found examples of rotating stuff with CSS3 and I've seen html5 transformations but Im not sure I have seen anything this sophisticated before and I can't find any examples to work off. So Im a little concerned its not actually possible for some reason. Im also open to using something like javascript to make this happen.
You can do something like this:
HTML
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
CSS
.container {
transition: transform 1s;
transform: rotate(0);
position: relative;
}
.container>div {
position: absolute;
}
.container.second {
transform: rotate(120deg);
}
.container.third {
transform: rotate(240deg);
}
.container .first {
bottom: 0;
right: 0;
transform: rotate(120deg);
}
.container .second {
left: 0;
right: 0;
transform: rotate(240deg);
}
You can add some simple js to change the container current class.

Categories

Resources