I'm trying to create little navigation bar that will stay on certain position of the page even the the user is scrolling through it. I'm a total noob so I started out using the css for a navigation button from the template that i'm using. But for the life of me I cannot figure out how to add two more buttons. I'm sorry if this is a supernoob question but I could really use the help. Thanks guys!
The website is www.muzedimage.com
this is what I have in mind: http://i.imgur.com/oN6osxv.jpg
The HTML segment for the button is:
<div class="downArrow">
<div class="row">
<div class="large-1 small-2 column push-11">
<i class="icon-chevron-down"></i>
</div>
</div>
</div>
The CSS Style Sheet:
section.banner {
float: left;
width: 100%;
position: relative;
overflow: hidden;
}
section.banner .downArrow {
float: right;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 100;
text-align: center;
}
section.banner .downArrow a.down {
float: left;
width: 50%;
height: 60px;
background: #cb7039;
text-align: center;
}
section.banner .downArrow a.down i {
color: white;
font-size: 1.688em;
line-height: 60px;
-webkit-transition: line-height 0.1s ease-in;
-moz-transition: line-height 0.1s ease-in;
-o-transition: line-height 0.1s ease-in;
transition: line-height 0.1s ease-in;
}
section.banner .downArrow a.down:hover i {
line-height: 80px;
}
Here is a little FIDDLE that can give you a start.
Spend your time playing with the CSS.
And add/style as many buttons as you want.
HTML
<div class='holder'>
<div class='button1'>X</div>
<div class='button1'>Y</div>
<div class='button1'>W</div>
<div class='button1'>Z</div>
</div>
Related
I am trying to animate the slide in/out of my flyout however it doesn't transition but appear and disappear in the same place.
in chrome devtools the animation works if I tick/untick right: 0;
How can I slide in/out the flyout correctly?
<template>
<portal to="modalPortal">
<div
v-if="isMoreOffersFlyoutActive"
:id="id"
class="flyOut"
#click.self="sendCloseModal(true)">
<div
:class="['flyOut__container', {'flyOut__container--active': isMoreOffersFlyoutActive}]">
<div class="flyOut__buttonContainer">
<button
id="storeInfoClose"
class="flyOut__button"
#click="sendCloseModal(false)">
<icon
:scale="closeButtonIconScale"
name="close"
color="white" />
</button>
</div>
<div class="flyOut__content">
<slot />
</div>
</div>
</div>
</portal>
</template>
.flyOut {
position: fixed;
top: 0;
left: 0;
z-index: z("overlay");
display: flex;
justify-content: flex-end;
width: 100%;
height: 100%;
overflow: auto;
background-color: $black-alpha;
&__container {
position: relative;
z-index: z("modal");
right: -50%;
width: 50%;
height: 100%;
background-color: $white;
box-shadow: -2px 0 15px 5px rgba(0,0,0,0.2);
transition: right ease 0.5s;
&--active {
right: 0;
transition: right ease 0.5s;
background: #ff00ff;
}
}
There isn't really an issue with Vue here. The problem stems from trying to animate a position between two different units (or in your case units and no units). Changing right: 0; to right: 10%; would probably work.
All that said, PLEASE don't animate CSS position. It's not performant and causes the browser to reflow & repaint stuff. The better solution is to use css translate(). Here's an example...
.wrapper {
/* need a positioned container for SO's editor */
position: fixed;
top:0; right:0; bottom:0; left:0;
overflow:hidden;
}
.action{
margin: 30px;
font-size: 18px;
font-weight: bold;
cursor:pointer;
font-family: sans-serif;
}
.moved{
position: absolute;
/* put the element where you want it */
top:0;
right:0;
bottom:0;
width: 150px;
background: #333;
padding: 20px;
color: #fff;
/* use transform to move to a new position (100% of element width) */
transform: translatex(100%);
transition: transform 0.5s cubic-bezier(.47,1.64,.41,.8);
}
.action:hover+.moved {
transform: translatex(0);
}
<div class="wrapper">
<div class="action">Hover Me</div>
<div class="moved">Transformed element</div>
</div>
I've got the following code. When the user hovers over the div, it should drop and stay that way until the user has hovered off of the div. When on the div, even if you move your mouse a bit, the hover action keeps firing.
html
<div class="whitelabelfeatures">
<div class="box1 requirements responsibilities">
<div class="responsibilitiesbox">
<div class="responsibility">
<div class="section1">
Pricing
</div>
<div class="section1a">
Pricing test
</div>
</div>
</div>
</div>
</div>
css
.box1.requirements.responsibilities {
height: 300px;
overflow: hidden;
}
.responsibility .section1 {
background-color: #c2bbb1;
height: 300px;
color: white;
font-weight: 700;
position: relative;
z-index: 2;
transition: all .3s ease;
}
.responsibility .section1:hover {
transform: translateY(300px);
}
.responsibility .section1a {
position: absolute;
z-index: 1;
top: 0;
}
codepen
https://codepen.io/jasonhoward64/pen/YzKNxVN
Thanks!
You can use javascript here. Please see below code.
var targetDiv = document.getElementsByClassName("section1")[0];
targetDiv.addEventListener('mouseenter', function(){
targetDiv.classList.add('section1mouseover');
});
var testDiv = document.getElementsByClassName("section1a")[0];
testDiv.addEventListener('mouseenter', function(){
targetDiv.classList.remove('section1mouseover');
});
.box1.requirements.responsibilities {
height: 300px;
overflow: hidden;
}
.responsibility .section1 {
background-color: #c2bbb1;
height: 300px;
color: white;
font-weight: 700;
position: relative;
z-index: 2;
transition: all .3s ease;
}
.section1mouseover {
transform: translateY(300px);
}
.responsibility .section1a {
position: absolute;
z-index: 1;
top: 0;
}
<div class="whitelabelfeatures">
<div class="box1 requirements responsibilities">
<div class="responsibilitiesbox">
<div class="responsibility">
<div class="section1">
Pricing
</div>
<div class="section1a">
Pricing test
</div>
</div>
</div>
</div>
</div>
The problem is that your :hover needs to be actuated higher in the DOM. With your current code, when you hover over the .section1 element, once the CSS transform takes place and translates the .section1 element vertically, the cursor is both "off" and "over" the transforming element, which causes the :hover to trigger on and off in response.
So in your codepen, on line 17, change your hover to the parent element and it should work.
Instead of:
.responsibility .section1:hover, try .responsibility:hover .section1
The following code is supposed to produce a smooth scrolling effect to page transition when the appropriate link is clicked.
It is not working as intended.
The page changes as designed, but the smooth scrolling transition effect is not there. I have researched a code which does that but when applied to the project is does not work at all in any browser. I could not find out why. Any help is appreciated.
/* Styling of the Layers */
.WrapperContainer {
z-index: 0;
width: 100%;
}
.SupportLayerHome {
background-color: darkorange;
left: 0;
}
.SupportLayerSignUp {
background-color: grey;
left: 500%;
}
.SupportLayerForums {
background-color: red;
left: 100%;
}
.SupportLayerArcaneum {
background-color: blue;
left: 300%;
}
.SupportLayerBuilds {
background-color: green;
left: 200%;
}
.SupportLayerOther {
background-color: black;
left: 400%;
}
/* General styling */
nav {
background-color: #FFF;
position: fixed;
width: 100%;
height: 20px;
z-index: 1;
}
/* Common Styles */
.BaseLayers {
position: absolute;
height: 100%;
width: 100%;
color: #FFF;
-webkit-transition: left 2s ease;
-o-transition: left 2s ease;
-moz-transition: left 2s ease;
transition: left 2s ease;
}
.BaseLayers i {
position: absolute;
top: 100px;
}
a[ id="callForums"]:target~#siteContainer section.BaseLayers {
left: 0;
}
a[ id="callHome"]:target~#siteContainer section.BaseLayers {
left: 0;
}
a[ id="callBuilds"]:target~#siteContainer section.BaseLayers {
left: 0;
}
a[ id="callSignUp"]:target~#siteContainer section.BaseLayers {
left: 0;
}
a[ id="callArcaneum"]:target~#siteContainer section.BaseLayers {
left: 0;
}
a[ id="callOther"]:target~#siteContainer section.BaseLayers {
left: 0;
}
<div class="WrapperContainer" id="siteContainer">
<nav class="navbar nav-justified" id="Navigation">
Home
Forums
Builds
Arcaneum
Other
Sign-up
</nav>
<section class="SupportLayerHome BaseLayers" id="HomePage">
<i>...</i>
</section>
<section class="SupportLayerSignUp BaseLayers" id="SignUpPage">
<i>...</i>
</section>
<section class="SupportLayerForums BaseLayers" id="ForumsPage">
<i>...</i>
</section>
<section class="SupportLayerBuilds BaseLayers" id="BuildsPage">
<i>...</i>
</section>
<section class="SupportLayerArcaneum BaseLayers" id="ArcaneumPage">
<i>...</i>
</section>
<section class="SupportLayerOther BaseLayers" id="OtherPage">
<i>...</i>
</section>
</div>
EDIT:
After some weeks and research I have found out why it is not working. The answer is to link to an element "on the same page" and then instruct that element to perform the animation like it is represented here:
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* Styling of the Layers */
.WrapperContainer {
height: 100%;
width: 100%;
overflow: hidden;
}
.Page1 {
background-color: darkblue;
color: #FFF;
}
.Page2 {
background-color: darkorange;
left: 100%;
-webkit-transition: left 0.5s linear;
-moz-transition: left 0.5s linear;
-o-transition: left 0.5s linear;
transition: left 0.5s linear;
}
.Page3 {
background-color: darkgreen;
left: 100%;
-webkit-transition: left 0.5s linear;
-moz-transition: left 0.5s linear;
-o-transition: left 0.5s linear;
transition: left 0.5s linear;
}
/* General Styling */
.NavigationLayer {
height: 5%;
border-bottom: 2px solid azure;
}
nav {
position: fixed;
z-index: 10;
width: 100%;
}
a[id="Page1"],
a[id="Page2"],
a[id="Page3"] {
display: none;
}
/* Common Styles */
.BaseLayers {
width: 100%;
height: 100%;
position: absolute;
padding-top: 2.5%;
}
a[id="Page1"]:target~main>section#PageOne,
a[id="Page2"]:target~main>section#PageTwo,
a[id="Page3"]:target~main>section#PageThree {
left: 0;
}
a {
color: white;
}
a:hover {
color: teal;
}
<!-- Hidden Content -->
<a id="Page1"></a>
<a id="Page2"></a>
<a id="Page3"></a>
<!--
End Hidden Content
Start NavBar
-->
<nav class="NavigationLayer" id="Navigation">
Page One
Page Two
Page Three
</nav>
<main class="WrapperContainer" id="siteContainer">
<section class="Page1 BaseLayers" id="PageOne">
<i>Page 1</i>
</section>
<section class="Page2 BaseLayers" id="PageTwo">
<i>Page 2</i>
</section>
<section class="Page3 BaseLayers" id="PageThree">
<i>Page 3</i>
</section>
There is no animation because your :target selectors aren't working. Instead, when clicking on the link you are being navigated to the position of the element, which is the normal browser behavior when clicking an internal link, which probably had you thinking that it was working without the animation. If you go back to your snippit and pay close attention to x-axis scrollbar, you should notice it moving rather than the element.
It seems like you're trying to use it to retrieve the target of a given anchor tag, however this pseudo-class is used when the element is the current target, so instead we can simply apply :target to the .nav-link elements to select them when they are the target.
I've replaced your target selectors with this rule:
.nav-link:target { left: 0; }
Note, however, that the window still attempts to adjust the view to the original location of the element, meaning the result is a little disorienting.
/* Styling of the Layers */
.WrapperContainer {
z-index: 0;
width: 100%;
}
.SupportLayerHome {
background-color: darkorange;
left: 0;
}
.SupportLayerSignUp {
background-color: grey;
left: 500%;
}
.SupportLayerForums {
background-color: red;
left: 100%;
}
.SupportLayerArcaneum {
background-color: blue;
left: 300%;
}
.SupportLayerBuilds {
background-color: green;
left: 200%;
}
.SupportLayerOther {
background-color: black;
left: 400%;
}
/* General styling */
nav {
background-color: #FFF;
position: fixed;
width: 100%;
height: 20px;
z-index: 1;
}
/* Common Styles */
.BaseLayers {
position: absolute;
height: 100%;
width: 100%;
color: #FFF;
-webkit-transition: left 2s ease;
-o-transition: left 2s ease;
-moz-transition: left 2s ease;
transition: left 2s ease;
}
.BaseLayers i {
position: absolute;
top: 100px;
}
:target { left: 0; }
<div class="WrapperContainer" id="siteContainer">
<nav class="navbar nav-justified" id="Navigation">
Home
Forums
Builds
Arcaneum
Other
Sign-up
</nav>
<section class="SupportLayerHome BaseLayers" id="HomePage">
<i>...</i>
</section>
<section class="SupportLayerSignUp BaseLayers" id="SignUpPage">
<i>...</i>
</section>
<section class="SupportLayerForums BaseLayers" id="ForumsPage">
<i>...</i>
</section>
<section class="SupportLayerBuilds BaseLayers" id="BuildsPage">
<i>...</i>
</section>
<section class="SupportLayerArcaneum BaseLayers" id="ArcaneumPage">
<i>...</i>
</section>
<section class="SupportLayerOther BaseLayers" id="OtherPage">
<i>...</i>
</section>
</div>
This slideshow technique is pretty close to what you are trying to achieve here but uses a small amount of jQuery to trigger the transitions.
http://css3.bradshawenterprises.com/sliding/
Okay, so im learning html and css, so im relativly new to this. I have followed many youtube videos to create different layouts. However, I am having real trouble in with this particular tutorial that i followed (https://www.youtube.com/watch?v=Wwe2zOz030o).
In this tutorial it shows how to make a really cool nav bar using the css transition effect, however, when the window is resized and i hover to expand a div it moves all of the other divs down the page. i want the divs to remain in the container at all times whatever the size of the window. i'm hoping this is really simple...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#import url("styles.css");
</style>
</head>
<body>
<div id="container">
<a href="#"><div class="menu">
<p class="p1">HOME</p>
<p class="p2">THIS IS OUR INTRO </p>
</div>
</a>
<div class="menu1">
<p class="p1">GALLERY</p>
<p class="p2">THIS IS MY PHOTOGRAPHY GALLERY</p>
</div>
<div class="menu2">
<p class="p1">ART PROJECTS</p>
<p class="p2">MY ART COLLECTION</p>
</div>
<div class="menu3">
<p class="p1">CONTACT</p>
<p class="p2">CONTACT ME</p>
</div>
</div>
</body>
</html>
the CSS styles are...
a{text-decoration:none;
}
#container{
height: 125px;
width: auto;
background-color:rgba(0,0,0,1);
position: relative;
}
.menu{
height: 125px;
width: 150px;
background-color: rgba(139,62,181,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu1{
height: 125px;
width: 150px;
background-color: rgba(255,153,0,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu2{
height: 125px;
width: 150px;
background-color: rgba(53,108,255,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.menu3{
height: 125px;
width: 150px;
background-color: rgba(154,44,21,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.p1{
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: rgba(255,255,255,.7);
font-weight: bold;
position: relative;
width: 100px;
top: 0px;
left: 15px;
transition:all .2s ease-in-out 0s;
}
.p2{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color: rgba(255,255,255,.5);
position:relative;
top:0px;
left: 11px;
transition:all .2s ease-in-out 0s;
}
.menu:hover{
width:900px;
}
.menu1:hover{
width:900px;
}
.menu2:hover{
width:900px;
}
.menu3:hover{
width:900px;
}
.menu:hover .p1{
color:rgba(255,255,255,1);
}
.menu:hover .p2{
color:rgba(255,255,255,1);
}
.menu1:hover .p1{
color:rgba(255,255,255,1);
}
.menu1:hover .p2{
color:rgba(255,255,255,1);
}
.menu2:hover .p1{
color:rgba(255,255,255,1);
}
.menu2:hover .p2{
color:rgba(255,255,255,1);
}
.menu3:hover .p1{
color:rgba(255,255,255,1);
}
.menu3:hover .p2{
color:rgba(255,255,255,1);
}
It is a good case to use "flexbox".
Please take a look at your code with implemented flexbox:
http://codepen.io/Nargus/pen/uymsI
I added only display: flex; and overflow:hidden; to #container.
Also added min-width for each menu item (the same as width) so that flexbox knows its limits.
Width in .menu*:hover may be as big as you wish, all extras will be cut by flexbox itself.
Flexbox is ok on all modern browsers: http://caniuse.com/#feat=flexbox
I've been trying to create a very simple gallery with a main image and three thumbnails down the right side, which when hovered over will display themselves as the main image. I used a found jfiddle and tried to edit it for my own needs but seem to have agot a bit mixed up along the way! This is my first time using css transitions to create something like this so it could quite possibly be something very obvious - i just can't see it.
The code I have is as follows:
<div id="gallery">
<div class="thumb" id="thumb-1"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery1-main.jpg" /></div>
<div class="thumb" id="thumb-2"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery2-main.jpg" /></div>
<div class="thumb" id="thumb-3"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-thumb.jpg" /></div>
<div class="main"><img alt="" src="/wp-content/themes/magicmirror/images/gallery3-main.jpg" /></div>
</div>
#gallery {
position: relative;
width: 470px;
height: 350px;
float: left;
margin: 0 35px 20px 0;
}
#gallery .thumb img {
height: 110px;
width: 110px;
}
#gallery .main img {
height: 350px;
width: 350px;
}
#gallery .thumb {
cursor: pointer;
left: 357px;
position: absolute;
display: block;
width: 112px;
height: 112px;
border: 1px solid #6d6d6d;
}
#thumb-2 {
top: 117px;
}
#thumb-3 {
top: 234px;
}
#gallery .main {
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
position: absolute;
border: 1px solid #6d6d6d;
}
#gallery .thumb:hover + .main {
opacity:0;
}
Hovering on the thumbnail should show the corresponding image in the main view. But you're doing it reversely (which hides the image in the main view with opacity:0). So try changing it like this:
#gallery .main {
opacity: 0; /* changed 1 to 0 */
...
}
/* always show the first initially */
#gallery > .main:nth-of-type(2) {
opacity:1;
}
#gallery .thumb:hover + .main {
opacity:1; /* changed 0 to 1 */
}
Demo.
NOTE: The demo just solves your problem mentioned in the question. To make it an acceptable gallery, I think you have to change the layout (HTML code) if you want a pure CSS solution, otherwise you have to add more script code.