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%);
}
Related
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%;
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.
I'm working on a new HTML5 CSS3 template which features a parallax scrolling header, as well as sticky navigation menu and a scroll to top link.
I've gotten the elements working individually, however, there are a few CSS rules for the parallax header which are breaking the sticky navigation and scroll link, and it's doing my head in!
The CSS rule:
html {
height: 100%;
overflow: hidden;
}
Breaks the ability to use Javascript/jQuery scroll events
$(window).scroll(function() {
alert("Hello!");
});
Never fires the event, but commenting out the CSS rules and it works.
Secondly, the parallax effect requires the CSS perspective rules set, and these seem to break position:fixed
body {
-webkit-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
These rules prevent any element from being position:fixed, such as the sticky navigation and the scroll to top link.
I'm looking for solutions which allow for all three elements to work together. I'd rather try and avoid doing the parallax in jQuery changing the background-position property, but if that is the only way then that's what I'll have to do.
Open to any suggestions.
I've a working example on CodePen to play with - https://codepen.io/timtrott/pen/vZVOwq
I've left the rules commented out so you can see how the sticky nav and scroll to top links work. Uncomment the rules and the header work nicely, but not the navigation or link.
Thanks in advance for any suggestions :)
Updated:
Change it from:
header::before {
position: absolute;
}
to:
header::before {
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
-moz is for Mozilla;
-webkit is for Chrome.
Hope it should work.
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.
I am trying to create and facebook like panels so tried to use Panels from JQuery mobile link
then i make the header and footer position to fixed and disabled the data-animate.Know the issue is when i open/close the panel its flickers is also applied ui-panel-wrap-content position to fixed when panel is opend and position to absolute when panel is closed so only the panel can be scrolled and not the page content.
Can any one tell me how to stop flickering.
Any idea is appreciated.
Thanks in advance.
Add this css
.ui-page {
-webkit-backface-visibility: hidden;
}
You can try by using the following code
.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page
{
overflow: visible;
}
Also add the following code in manifest file
android:hardwareAccelerated="false"
Hope it will help.
You can preload the side panel content. This smooths the transition and removes any delay in loading the panel. This then means the white background never shows.
I'll update later with the code required to do the preload.