Ok so I'm trying to build a right hand side page slide effect with two states, on the initial opening of the sliding panel I'd like to display the menu and on selecting the menu item i want to expanded box to open up even bigger and display that info.
Finding it hard to describe exactly what I'm trying to do as i havent seen it before, but pretty much on opening the first div that will be 100% in height 200px in width animated in from the right, when selecting a link within that container i'd like it to expand another div to float to the left of it and expand the box out even more. Does this make sense? any links on where else does this or some javascript to get this to work would be much appreciated... Heres my coding so far:
HTML:
<div id="enquirypost">
<div style="width:200px;">
Extra Expand
<br />
<br />
Menu<br />
Close
</div>
<div id="extra">test</div>
</div>
Login/Register
CSS:
body{margin:0;}
#enquirypost {
height:100%;
overflow:hidden;
z-index:1000;
width:0px;
float:right;
background:#ccc;
font-size:20px;
line-height:65px;
position:absolute;
top:0px;
right:0px;
color:#FFF;
text-align:center;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;}
#enquirypost:target
{
bottom:0px;
overflow:auto;
min-width:200px;
height: 100%;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
#extra {
height:100%;
overflow:hidden;
z-index:1000;
width:0px;
float:right;
background:#000;
font-size:20px;
line-height:65px;
position:absolute;
top:0px;
right:0px;
color:#FFF;
text-align:center;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;}
#extra:target
{
bottom:0px;
overflow:auto;
min-width:400px;
height: 100%;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
And heres the jsfiddle
More the #Extra outside the #enquirypost.
http://jsfiddle.net/davidja/wFutQ/15/
<div id="enquirypost">
<div style="width:200px;">
Extra Expand
<br />
<br />
Menu<br />
Close
</div>
</div>
Login/Register
<div id="extra">test</div>
See what happens when you put the #extra div outside the #enquirypost div. I'm not sure if this is what you're looking for but it definitely looked better when I tried this in your jsFiddle.
Also: when you use position: absolute, the float attribute is useless, I'd delete it to clean up the code a bit. And you might want to include "-o-transition" and just "transition" to make sure your page displays correctly on every browser.
I think that I have solution that you were looking for:
http://jsfiddle.net/wFutQ/17/
Tricky part is that you put div which is "submenu" before div which is "menu". Then you can use css selector .submenu:target + .menu { which can keep menu opened while submenu is targeted.
You can also do more deeper subsubmenu while keeping submenu and menu opened with .subsubmenu:target + .submenu and .subsubmenu:target + .submenu + .menu selectors
my html code (sorry but I added a few classes and some of them are not used now):
<div>
<div id="extra" class="menuPart submenu">
<div class="content">test</div>
</div>
<div id="enquirypost" class="menuPart menu">
<div class="content">
Extra Expand
<br />
<br />
Menu<br />
Close
</div>
</div>
</div>
Login/Register
my css code:
body {
margin:0;
}
.menuPart {
height: 100%;
width: 0px;
font-size:20px;
line-height:65px;
position:absolute;
color: #FFF;
text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.menu:target {
overflow: auto;
min-width: 200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.submenu:target + .menu {
overflow: auto;
min-width: 200px;
}
.submenu:target {
overflow: auto;
min-width: 200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
padding-right: 200px;
}
#enquirypost {
background: #CCC;
right: 0px;
}
#extra {
background: #000;
right: 0px;
}
Related
I've done some research and it doesn't seem that I can find exactly what I'm looking for. My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. Here's some edits I made to illustrate what I mean:
default position
after user presses "profile" button, for example
Not sure what JS library would help me with this or if there is a code-sample. The key here is that I dont want it to shift on any button clicked, only certain ones. For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom.
Might anyone know how I can accomplish this?
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. This is why when the users presses "Library" i would want the navbar to remain stationary. However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. I hope that helps. And thanks for all the info!
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from:
weird space
EDIT 3:
Heres the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS:
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs.
Below is a snippet that demonstrates this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied.
It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked.
You can animate the navbar to slide between 2 vertical positions with css as such:-
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements.
I'm a beginner in web development.
I'm trying to create a website with Google Maps, and I also want a menu sliding in and out on the left side.
The problem is: when the menu is going in, it pushes the map lower, instead of covering it, like it should. Also the CSS that makes that menu slide, doesn't seem to work properly, meaning it does not "slide".
Menu Hidden: http://imgur.com/UIiYsXf
Menu Showing: http://imgur.com/3IFyJNF
I searched a lot, tried an awful lot of stuff, but I just can't seem to make it work.
The nav menu is called 'menu' and the div that contains the map is called 'map'.
Any help appreciated, and please keep it simple. Thank you.
Here's my HTML code:
<% #page_title = "Main Page" %>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<title>Google Map Demo</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">☰</label>
<div id = "qne_header"> TITLE</div>
<nav class="menu" >
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>INSPIRATION</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<div id="map"></div>
<script>
var resize_flag=true;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.53, lng: 22.88},
zoom: 8,
disableDefaultUI: true
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyRSefwx9vuhCMEOLrxXsinO2efTsf4K4&callback=initMap"
async defer></script>
</body>
</html>
Here's my CSS code:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#qne_header{
height : 5%;
background-color: #b3e6ff;
text-align: center;
font-size: 200%;
}
#map {
position:absolute;
height: 99%;
width: 100%;
margin: auto;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
a {
text-decoration: none; color:#00a5cc;
}
nav {
width:10%;
text-align:center;
}
nav a {
display:block; padding: 15px 0; border-bottom: 1px solid #C3AA6E; color:#F0EADC;
}
nav a:hover {
background:#E5DAC0; color :#FFF;
}
nav li:last-child a {
border-bottom:none;
}
.menu-icon {
padding:10px 20px;
background:#FFFFFF; color:#987D3E;
cursor:pointer;
float:left;
margin-top:4px;
border-radius:5px;
margin-top: 5px;
}
#test{
position:relative;
}
#menuToggle { display:none; }
#menuToggle:checked ~ .menu {
position:absolute;
left:0px;
}
.menu {
width: 240px;
left: -240px;
position:absolute;
background:#FFFFFF;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
li {
list-style-type:none;
}
Remove position:absolute; off of .menu and it works.
EDIT:
#map{ z-index: -1; }
This allows the Map to be below the header/menu sections.
#map {
position:absolute;
height: 99%;
width: 100%;
margin: auto;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
z-index: -1;
}
This may cause issues with adjusting the map -- posting a JSFiddle will help everyone troubleshoot.
This solution is very simple, the menu is actually showing up at the right place when you press the button. The problem is that it appears to be below the map.
Give the .menu class a z-index of 1 and the menu will position itself in front of the map.
.menu {
z-index: 1;
}
.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
This is css for my hover over image and text appreance.
http://jsfiddle.net/LbLHc/
here is what i have. How do i put the text inside of my image when i hover over?
thank you
Here is solution for you problem.
Html Code
<div class="row">
<div class="relative imgContainer">
<a href="works/nytimes/nytimes.html">
<span class="text">NY times magazine: Table of Contents</span>
<img src="http://placehold.it/500x200" class="img-responsive" />
</a>
</div>
<div class="relative imgContainer">
<span class="text">Eloquence Magazine</span>
<img src="http://placehold.it/700x500"class="img-responsive" />
</div>
</div>
**Css Code**
.imgContainer:hover .text{
display:block;
opacity:1;
}
.relative{
position: relative;
}
.imgContainer{
height: 250px;
width: 400px;
margin-bottom: 20px;
}
img{
height: 250px;
width: 400px;
}
.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
display:none;
width: 100%;
height:100%;
text-align: center;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
display:block;
opacity:1;
}
FiddleLink
http://jsfiddle.net/anu1718/Y2AYj/
If I understand it correctly, you want to hide the text by default, and only show it when hovering over the image. IF you want to use just simple CSS for that, you need to have a common container for the image and the text (the latter one being absolutely positioned and hidden), and add a CSS rule targeting the :hover state of the container to show the text.
In your code I added a class (fadingtext) to the container:
<div class="row">
<div class="col-xs-4"> <a href="works/nytimes/nytimes.html">
<span class="text">Title</span>
<img src="http://placehold.it/500x200" class="img-responsive"/>
</a>
</div>
<div class="col-xs-4 fadingtext"> <span class="text">Text that fades on hover</span>
<img src="http://placehold.it/700x500" class="img-responsive" />
</div>
</div>
And here is your CSS with the fixed selectors:
.fadingtext .text {
position: absolute;
font-family:"courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255, 255, 255, 0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0;
left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.fadingtext:hover .text {
opacity:1;
}
Here is a modified version of your jsfiddle:
http://jsfiddle.net/Rws85/2/
I have a div that have img with id and another div inside it
I want to hide the info div (you can see in code) on load of the page and then show it again on hover of the img - I also want the info div to slide right nicely..
Thanks in advance for helping :)
the HTML
<div class="wrapper">
<img id="logo" src="img/logo.png" alt="logo">
<div id="info">
info- blah <br>
blah & blah .<br>
email#gmail.com
</div>
</div>
The CSS
.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#logo {
width: 39px;
}
.wrapper:hover{
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
}
What is the jQuery I need for this?
Here's one way to do it.
I don't know if that's what you wanted, but since you're already using CSS3, you don't need jQuery for that:
.wrapper {
float: left;
opacity: 0.4;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
overflow:visible;
position:relative;
}
.wrapper:hover {
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
opacity:0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
left:50%;
position:absolute;
top:0;
}
.wrapper:hover #info {
left:100%;
opacity:1;
}
http://jsfiddle.net/Y2B2v/
Place your .wrapper with the same image height. Place an overflow:hidden to hide text which is under.
After you must just change height in .wrapper:hover to show the text.
If you want a nice transition, you can adjust that with
.wrapper:hover{
opacity: 0.6;
height:100px;
transition: height 1;
-webkit-transition: height 1s; /* Safari */
}
like this : http://jsfiddle.net/AW9qh/2/
I have a centered div and 4 other divs - one on each side of the centered div. When I click a button each of the div slide into the frame and push the centered div out.
It works fine in chrome but fails using firefox, leaving me with no error from firebug.
Here is my implementation which doesn't currently work correctly in firefox.
As you can see, in firefox the centered div simply disappears instead of sliding out of the screen. Using chrome, the centered div slides out as intended.
Can someone take a look with firebug and tell me what they think might be causing the problem?
This code was based off of a jsfiddle that works fine using either chrome or firefox.
Here is the code to the jsfiddle:
here is the html
<div id="fullContainer">
<div id="right">
</div>
<div id="left">
</div>
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div id="centerContainer">
<div id="relativeContainer">
<div id="content">
This is where your face should go. Notice that I placed it within a centering div.
This will enable the face to be absolutely positioned, and allow for you to modify
it's position when the side-bars slide in.
<div data-move="left">Open Left</div>
<div data-move="right">Open Right</div>
<div data-move="top">Open Top</div>
<div data-move="bottom">Open Bottom</div>
</div>
</div>
</div>
here is the css
#centerContainer {
position:fixed;
top:50%;
left:50%;
width:0;
height:0;
}
#relativeContainer {
position:relative;
}
#fullContainer {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
}
#content {
position:absolute;
width:300px;
height:400px;
top:-200px;
left:-150px;
background:#BADA55;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#content.right {
left:-250px;
}
#content.left {
left:-50px;
}
#content.bottom {
top:-300px;
}
#content.top {
top:-100px;
}
#content div {
cursor:pointer;
color:blue;
text-decoration:underline;
margin-top:15px;
text-align:center;
}
#left {
position:absolute;
top:0;
left:-125px;
height:100%;
width:100px;
background:blue;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#left.opened {
left:0;
}
#right {
position:absolute;
top:0;
right:-125px;
height:100%;
width:100px;
background:green;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#right.opened {
right:0;
}
#top {
position:absolute;
left:0;
top:-125px;
width:100%;
height:100px;
background:yellow;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#top.opened {
top:0;
}
#bottom {
position:absolute;
left:0;
bottom:-125px;
width:100%;
height:100px;
background:red;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#bottom.opened {
bottom:0;
}
here is the javascript:
function SlideOut(element){
$(".opened").removeClass("opened");
$("#"+element).addClass("opened");
$("#content").removeClass().addClass(element);
}
$("#content div").click(function(){
var move = $(this).attr('data-move');
SlideOut(move);
});
Here is the fiddle
Thank you
katie
I did some testing and found out what's happening. This is reproduced in this fiddle for illustration and demonstration purposes.
In Firefox if you are transitioning the CSS attribute left, it needs to have an initial value to start from. If it doesn't then it won't transition, it'll just assign the value to the attribute.
In Chrome if you don't have the initial value set it apparently just starts from wherever it is and doesn't worry about it.
If you check out the above fiddle in Firefox and click on the first row, it just appears farther over, while the second row transitions over. Only difference is the second row has a left: 0 initially set. On Chrome both work the same.
If you put a left: 0 on your #content div then it will slide like it should in Firefox. (Tested in Firebug and that does fix it).