CSS transtition on both text and background - javascript

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>

Related

Submenu disconnect on mouseover and cant navigate to submenu as well

I am trying to create a submenu, but had to keep the submenu HTML out of the main menu, and on mouseover it will show hide, but its not working as expected, I think I am not trying with a good approach, can someone look in to this and suggest.
Here is the JSfiddle demo
Notes
1. Problem is, when you mouseover on "Shop" and try to enter submenu, its hiding.
2. I had to keep the submenu html out of the main navigation as submenu has to be in full width.
3. I am also looking to add some transition effects, I know using display none/block, transition will not work but can somebody please suggest?
$('.shop').mouseenter(function(){
$('.primary-subnav').show()
}).mouseleave(function(){
$('.primary-subnav').hide()
});
.nav{float:left; width:100%;}
.primarynav {
list-style: none;
margin: 0;
padding: 0;
font-size: 15px;
text-align: right;
}
.primarynav > li {
list-style: none;
display: inline;
}
.primarynav > li > a {
display: inline-block;
text-decoration: none;
color: #333;
padding: 0 15px;
height: 67px;
line-height: 67px;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
background-color: #c0e5da;
}
.primary-subnav {
position: absolute;
left: 0;
top: 64px;
width: 100%;
border-top: 2px solid #c0e5da;
background-color: rgba(255,0,0,0.9);
min-height: 350px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<ul class="primarynav">
<li>Shop </li>
<li>Nav Item </li>
<li>Nav Item </li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
</div>
<div class="primary-subnav">
<div class="container"> Submenu Wrapper </div>
</div>
you can attach the same event handlers as you have attached to mouseover and mouseleave events of .shop to .primary-subnav.
$('.shop').mouseover(function(){
$('.primary-subnav').fadeIn(1000);
}).mouseleave(function(){
$('.primary-subnav').hide();
});
$('.primary-subnav').mouseover(function(){
$('.primary-subnav').show();
}).mouseleave(function(){
$('.primary-subnav').hide();
});
.nav{float:left; width:100%;}
.primarynav {
list-style: none;
margin: 0;
padding: 0;
font-size: 15px;
text-align: right;
}
.primarynav > li {
list-style: none;
display: inline;
}
.primarynav > li > a {
display: inline-block;
text-decoration: none;
color: #333;
padding: 0 15px;
height: 67px;
line-height: 67px;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
background-color: #c0e5da;
}
.primary-subnav {
position: absolute;
left: 0;
top: 64px;
width: 100%;
border-top: 2px solid #c0e5da;
background-color: rgba(255,0,0,0.9);
min-height: 350px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<ul class="primarynav">
<li>Shop </li>
<li>Nav Item </li>
<li>Nav Item </li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
</div>
<div class="primary-subnav">
<div class="container"> Submenu Wrapper </div>
</div>

Menu transition

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>

Vertically aligned expanding menu item on hover & appearing submenu

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>

Messy mouse events in chrome

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>

CSS and jQuery issues with height of drop down menus

So I've made some drop down menus. The drop downs are ul nested in li. For style reasons I need have the drop down height set to 0px with some padding when the page first loads. All my drop downs have different heights. When I put 100% in as the height to animate too, it does not work.
Here is a link: http://www.jasonfoumberg.com/test/writing.html
How do I get the drop downs to animate to the proper height. Each drop down has a different number of items.
jQuery
$(document).ready(function () {
var defHeight = $('ul:first', this).height();
console.log(defHeight);
$("ul li").hover(
function () {
$('ul:first', this).animate({
height: "100%"
});
}, function () {
$('ul:first', this).animate({
height: "0px"
});
});
});​
HTML
<div id="mainWrapperContent">
<div id="writingMenu">
<ul>
<li>critical reviews
<ul>
<li>frieze</li>
<li>Modern Painters</li>
<li>photograph</li>
<li>sculpture</li>
<li>NewCity</li>
</ul>
</li>
<li>Exhibition Catalogs
<ul>
<li>Catalog One</li>
<li>Catalog Two</li>
<li>Catalog Three</li>
<li>Catalog Four</li>
<li>Catalog Five</li>
</ul>
</li>
<li>BreakOut Artists
<ul>
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
<li>2008</li>
</ul>
</li>
<li>Cover Stories
<ul>
<li>Catalog One</li>
<li>Catalog Two</li>
<li>Catalog Three</li>
<li>Catalog Four</li>
<li>Catalog Five</li>
<li>Catalog One</li>
<li>Catalog Two</li>
<li>Catalog Three</li>
<li>Catalog Four</li>
<li>Catalog Five</li>
</ul>
</li>
</ul>
</div><!-- writing Menu -->
</div><!-- mainWrapper Content -->​
CSS
#writingMenu a {
margin: 0px 0px 0px 0px;
padding: 12px 5px 5px 5px;
text-align: right;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
background: #ffffff;
color: #B3B3B3;
min-width: 140px !important;
display: block;
}
#writingMenu a:hover {
color: #37342e;
}
#writingMenu ul li ul {
position: absolute;
width: 90%;
float: left;
overflow: hidden;
border-left: thin solid black;
border-bottom: thin solid black;
border-right: thin solid black;
margin-left: -5px;
padding-top: 5px;
background-image: url(images/speckled_backgrounddk.jpg);
display: block;
height: 0px;
}
#writingMenu ul li ul li {
background-image: none;
float: none;
}
#writingMenu ul li ul a {
margin: 0px;
padding: 0px;
text-align: left;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
color: #B3B3B3;
background-color: transparent;
background-image: none;
text-transform: lowercase;
color: #999999;
}​
$(document).ready(function() {
var defHeight = $('ul:first',this).height();
console.log(defHeight);
$("ul li").hover(
function () {
$('ul:first',this).stop().animate({height : "toggle"});
},
function () {
$('ul:first',this).stop().animate({height : "toggle"});
});
});
Havent tried but this should work
I'vde made a css-only based dd menu if you're interested...
HTML =>
<!-- by rocky -->
<div id="wrapper">
<div id='navMenu'>
<ul>
<li>Menu1
<ul>
<li>Dropdown1</li>
<li>Dropdown2</li>
<li id="submenu">Dropdown3
<ul>
<li>Submenu 1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul> <!-- End of Menu1-->
</li> <!-- Menu2 -->
<li>Menu2
<ul>
<li>Dropdown2 </li>
<li id="submenu">Dropdown2
<ul>
<li>Dropdown2</li>
</ul>
</li>
<li>Dropdown2</li>
</ul> <!-- End Inner UL -->
</li> <!-- ABOUT -->
<li>Menu3
<ul>
<li>Submenu3</li>
<li id="submenu">Submenu3
<ul>
<li>Submenu3</li>
</ul>
</li>
</ul> <!-- End Inner UL -->
</li> <!-- End main LI -->
</ul> <!-- End main UL -->
</div> <!-- End Nav -->
</div> <!-- End wrapper -->
And the CSS:
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul{
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu ul li ul a:hover {
color: #999;
}
#navMenu ul ul li#submenu ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navMenu ul ul li#submenu:hover ul {
margin-top: -30px;
margin-left: 105px;
visibility: visible;
}
There is a demo here:
http://dbwebb.se/style/?id=152

Categories