Here is a product listing of IKEA products. When the user hovers over a product, a lightbox is triggered and the section expands horizontally:
http://www.ikea.com/my/en/catalog/categories/departments/eating/16043/
What Lightbox is used here? Or which Lightbox can be manipulated to achieve this? Thank you.
Since we are living in the future, you can quite easily achieve this effect using CSS alone.
Here's a quick example. First the unremarkable markup:
<ul class="Menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Now, the style (I won't explain, but I tried to keep it well commented):
.Menu {list-style:none; margin: 1em 1em}
.Menu > li {
float:left; text-align:center; padding: 15px 30px; /* size of the box */
width: 50px; height: 30px; overflow:hidden; /* fixed size */
border:solid 1px silver;
background-color:white; /* boxes are over each other when hovered */
/* z-index is needed so hovered boxes are in front of other boxes */
position:relative; z-index:100;
/* showing off. Not for IE. */
transition: 0.5s;
-o-transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s;
}
.Menu > li:hover {
padding: 20px 35px 35px; /* larger */
/* keep other boxes on same position (this is the real trick here) */
margin: -5px -5px -20px; /* math! this + new padding = old padding */
z-index:110; /* in front of other boxes */
/* special effects: */
border-color: #777;
box-shadow: 0 0 5px 0px rgba(0,0,0,0.6);
border-radius:3px;
}
This is it really. I also added elements that are only visible on hover:
.VisibleOnHover {visibility:hidden;opacity:0;
background-color:#ff6; border:solid 1px #994; padding:2px 4px; margin: 2px;
position:absolute; font-size:small;
transition: 0.5s; -o-transition: 0.5s;
-webkit-transition: 0.5s; -moz-transition: 0.5s;
}
.Menu > :hover > .VisibleOnHover {visibility:visible;opacity:1;}
.VisibleOnHover.Bottom {bottom:0;left:0;right:0;}
.VisibleOnHover.TopLeft {top:0;right:0;}
You can see a full example on jsFiddle: http://jsfiddle.net/kobi/sqfAS/
A few minor point are the borders (they are doubled between elements - you can even it out with a -1 margin), and IE9, which still doesn't support transition - but the popup still works. Another usability/accessibility issue is that the menu doesn't work using Tab (in my defense, the IKEA one doesn't work either...)
Related
I'm newbie in CSS and I have set a dropdown menu. When hovering, the dropping menu has a transparent background. How make the background with an opaque color from the beginning of animation ? I have tried several configurations but none works: so far my dropdown menu has a transparent background when dropping.
Update : okay the hovering now is opaque since the beginning but there is still a lag with the fade-outing of the text. So far the text remain here behing the drop down menu then disappears brutally. Maybe someone have an hint to fix that ?
here my codesandbox : https://codesandbox.io/s/93kz5pmzp4 you will see a little lag with transparent color then will come opacity. I would have the opacity from the beggining.
import React from 'react'
import style from "./Menu.module.css";
export default (props) => {
return (
<div className={style.menu}>
<div> Current link </div>
<div className={style.menu__container}>
<button className={style.menu__button}>Dropdown</button>
<div className={style.menu__content}>
<Link /* className={style.link} */ to="/portfolio/">Portfolio {props.portfolio}</Link>
<Link to="/blog/">Blog {props.blog}</Link>
<Link to="/prestations/">Prestations {props.prestations}</Link>
<Link to="/aboutus/">About us {props.aboutus}</Link>
<Link to="/contact/">Contact {props.contact}</Link>
</div>
</div>
</div>
)
}
/* MENU */
.menu{
margin-left: 15%;
margin-top: -0.5em;
transition: width 2s;
}
/* The container <div> - needed to position the dropdown content */
.menu__container{
position: relative;
display: inline-block;
}
/* Dropdown Button */
.menu__container .menu__button {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.menu__container:hover .menu__button {
background-color: #3e8e41;}
/* Dropdown Content (Hidden by Default) */
.menu__content {
/* display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; */
visibility: hidden; /* hides sub-menu */
opacity: 0;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
/* make content 2em higher than container */
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
/* Show the dropdown menu on hover */
.menu__container:hover .menu__content {
/* display: block; */
visibility: visible; /* shows sub-menu */
background-color: white;
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s; }
/* Links inside the dropdown */
.menu__content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.menu__content a:hover {background-color: white;}
Any hint would be great,
Thanks
The transition of your Z-index is affecting it. You could imagine it like the div is slowly and little by little going in front of the text.
i think this codepen may help in explaining this.
https://codepen.io/chriscoyier/pen/gboJf
<div class="wall wall-1"></div>
<div class="wall wall-2"></div>
<div class="wall wall-3"></div>
I currently have a div that when hovered shows another div in it's place, the div shown in it's place has a box-shadow of 1 px on all sides, I am trying to cover the top shadow line so that the shadow is only shown on the left, right and bottom.
Edit: I would like the shadow to remain on all 4 sides but to be covered by a div on the top. Not the vertical axis changed. I'm wondering if this is possible.
http://jsfiddle.net/8yeh9cw6/
Is this possible to cover or will it always bring the shadow to the top of anything? Ideally with pure css, otherwise is it possible with jquery or javascript?
Hello Try the code below i have added some jQuery
$(".hoveredItem").mouseover(function(){
$(this).css({
"box-shadow":"0px 6px 10px rgba(0,0,0,0.9)"
});
});
.shoptitle {overflow:hidden; background-color:#FFF; padding:15px;}
.parentItem{ height:200px; background-color:#e7e7e7; float:left; margin-left:1px; margin-bottom:1px; }
.I33{width:33.2%; }
.hoveredItem{opacity:0;transition:opacity 0s 0.2s ;position:relative; background-color:#FFF; width:100%; height:200px; /* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */}
.itemDisplay{ opacity:1;transition:opacity 0s 0.2s;position:relative;}
.parentItem:hover .hoveredItem {opacity:1; }
.parentItem:hover .itemDisplay{opacity:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shoptitle">Cover top shadow</div>
<div class="parentItem I33">
<div class="itemDisplay"></div>
<div class="hoveredItem">hai</div>
</div>
a simplistic solution you can nudge shadow on y-axis
.shoptitle {
overflow: hidden;
background-color: #FFF;
padding: 15px;
}
.parentItem {
height: 200px;
background-color: #e7e7e7;
float: left;
margin-left: 1px;
margin-bottom: 1px;
}
.I33 {
width: 33.2%;
}
.hoveredItem {
opacity: 0;
transition: opacity 0s 0.2s;
position: relative;
background-color: #FFF;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.9);
width: 100%;
height: 200px;
/* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */
}
.itemDisplay {
opacity: 1;
transition: opacity 0s 0.2s;
position: relative;
}
.parentItem:hover .hoveredItem {
opacity: 1;
}
.parentItem:hover .itemDisplay {
opacity: 0;
}
<div class="shoptitle">Cover top shadow</div>
<div class="parentItem I33">
<div class="itemDisplay"></div>
<div class="hoveredItem">hai</div>
</div>
more correct solution.. refer
CSS box-shadow on three sides of a div?
Okay so i working on a portfolio site for myself as i am a graphic designer. I have a side bar currently with some essential info for my site and its always there. What i want is for my "portfolio section" to be next to it on the right. I created both in separate hmtl files just so i could fine tune them, now i want take the 'portfolio' code and paste it into the other html code, the problem when i do it and move all my css over nothing shows up.
the filtering shows up and i can kinda get it to be in the right spot but the portfolio images i cant get to show up.
Here is where im at with the code pasted in but cant seem to get the images to show: https://jsfiddle.net/5g15jzwt/ (the filtering selections are at the bottom, they should be at the top)
Here is my design, this is what im trying to get to: http://imgur.com/a/96RlE
When i check to see whats wrong with firbug it says the .container div and the .portfoliolist div have heights of zero.
.container {
position: relative;
width: 940px;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
float: right;
}
I hope this enough info to help, i cant seem to get other pages to work in jsfiddle to show you where im at. If you need anything else to help, just let me know and ill see what i can do. Also i know the code could be done a little ore efficiently in some places, im not the best just trying to make do
Thank you in advance
Currently, some of your div are not closed, you just open them.
For example, you open sidebar, but never close it. So instead of:
<div id="sidebar">
<div id="header">
<img id="logo" class="my-logo" src="images/logo.svg"/>
<h1>Warren Breedlove</h1>
</div>
You might want to do:
<div id="header">
<img id="logo" class="my-logo" src="images/logo.svg"/>
<h1>Warren Breedlove</h1>
</div>
<div id="sidebar">
/* YOUR SIDEBAR CODE HERE */
</div> /* This closes the div */
Look at how to use div and make sure they don't overlap: https://www.w3schools.com/tags/tag_div.asp
Here is a fiddle with your Sidebar and Container appearing side by side as I imagine you intended.
https://jsfiddle.net/0m67qu4z/2/
The solution is based off of the comment I made to your original question. There were a number of different changes made to the CSS of this - all on width values. The most important ones were these;
#sidebar{
height: 720px;
width: 25%; /* changed to % */
background-color: #fbfbfb;
position: relative;
float: left;
}
#info {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fcf8e3;
border:1px solid #fbeed5;
width:95%; /* Changed to % */
max-width:900px;
margin:0 auto 40px auto;
font-family: roboto;
font-size:12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
.container {
position: relative;
width: 70%; /*changed to %*/
margin: 0 auto;
margin-left:20px; /* gave you a little room between the two elements */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
float: left; /*changed to float left */
}
/* #Tablet (Portrait) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.container {
width: 70%; /*changed to %*/
}
}
Something else i forgot to mention is if you inspect element/firebug your code - your wrapper shows up as 0 x 0. Essentially it doesn't occupy any space. If you add
wrapper {
display:table;
}
It will properly assign the width and height that you want to it.
Here is a flexbox solution. I'm using some pseudo code instead of yours to help simplify things and hopefully makes it easier to see what's going on.
body {
display: flex;
margin: 0;
font-family: Arial, sans-serif;
}
ul,
li {
margin: 0;
padding: 0;
}
nav a {
color: #555;
text-decoration: none;
}
nav a:hover {
color: indianred;
}
aside {
display: flex;
flex-direction: column;
width: 250px;
color: #777;
font-weight: bold;
text-transform: uppercase;
background-color: white;
}
aside nav {
display: flex;
flex-direction: column;
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
aside a {
padding: 0.5rem 0 0.5rem;
}
aside p {
margin-top: auto;
font-size: 0.5rem;
text-align: center;
}
section {
flex-grow: 1;
min-height: 1000px; /* <= for demo, mimic content height */
padding: 0 2rem;
background-color: #f1f1f1;
}
section nav {
display: flex;
align-items: stretch;
height: 60px;
border-bottom: 1px solid #ccc;
}
section nav a {
padding: 0 1rem;
line-height: 60px;
}
section nav a:hover {
background-color: #ddd;
}
<aside>
<nav>
Home
About
Contact
</nav>
<p>Copyright ©</p>
</aside>
<section>
<header>
<nav>
All
Logos
School Work
</nav>
</header>
<main>
<!-- place work example markup here -->
</main>
</section>
I have been looking for a solution for over ten hours, today only, and have searched many more days before that. I'm asking a question here because I'll be ripping my hair out very soon if this goes on.
My problem : I have a responsive navigation which looks like a regular navbar on desktop sized screens that converts to a dropdown menu when window shrinks or device width gets too small. On the media queries front, I think I've got everything covered.
The Javascript is what is causing problems. Let me explain :
Desktop nav shrinks when window is resized
clicking to open/close the shrunk menu makes the list items pop out/hide without problem
when window is resized to its original width (with menu closed) the navigation stays hidden
Here are two examples to illustrate what I mean.
Responsive menu hidden on window resize
Responsive navigation hidden on window resize
I know what people might suggest : just make it work with jQuery there are many working examples. While that may be true, I'm not familiar with jQuery at all and if I could, I would rather not use a whole library just for this. I'm not very experienced in JavaScript either, but I prefer the pure JS approach.
HTML
<header class="header" id="return">
<div class="floatWrapper">
<nav class="grid70" >
<input type="button" onclick="toggle(navi)"/>
<ul class="allGrids navigation grid1" id="navi">
<li><a data-scroll href="#profil">About</a></li>
<li><a data-scroll href="#competences">Skills</a></li>
<li><a data-scroll href="#parcours">Work</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
CSS
*,
:after,
:before{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
word-wrap:break-word;
}
html, body{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
font-size: 100%;
}
ul, li{
list-style-type: none;
padding:0;
margin:0;
}
a{
text-decoration: none;
}
.floatWrapper{
width: 90%;
max-width: 1120px;
margin:0 auto;
}
.floatWrapper:before,
.floatWrapper:after {
content:"";
display:block;
}
.floatWrapper:after {
clear:both;
}
.allGrids{
height: auto;
float:left;
margin: 1% 0%;
display:block;
}
.grid1{
width: 100%;
margin:1% 0;
}
.grid70{
width: 66%;
}
.header{
position: fixed;
top: 0;
left:0;
width:100%;
z-index: 100000;
padding:0;
height: auto;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.header input{
display:none;
}
.header .floatWrapper .grid70{
float:right;
}
.navigation{
margin:0;
padding: 0;
}
.navigation li{
float:left;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
width: 24%;
margin-left: .3%;
padding-top:0;
border-radius: 0 0 10px 10px;
}
.navigation li:nth-child(odd) a{
background: orange;
}
.navigation li a{
display: block;
color: black;
background-color: lightblue;
text-decoration: none;
word-wrap: normal;
padding-right: 8%;
height:4em;
line-height: 5.5em;
text-align : right;
border-radius: 0 0 10px 10px;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
.navigation li:hover a{
box-shadow: 1px 2px 4px black;
height:6em;
line-height: 8.5em;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
#media screen and (max-width: 769px) {
.header{
padding:0;
position:fixed;
background-color: #22313F;
border-top:none;
}
.header .floatWrapper{
padding-top: 1em;
padding-bottom: 1em;
position: relative;
z-index:15000;
width: 100%;
}
.header .floatWrapper .grid70{
width: 2em;
height: 2em;
padding:0;
float:right;
margin-right: 5%;
}
.header .floatWrapper .grid70 input{
display:block;
color:#22313F;
width: 100%;
height: 100%;
background-color: #6C7A89;
padding:0;
margin: 0;
}
.header .floatWrapper .grid70 .navigation{
position:absolute;
top:70%;
left:0%;
display:none;
padding-top: 15px;
}
.header .floatWrapper .grid70:hover .navigation {
max-height: 1000px;
display:block;
}
.navigation li{
width: 100%;
padding:0;
border-radius:0;
margin-left: 0;
}
.navigation li a {
text-align: left;
height: auto;
line-height: 40px;
border-radius:0;
word-wrap:break-word;
padding:1.5%;
font-size: 18px;
}
.navigation li:hover a{
box-shadow: none;
color:black;
height: auto;
line-height: 40px;
}
}
JavaScript
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device){
//code for touch devices
function toggle(navi) {
var tag=document.getElementById("navi");
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
}
I am very well aware that what is causing problems is non other than this very JS snippet. On mobile, it works like a charm.
As the hover is still enabled on .grid70 it works on Desktops browsers aswell, but only on Firefox. Chrome, IE and Opera detect the touch and make the nav unusable after a few clicks (when window is resized).
Here is a JSbin : http://jsbin.com/ziqij/1/edit?html,css,js,output
The reason hover is still working is because I thought the touchscreen detection would work ... and wanted to go with hover on desktop / onclick on mobile.
I realize now, I'd better use a click only solution and account for desktop touchscreens aswell.
Any help / insight would de greatly appreciated.
Desperately,
Phil
so I'm no CSS wizard or Nivo slider master.. I got this working on a page of mine that had nothing with it to begin with.. but when I try to get it working with my prostores page the images come up but the sliding then moves up and left and does it for every slide. I assume there must be some CSS that I need to change.. or something.. but since I dont know much about CSS I dont know what to change.. I just left the default settings in here..
here is where I was testing
http://www.securemycargo.com/servlet/the-template/testnivo/Page
any pointers are appreciated
ok here is the default CSS`
.theme-default .nivoSlider {
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:22px;
height:22px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}`
and I took out the table entry.. does the same thing..I assume I need one of these
CSS entries to be modified ?
UPDATE: Layout issues aside, I think this is your primary problem:
GET http://www.securemycargo.com/.../nivo-slider.css 404 (Not Found)
CSS is a critical part of such a utility. Without it, overflow isn't controlled and images aren't sized properly. I've placed the file at http://dq3f8u841c3z3.cloudfront.net/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css in your page via dev tools and it solves your issue.
At least part of the problem is that you're using tables for layout, and the table isn't wide enough. The images aren't shown on load, so the browser makes it too narrow. At a minimum, set the width of the table to 100% to let it use the entire main column:
<table width="100%">
<tr>...
Note that the width attribute is deprecated. If you're using tables for layout, though, you probably don't much care. If you happen to care, use CSS instead:
<table class="main-col">
<tr>...
<style>
.main-col {width: 100%;}
</style>
Better: remove that table altogether. Tables are for data, and this one has just one cell in it anyway.