I was following the documentation of unslider to develop a slidershow with dots and arrows.
The dots I already have working like I want, but the arrows I´m having some issues.
I´m not having sucess align the left arrow to the left of my slider and the right arrow to the right of my slide. I already did many tests but nothing is working.
Do you know how we can do this with unslider plugin?
What I´m trying:
http://jsfiddle.net/jcak/RJqw8/
My html:
<section id="banner-container">
<div class="banner">
<ul>
<li style="background-color:red; height:500px;">This is another slide.</li>
<li style="background-color:green; height:500px;">This is another slide.</li>
<li style="background-color:blue; height:500px;">This is another slide.</li>
</ul>
</div>
</section>
My CSS:
#banner-container
{
width:100%;
float:left;
}
.banner
{ position: relative;
overflow: auto;
width: 100%;
}
.banner li
{
list-style:none;
background-repeat:no-repeat;
background-size:cover;
}
.banner ul li
{
float: left;
}
.banner ul li img
{ width:100%;
height:220px;
}
.banner .dots
{ margin-left:50%;
bottom: 10px;
left: 0;
position: absolute;
right: 0;
display:none;
}
.banner:hover .dots
{
display:block;
}
.banner .dots li
{
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
display: inline-block;
height: 10px;
margin: 0 4px;
opacity: .4;
text-indent: -999em;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s; width: 10px;
}
.banner .dots li.active
{
background: #fff;
opacity: 1;
}
.arrows .prev {
position: relative;
top: -136px;
}
.arrows .next {
position: absolute;
right: 0;
top: 109px;
}
My jQuery:
$(function() {
$('.banner').unslider({
speed: 2000,
delay: 2000,
fluid: true,
dots: true,
arrows: true,
pause: true
});
});
The problem your facing is that your CSS code is not adressing the < a >s because they have a different className. Two options:
#1 - Switch the classNames in your CSS file:
.unslider-arrow.prev {...}
.unslider-arrow.next {...}
#2 - Switch the classes in the < a >s to the ones you're using in your CSS file:
However, when using the second option, you have to change the relations in your CSS to:
.arrow.prev {}
.arrow.next {}
Please check my unslider.com example html file:
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
<!-- CSS -->
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;
min-height: 500px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
.banner .inner {
padding: 360px 0 110px;
float: left;
vertical-align:-100px;
}
.banner h1, .banner h2 {
font-size: 40px;
line-height: 52px;
color: #fff;
}
.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
.unslider-arrow {
font-family: Expressway;
font-size: 50px;
text-decoration: none;
color: #3d3d3d;
background: rgba(255,255,255,0.7);
padding: 0 20px 5px 20px;
}
.next {
position: absolute;
top: 65%;
right: 0
}
.prev {
position: absolute;
top: 65%;
right: 90 /* change to left:0; if u wanna have arrow on left side */
}
</style>
</head>
<!-- Body of HTML document -->
<body>
<div class="slider">
<div class="banner">
<ul>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
</ul>
</div>
←
→
</div>
</body>
</html>
Related
The interface shown below toggles if the toggle button is clicked. For now I used only opacity to toggle the visibility but it doesn´t look even close what I am trying to achieve. I am trying to visualize the whole div in a way, that it look like it is pushed from the background to the front. You may know those child toys (nailboards).
Update - modified the code:
I added #keyframes for the opacity, visibility and box-shadow which I reversed. The result is ok but the could be improved. Overall I am fine with it but for sure an CSS would improve that easily.
$("#toggle").click(function() {
$(".wrapper").toggleClass("animate")
$(".properties").toggleClass("animate")
$(".button").toggleClass("animate-button")
})
body {
font-size: 14px;
font-family: 'Lato', sans-serif;
text-align: left;
color: #757575;
cursor: default;
overflow: hidden;
background: #ECF0F3;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 350px;
padding: 40px 35px 35px 35px;
margin: 30px;
border-radius: 20px;
background: #ecf0f3;
visibility: hidden;
}
.animate {
animation-name: fadeInDiv;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.animate-button {
animation-name: fadeInButton;
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes fadeInDiv {
0% {
opacity: 0.8;
visibility: visible;
box-shadow: inset 0px 0px 0px #cbced1,
inset -0px -0px 0px #ffffff;
}
100% {
opacity: 1;
visibility: visible;
box-shadow: inset 10px 10px 10px #cbced1,
inset -10px -10px 10px #ffffff;
}
}
#keyframes fadeInButton {
0% {
box-shadow: 0px 0px 0px #b1b1b1,
-0px -0px 0px #ffffff;
}
100% {
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
}
}
#title {
text-align: center;
font-size: 24px;
padding-top: 10px;
letter-spacing: 0.5px;
}
.visible {
visibility: visible;
}
#sub-title {
text-align: center;
font-size: 15px;
padding-top: 7px;
letter-spacing: 3px;
}
.field-icon {
font-family: FontAwesome;
font-size: 16px;
padding-left: 10px;
padding-right: 10px;
width: 40px;
color: #F59B69;
}
.fields {
width: 100%;
padding: 45px 5px 5px 5px;
}
.fields input {
border: none;
outline: none;
background: none;
font-size: 16px;
color: #555;
padding:20px 10px 20px 5px;
width: fit-content;
}
.properties {
padding-left: 10px;
margin-bottom: 20px;
border-radius: 25px;
}
#confirm-button {
position: relative;
bottom: 0;
left: 0;
outline: none;
border:none;
cursor: pointer;
width:100%;
height: 50px;
border-radius: 30px;
font-size: 20px;
color:#fff;
text-align: center;
background: #F59B69;
margin-top: 30px;
}
#cancel-button {
position: absolute;
top: 0;
right: 0;
margin: 20px;
outline: none;
border:none;
cursor: pointer;
width: 50px;
height: 30px;
border-radius: 30px;
font-size: 14px;
color:#fff;
text-align: center;
background: #F59B69;
}
#confirm-button:hover, #cancel-button:hover {
background:#fff;
color: #F59B69;
}
#confirm-button:active, #cancel-button:active {
box-shadow: inset 3px 3px 8px #b1b1b1,
inset -3px -3px 8px #ffffff;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>CSS Playground</title>
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button id="toggle">toggle</button>
<div class="wrapper">
<div id="title">Title</div>
<div id="sub-title">Sub-Title</div>
<div class="fields">
<div class="properties"><span class="field-icon"><i class="fa-solid fa-pen-to-square"></i></i></span><input placeholder="name"></div>
<div class="properties"><span class="field-icon"><i class="fa-solid fa-palette"></i></span><input placeholder="color"></div>
<button class="button" id="confirm-button"><i class="fas fa-check-circle"></i></button>
</div>
<button class="button" id="cancel-button"><i class="fas fa-times-circle"></i></button>
</div>
</body>
</html>
I think you are searching for animating visibility so it appears like a
pin?
Although Animation in visibility is not really a thing Why visibilty animation doesn't work: Stackoverflow: Pure CSS animation visibility with delay (it steps instead of moves slowly) so you should ease in and ease out the effects that appear to give the DIV depth.
I can't be sure if you want the div to always be visible or just make it visible and then animate into the nailbord type.
In that case:
visibility: hidden; -> visibility: visible;
followed by:
shadows / effects just after that with the same type (place a div under it or something)
If it's not clear I'll try to make an example this weekend.
Basically the elements within my nav dropdown menu are displaying before its parent div has been toggled on using JQuery.toggleClass().
This is a simple problem but for whatever reason Im just hitting my head against the wall.
HTML:
<div id="navCont">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="nav">
home
work
cont
</div>
See JS fiddle: https://jsfiddle.net/ywkxyjx3/1/
I have tried a few obvious solutions within the CSS/Jquery such as settings the visibility to hidden or display none and toggling it. All of which has failed.
If anyone has a better method of creating the hamburger dropdown I would appreciate it.
Thanks
Because your container contains an overflowing element:
.nav {
position: absolute;
display: block;
height: 0px;
overflow: hidden; // Change this.
float: right;
top: 55px;
opacity: 1;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
Technically, your solution works, but if we use Chrome's DevTools, we see that the elements are overflowing from the 0 height parent container. Adding overflow: hidden to the parent hides them.
Working snippet:
$(".burger").click(function() {
$(".nav").toggleClass("show", 900);
$(".burger").toggleClass("change");
});
#navCont {
width: 47px;
height: auto;
float: right;
}
/*Dropdown Nav*/
.nav {
position: absolute;
display: block;
overflow: hidden;
height: 0px;
float: right;
top: 55px;
opacity: 99;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.nav a {
color: black;
text-decoration: none;
}
.show {
height: auto;
max-height: 999px;
}
.burger {
/* box around hamburger. Has onclick function*/
display: inline-block;
position: relative;
float: right;
padding: 5px;
cursor: pointer;
}
/*Individual lines of burger*/
.bar1,
.bar2,
.bar3 {
width: 36px;
height: 4px;
border-radius: 2px;
background-color: #95449a;
margin: 6px 0;
/*seperate the lines*/
transition: 1s;
/*time taken for any animation to take place */
}
/*in html classlist.toggle(change)*/
.change .bar1 {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.change .bar2 {
opacity: 0;
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.change .bar3 {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="navCont">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="nav">
home
work
cont
</div>
</div>
Check this if it help at your end, this is different from your setup.
I hope it help you at your end.
Here is the complete code :
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
I hope it works for you.
Thanks!
just add
height:0px;
overflow:hidden;
to your .nav class
fiddle
Do you want something like this?
Differences:
Animated max-height instead of height.
Added overflow: hidden to the .nav element.
Added CSS transition duration and easing.
// first, get the max-height on page load
$(document).ready(function(){
$(".nav").css("max-height", $(".nav").height()).addClass("zero");
});
$(".burger").click(function() {
// set max-height to 0 or remove the limitation
$(".nav").toggleClass("zero");
$(".burger").toggleClass("change");
});
#navCont {
width: 47px;
height: auto;
float: right;
}
/*Dropdown Nav*/
.nav {
position: absolute;
display: block;
float: right;
top: 55px;
opacity: 99;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
transition: max-height 0.9s linear;
overflow: hidden;
}
.nav a {
color: black;
text-decoration: none;
}
.zero {
max-height: 0 !important;
}
.burger {
/* box around hamburger. Has onclick function*/
display: inline-block;
position: relative;
float: right;
padding: 5px;
cursor: pointer;
}
/*Individual lines of burger*/
.bar1,
.bar2,
.bar3 {
width: 36px;
height: 4px;
border-radius: 2px;
background-color: #95449a;
margin: 6px 0;
/*seperate the lines*/
transition: 1s;
/*time taken for any animation to take place */
}
/*in html classlist.toggle(change)*/
.change .bar1 {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.change .bar2 {
opacity: 0;
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.change .bar3 {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navCont">
<div class="burger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="nav">
home
work
cont
</div>
</div>
.nav {
position: absolute;
display: block;
height: 0px;
float: right;
top: 55px;
opacity: 99;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
Maybe cause you display them? Toggle between display none and block?
So, I have a modal window in a website that I'm devloping.
The modal is made out of pure CSS, to open it and close it I have javascript functions wich change the css elements to make the modal show/hide.
CSS of the modal:
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background:white;
display: table;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.btnEncomendarProduto {
background-color:#D60E12;
color:white;
border-radius:5px;
font-size: 12px;
white-space:normal;
cursor:pointer;
text-transform: initial;
border:1px solid #D60E12;
margin-top:3px;
}
</style>
So the problem is when I have a something that displays too much information on the modal, this happens:
So I think I need a scroll bar on the div inside the modal. How can I do that?
Thank you.
If you have an inner div that expands with the content of the actual modal, you can set the max-height of that div to be something--like 75vh--and add overflow-y: auto to that container, and it will automatically add a scrollbar when the content gets longer than that set max-height.
HTML
<div class="Content">
<p>
This is the page contents.
</p>
</div>
<div class="Modal" id="modal">
<div class="Contents">
<h1>Modal</h1>
<p id="text-area">
[large amounts of content]
</p>
</div>
</div>
CSS
body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.Content
{
position: relative;
width: 100%;
}
.Modal
{
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3); // light grey background
}
.Modal.Open
{
display: block;
}
.Modal .Contents
{
overflow-y: auto;
display: block;
position: relative;
width: 90%;
margin: 5% auto 0;
max-height: 90vh;
padding: 5px;
background: #fff;
}
Note the .Modal .Contents selector and how it works.
JSFiddle Example: https://jsfiddle.net/nj6r0sjw/
I want to make the button in top right and what it showed after click on it at the corrner of codepen.io site. Someone can fix my code and indicate the errors ?
$(document).ready(function(){
$(".nut").click(function(){
$(".choose").toggle(200);
});
});
#import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
html, body{
font-family: 'Open Sans', sans-serif;
}
#container{
background-color: #0d0d0d;
}
.nut{
position: absolute;
top: 10px;
right: 10px;
}
.nut a img{
border-radius: 3px;
cursor: pointer;
height: 44px;
}
.choose{
border: 1px solid black;
width: 200px;
height: 350px;
position: absolute;
top: 64px;
right: 0;
display: hidden;
}
.choose ul{
padding: 0px;
list-style-type: none;
}
.choose .one li{
cursor: pointer;
position: ralative;
padding: 8px 15px 10px;
}
.choose .one li a{
font-size: 15px;
}
.choose .one li:nth-child(7){
border-bottom: 1px solid black;
margin-bottom: 3px;
}
.choose .one li:hover{
background-color: #e6e6e6;
}
.choose .two li{
padding: 0 ;
display: inline;
opacity: .5;
}
.choose .two ul li{
font-size: 7px;
}
.choose .two li:hover{
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nut">
<a><img src="//gravatar.com/avatar/7630787fd05d0b926f921213710bb074?s=80">
</a>
</div>
<div class="choose">
<ul class="one">
<li><a>New Pen</a></li>
<li><a>New Post</a></li>
<li><a>Recent Activity</a></li>
<li><a>Embed Theme Builder</a></li>
<li><a>Settings</a></li>
<li><a>Help</a></li>
<li><a>Log Out</a></li>
<li><a>Your Profile</a></li>
<li>
<ul class="two">
<li><a>Pens</a></li>
<li><a>Posts</a></li>
<li><a>Collections</a></li>
</ul>
<li>
</ul>
</div>
Have a look at my example. all you need to do is have the proper CSS and toggle the open class: JSFiddle
$(document).ready(function(){
$(".user-stuff").click(function(){
$('.user-dropdown').toggleClass('open');
});
});
#import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
a {
font-family: 'Lato';
}
.user-dropdown {
background: white;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
position: absolute;
top: 100%;
padding: 5px 0;
width: 200px;
color: #222;
opacity: 0;
visibility: hidden;
-webkit-transition: -webkit-transform 0.15s, opacity 0.15s;
transition: transform 0.15s, opacity 0.15s;
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right
}
.open.user-dropdown {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
#mini-personal-avatar {
border-radius: 2px;
cursor: pointer
}
.link-list,
.link-list ul,
.link-list ol {
list-style: none
}
.link-list a {
color: black;
display: block;
padding: 8px 15px 10px;
line-height: 1.1;
text-shadow: none;
text-decoration: none
}
.link-list a:hover,
.link-list a:focus {
color: inherit;
background: #E7E7E7
}
.link-list a.active {
background: #ccc
}
.link-list a.active .view-meta {
color: #666
}
.user-dropdown {
top: 45px;
left: 0 !important;
right: 0;
}
.user-dropdown>li {
position: relative
}
.user-dropdown>li.sep-after {
border-bottom: 1px solid #666;
padding-bottom: 5px
}
.user-dropdown>li.sep-after+li {
padding-top: 5px
}
.user-dropdown .context-switcher {
position: relative;
padding: 0 !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user-stuff header-chunk">
<img id="mini-personal-avatar" src="//gravatar.com/avatar/b10c8837fdebfca4078b6bad5217c2de?s=80" width="44" height="44" class="user-avatar" alt="User Gravatar" data-dropdown="#user-dropdown">
</div>
<ul class="user-dropdown link-list is-dropdown" id="user-dropdown">
<li class="dropdown-newpen">
<a href="/pen/">
New Pen
</a>
</li>
<li class="dropdown-newpost">
<a href="/write/">
New Post
</a>
</li>
<li class="dropdown-activity">
<a href="/ilanus/activity/">
Recent Activity
</a>
</li>
<li class="dropdown-embedbuilder">
<a href="/ilanus/embed/builder/public/">
Embed Theme Builder
</a>
</li>
<li class="dropdown-yoursettings">
<a href="/ilanus/settings/editor/">
Settings
</a>
</li>
<li class="dropdown-help">
<a href="http://blog.codepen.io/documentation/">
Help
</a>
</li>
<li class="dropdown-logout sep-after">
<a href="/login/logout" id="logout">
Log Out
</a> </li>
</ul>
My html is:-
<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<link
rel="stylesheet"
type="text/css"
href="css/index.css"
>
<title>Best company in the USA</title>
</head>
<body>
<div class="menu">
<h2>MENU</h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<nav role="navigation">
<div class="navWrap">
<h2 class="navClose"></h2>
<ul>
<li>Home</li>
<li></li>
<li>About us</li>
<li></li>
<li><a href="somelink.com">
Services</a></li>
<li></li>
<li>Locations</li>
<li></li>
<li>Contact Us</li>
<li></li>
</ul>
</div>
</nav>
<div class="content">
<section class="first"></section>
</div>
</body>
</html>
My css is:-
#CHARSET "US-ASCII";
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-selection {
background: none repeat scroll 0% 0% #D8262E;
}
::selection {
background: none repeat scroll 0% 0% #D8262E;
}
ul {
list-style: none outside;
clear: both;
}
.menu {
position: absolute;
float: right;
cursor: pointer;
float: right;
z-index: 1000;
top: 25px;
right: 20px;
}
.menu h2 {
display: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)
}
#media only screen and (min-width:768px) {
.menu {
top: 32px;
right: 40px;
}
.menu h2 {
display: inline-block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
font-family: "Karla", Arial, sans-serif;
font-size: 20px;
margin: 0px 5px 0px 0px;
text-transform: uppercase;
vertical-align: top;
}
}
.menu ul {
display: inline-block;
height: 30px;
margin: 0;
padding: 0;
vertical-align: top;
width: 25px;
margin: 0;
}
.menu ul li {
background: white;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
height: 3px;
margin: 3px 0;
width: 100%;
}
html,nav,section,div {
display: block;
vertical-align: baseline;
margin: 0px;
padding: 0px;
border: 0px none;
}
nav[role="navigation"] {
background: #00e000;
overflow: hidden;
padding: 0 40px;
position: absolute;
top: 0;
right: 0;
text-align: left;
width: 13em;
z-index: 10;
}
.menu,.content,.first {
-webkit-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97);
-webkit-transition-delay: 0s;
-moz-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s;
-o-transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s;
transition: all 340ms cubic-bezier(0.905, 0.015, 0.65, 0.97) 0s
}
.first {
background-color: #d8262e;
/* background: no-repeat scroll center transparent; */
width: 100%;
/* height: 600px; */
top: 0;
z-index: 30;
}
.first:before {
height: 100%;
content: "";
display: inline-block;
vertical-align: middle;
background-color: #38262e;
}
.first:after {
background-color: #38262e;
}
.content {
/* margin-top: -8px;
margin-left: -7px;
margin-right:-7px; */
/* padding-top:-10px; */
}
content:before,content:after {
content: "";
display: table;
line-height: 0;
}
content:after {
clear: both;
}
Jquery is:-
$(document) .ready(function () {
windowHeight = 0.9 * $(window) .innerHeight();
$('.first').height(windowHeight);
$(window) .resize(function () {
windowHeight = 0.9 * $(window) .innerHeight();
console.log("height: " + windowHeight);
});
});
So, there is a peculiar problem I'm facing now. Somehow, I'm getting 8-10px or margin from each side in the content class. I have a solution for this. If I comment out the css in .content, it works for me.
But, it would be great to know if my naive solution can get better. Or if somebody would help me point out the root cause for the extra margin, it would be great.
Here is a jsfiddle for this: http://jsfiddle.net/kSdHU/
Thanks.
You should reset your elements.
Just add:
* { margin: 0; padding: 0; }
Demo
To make sure you never run into weird styling issues like this I suggest using a css reset. It will basically reset your browsers default styles so you aren't getting unwanted styling of elements. I normally use Eric Meyers Reset but there are many out there.