I'm trying to rebuild not copy and paste this website http://paramoredigital.com/ only for learning direction. I have problem with menu transition, more precisely If you click top-right button menu will show up smoothly and I don't know how to do it in my code.
Here is my code https://github.com/Szuchow/paramore-digital.
Click on the X and the menu will appear. The rest is a matter of styling.
$("body").on("click", function() {
$(".menu").addClass("open");
})
body {
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: lightblue;
}
.menu {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: pink;
transition: opacity 1s ease;
width: 100vw;
height: 100vh;
}
.menu.open {
opacity: 1;
}
.toggle a {
font-size: 2em;
text-decoration: none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span class="toggle">X</span>
<div class="menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</div>
Related
I'm trying to create a top navigation that by default is shown as small circles without any text. On hover, I would like the circle in question to grow/expand and the text of the menu item to appear, as well as a dropdown menu if applicable. Ideally with an ease-in/out effect. Also, In the current setup, I'm not quite sure where to place the submenu in the HTML..
image 1: default & on hover appearance
A few requirements:
Circles expand from the center
Submenu appears after parent menu item is done expanding, so with a slight delay
I have a jsfiddle here, but I'm stuck on how to proceed and get the desired effect. Maybe I'm approaching this from a complete wrong angle. Please help!
$(".nav1").hover(function () {
$(".item1").stop(true,true).delay(200).show(100);
}, function () {
$(".item1").stop(true,true).delay(200).hide(0);
});
$(".nav2").hover(function () {
$(".item2").stop(true,true).delay(200).show(100);
}, function () {
$(".item2").stop(true,true).delay(200).hide(0);
});
.navContainer {
display: block;
position: absolute;
width: 100%;
height: 100px;
background-color: #fff;
}
.circleContainer {
float:left;
position: relative;
width: 50px;
padding-bottom: 50px; /* = width for a 1:1 aspect ratio */
margin-right: 10px;
background: transparent;
overflow: hidden;
background-color: #eee;
border-radius: 50%;
}
.circleContent {
position: absolute;
height: 100%; /* = 100% - 2*5% padding */
width: 100%; /* = 100% - 2*5% padding */
padding: 0%;
}
.circleTable {
display: table;
width: 100%;
height: 100%;
}
.circleTableCell {
display: table-cell;
vertical-align: middle;
position: relative;
text-align: center;
font-size: 0.75em;
font-weight: 700;
}
.hide {
display: ;
}
.item1, .item2 {
display: none;
top: 50%;
left: 50%;
vertical-align: middle;
text-align: center;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="navContainer">
<div class="circleContainer nav1">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item1">Item 1</span>
</a>
</div>
</div>
</div>
<div class="circleContainer nav2">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item2">Item 2</span>
</a>
</div>
</div>
</div>
</div>
I got you the following, hope it helps.
part1. the for the circle to scale, use the following on hover:
-webkit-transform: scale(1.75);
transform: scale(1.75);
part2. for the sub menu, you need to add them first then show on hover (you can use the same class you are using for the item1 item2 etc..
You could use js to push away left/right side menu.
$(".nav1").closest('.wraper').hover(function() {
$(".item1").stop(true, true).delay(200).show(100);
}, function() {
$(".item1").stop(true, true).delay(200).hide(0);
});
$(".nav2").closest('.wraper').hover(function() {
$(".item2").stop(true, true).delay(200).show(100);
}, function() {
$(".item2").stop(true, true).delay(200).hide(0);
});
$(".nav3").closest('.wraper').hover(function() {
$(".item3").stop(true, true).delay(200).show(100);
}, function() {
$(".item3").stop(true, true).delay(200).hide(0);
});
.navContainer {
text-align: center;
display: inline-block;
width: 100%;
height: 100px;
top: 50px;
}
.circleContainer {
position: relative;
width: 50px;
margin: 25px;
padding-bottom: 50px;
/* = width for a 1:1 aspect ratio */
background: transparent;
overflow: hidden;
background-color: #eee;
border-radius: 50%;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.wraper:hover .circleContainer {
-webkit-transform: scale(1.75);
transform: scale(1.75);
}
.circleContent {
position: absolute;
height: 100%;
/* = 100% - 2*5% padding */
width: 100%;
/* = 100% - 2*5% padding */
padding: 0%;
}
.circleTable {
display: table;
width: 100%;
height: 100%;
}
.circleTableCell {
display: table-cell;
vertical-align: middle;
position: relative;
text-align: center;
font-size: 0.75em;
font-weight: 700;
}
.item1,
.item2,
.item3 {
display: none;
vertical-align: middle;
text-align: center;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
.wraper {
width: 100px;
display: inline-block;
}
ul {
text-align: center;
width: 100%;
list-style: none;
position: relative;
float: left;
}
ul ul {
display: inline-block;
position: relative;
margin-top: 25px;
margin-left: 25px;
padding: 0;
background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="navContainer">
<div class="wraper">
<div class="circleContainer nav1">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item1">Item 1</span>
</a>
</div>
</div>
</div>
<ul class="item1">
<li>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</div>
<div class="wraper">
<div class="circleContainer nav2">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item2">Item 2</span>
</a>
</div>
</div>
</div>
<ul class="item2">
<li>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</div>
<div class="wraper">
<div class="circleContainer nav3">
<div class="circleContent">
<div class="circleTable">
<a href="/link1" class="circleTableCell">
<span class="item3">Item 3</span>
</a>
</div>
</div>
</div>
<ul class="item3">
<li>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</div>
</div>
I'm designing a simple slide-in menu using JavaScript, HTML and CSS on a mobile device
<div class="menu">division
<ul>unordered list
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>
CSS:
.menu {
position: absolute;
width: 0px;
background: #111;
-webkit-transition: width 2s;
transition: width 0.5s;
}
.menu.act {
position: absolute;
background: #111;
width: 67%;
}
(A simpple bit of JavaScript code changes the menu's class to "menu act")
The question is, why is only the black background sliding in from the left, while the text inside HTML elements stays on the screen?
You aren't moving/sliding the ul at all, just changing the width.
The ul has no width and so no background can show. The text overflows the zero-width element which is why it is still visible.
Then when you expand the width the background becomes visible.
I've switched this to a :hover to demonstrate.
body {
background: red;
}
.menu {
position: absolute;
width: 0px;
background: #111;
-webkit-transition: width 2s;
transition: width 0.5s;
color: white;
}
.menu:hover {
position: absolute;
background: #111;
width: 67%;
}
<div class="menu">
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>
Instead, try leaving the width as 67% and adjust the position..something like this.
body {
background: red;
height: 100vh;
}
.menu {
position: absolute;
top: 0;
left: -67%;
width: 67%;
background: #111;
transition: left 0.5s;
color: white;
}
body:hover .menu {
left: 0;
}
<div class="menu">
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>
OR with a transform then the "positioning" would be automatic.
body {
background: red;
height: 100vh;
}
.menu {
position: absolute;
top: 0;
left: 0;
width: 67%;
transform: translateX(-100%);
background: #111;
transition: transform 0.5s;
color: white;
}
body:hover .menu {
transform: translateX(0%);
}
<div class="menu">
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>
Fiddle.
Description of problem:
When clicking the Click me button, the .list element fades in on top of the Menu button, in spite of it having a lower z-index value. I assume it has to do with inheritance, but I have explicitly specified a higher z-index value for the .keep-on-top element, so I'm confused by the behavior I'm seeing.
Desired outcome:
I would like for the .list element (i.e. the black box) to fade in beneath the menu button but above the blue .header-color div. I welcome any solutions.
Code:
HTML:
<div class="header">
<div class="header-color"></div>
<div class="keep-on-top"><button>Menu</button></div>
</div>
<div class="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<br/><br/><br/><br/><br/><br/>
<button>Click me!</button>
CSS:
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 2;
}
.header-color {
background-color: #0099cc;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1;
}
.keep-on-top {
position: absolute;
color: #fff;
z-index: 4;
}
.list {
background-color: #000000;
position: absolute;
z-index: 3;
color: #fff;
display: none;
}
Remove z-index from class header
I'm developing a Tumblr theme, but I have a problem with jquery.
When I use this bunch code outside of Tumbl it work like a charm, but when I use it on Tumblr nothing happen. How can I make it work on Tumblr too?
How you can see in the fiddle I want to add the class .smaller to the header when the article reach the top of the window.
thanks,
Filippo
// resize the header to small size
$(document).on("scroll", function(){
if
($(document).scrollTop() > $(window).height()){
$("header").addClass("smaller");
updateSliderMargin();
}
else
{
$("header").removeClass("smaller");
updateSliderMargin();
}
});
body {
text-align: center;
margin: 0;
padding: 0;
}
li {
display: inline;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 150px;
background-color: red;
z-index: 99;
opacity: 0.8;
}
header.smaller {
height: 50px;
}
header.smaller ul {
display: none;
}
article {
position: relative;
top: 100vh;
background-color: green;
min-height: 1000px;
z-index: 1;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<header>
<h1>This is the Header</h1>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</header>
<article>
<p>This is the Article</p>
</article>
</body>
Fiddle Demo
http://jsfiddle.net/z3cqkt9a/
In IE or Firefox the site works like this (IE11):
(Tabs are clickable)
but not in chrome. Click on tabs not get fired. I tried to reveal element in Developer Tools, but it reveals #container element instead of the lielement I clicked on.
It looks like the layering of the elements are not the same as you see it and when you raise an event (ex.: click). The first/parent div is the top element and the tabs (li) are nested behind.
Why is it working in IE and Firefox, and why does not in Chrome? What is the differecnce?
$('button').click(function() {
$('.box').toggleClass('flipped');
})
$('li').click(function() {
var text = 'You selected ' + $(this).html();
alert(text);
});
* {
margin: 0;
padding: 0
}
button {
position: fixed;
right: 5px;
bottom: 5px;
}
.box {
position: relative;
width: 300px;
height: 300px;
transform-origin: right center;
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 300ms, transform 500ms ease;
}
.box figure {
position: absolute;
width: 100%;
height: 100%;
transition: visibility 0s ease 140ms;
}
.box:not(.flipped) figure.back {
visibility: hidden;
}
.box.flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.box .front {
background-color: skyblue;
}
.box .back {
transform: rotateY(180deg);
background-color: lightgreen;
}
.box .back .nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32px;
width: 100%;
background-color: skyblue;
text-align: center;
}
.box .back .nav li {
background-color: white;
width: 24%;
display: inline-block;
height: 30px;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='box'>
<figure class='front'>
<p>FRONT SIDE</p>
</figure>
<figure class='back'>
<ul class='nav'>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<div class='content'>
<p>BACK SIDE</p>
</div>
</figure>
</div>
</div>
<button>FLIP</button>
Thanks in advance for any help!
To be 100% saint with your work, wrap your JS code in
$(document).ready(function(){ ... })
Secondly I would not advise to use such big qualifiers $('li'). This will scan every list element in DOM tree-slow and not advised. Here you are interested in list elements from menu only.
I would also find Flip button by id, you have only one button, so it doesn't cost much:)
I would propose something like this :
var navContainer = $('.box > figure.back > ul.nav');
navContainer.on('click', 'li', function(){ ... })
This code should work, even when you add more li items to DOM.
Secondly you could in debug mode find, if this navContainer has been found or not.
I found a workaround for my problem. If I set z-index: 0 and position: relative to body and the body > div then clicks get fired.
SOLUTION : CSS
body, body > div { position: relative; z-index: 0; }
$('button, .front').click(function() {
$('.box').toggleClass('flipped');
})
$('li').click(function() {
var text = 'You selected ' + $(this).html();
alert(text);
});
/*Workaround*/
body,
body > div {
position: relative;
z-index: 0;
}
/************/
* {
margin: 0;
padding: 0
}
button {
position: fixed;
right: 5px;
bottom: 5px;
}
.box {
position: relative;
width: 300px;
height: 300px;
transform-origin: right center;
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 300ms, transform 500ms ease;
}
.box figure {
position: absolute;
width: 100%;
height: 100%;
transition: visibility 0s ease 140ms;
}
.box:not(.flipped) figure.back {
visibility: hidden;
}
.box.flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.box .front {
background-color: skyblue;
}
.box .back {
transform: rotateY(180deg);
background-color: lightgreen;
}
.box .back .nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32px;
width: 100%;
background-color: skyblue;
text-align: center;
}
.box .back .nav li {
background-color: white;
width: 24%;
display: inline-block;
height: 30px;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='box'>
<figure class='front'>
<p>FRONT SIDE</p>
</figure>
<figure class='back'>
<ul class='nav'>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<div class='content'>
<p>BACK SIDE</p>
</div>
</figure>
</div>
</div>
<button>FLIP</button>