|
Shift Out / X-On
Join Date: Jul 2007
Location: unknown
Posts: 2,298
|
Working code below is the http://callmenick.com/post/slide-and...s3-transitions source code with bits of your css but now you have to eliminate things step by step to see what was the problem.
Couldn't figure it out so I started from the begining.
Hope that helps.
index.html
Code:
<html lang="en" class="no-js"><head>
<!-- title and meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Slide and push menus that are initially hidden off screen, and transition into view with CSS transitions.">
<title>Slide And Push Menus With CSS3 Transitions</title>
<!-- css -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/font-awesome/font-awesome.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="">
<nav class="menu slide-menu-left">
<ul>
<li><button class="close-menu">← Close</button></li>
<li><a href="#">Broccoli</a></li>
<li><a href="#">Tomato</a></li>
<li><a href="#">Cucumber</a></li>
<li><a href="#">Kale</a></li>
<li><a href="#">Celery</a></li>
</ul>
</nav><!-- /slide menu left -->
<!-- /slide menu right -->
<!-- /slide menu top -->
<!-- /slide menu bottom -->
<!-- /push menu left -->
<!-- /push menu right -->
<!-- /push menu bottom -->
<div id="wrapper">
<div class="info-bar">
<div class="container">
<a href="http://www.callmenick.com/?p=458" class="icon fa fa-home" data-title="Back To Tutorial"></a>
<a href="http://callmenick.com/tutorial-demos/image-caption-reveal-on-hover/" class="icon fa fa-arrow-left" data-title="Pevious Demo"></a>
<!-- <a href="" class="icon fa fa-arrow-right" data-title="Next Demo"></a> -->
<a href="http://callmenick.com/tutorial-demos/slide-push-menus/slide-push-menus.zip" class="icon fa fa-download" data-title="Download Source"></a>
<a href="http://www.callmenick.com/tutorials" class="icon fa fa-folder-open" data-title="Tutorial Archives"></a>
</div>
</div><!-- /.info-bar -->
<header>
<div class="branding">
<div class="container clearfix">
<div class="logo">
<a href="http://www.callmenick.com">
<img src="img/logo.png" alt="Call Me Nick - Tutorials, Resources, & Articles for Web Design & Web Development">
</a>
</div>
<div class="social">
<a href="https://www.facebook.com/callmenick1" target="_blank" class="fb">facebook</a>
<a href="https://twitter.com/nicksalloum_" target="_blank" class="twitter">twitter</a>
<a href="https://plus.google.com/115555859876227750152/" target="_blank" class="googleplus">google plus</a>
<a href="http://feeds.feedburner.com/callmenick_" target="_blank" class="rss">rss</a>
<a href="http://www.callmenick.com/subscribe/" class="email">email</a>
</div>
</div>
</div><!-- /.branding -->
<div class="site-title">
<div class="container">
<h1>Off Screen Menus That Transition Into View Using CSS3</h1>
</div>
</div>
</header>
<div id="main">
<div class="container">
<div class="buttons">
<button class="nav-toggler toggle-slide-left">Slide Menu Left</button>
</div><!-- /buttons -->
<section class="content">
<h1>Vegetables</h1>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
</section>
</div>
</div><!-- #main -->
<footer>
<div class="container">
<div class="clearfix">
<aside>
<ul>
<li><a href="http://www.callmenick.com/">Welcome</a></li>
<li><a href="http://www.callmenick.com/category/tutorials">Tutorials</a></li>
<li><a href="http://www.callmenick.com/category/snippets">Snippets</a></li>
<li><a href="http://www.callmenick.com/category/articles">Articles</a></li>
<li><a href="http://www.callmenick.com/category/resources">Resources</a></li>
</ul>
</aside>
<aside>
<ul>
<li><a href="http://www.callmenick.com/about">About</a></li>
<li><a href="http://www.callmenick.com/contact">Contact</a></li>
<li><a href="http://www.callmenick.com/subscribe">Subscribe</a></li>
</ul>
</aside>
<aside class="logo">
<a href="http://www.callmenick.com/">
<img src="img/logo.png" alt="Tutorials, Snippets, Resources, and Articles for Web Design and Web Development">
</a>
</aside>
</div>
<div class="copyright">
<span>
© 2014, Nick Salloum<br>
<a href="http://callmenick.com" target="_blank">callmenick.com</a>
</span>
</div>
</div>
</footer><!-- /footer -->
</div><!-- /#wrapper -->
<!-- js -->
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script src="js/classie.js"></script>
<script src="js/nav.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34160351-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body></html>
base.css
Code:
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* CSS Reset
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
font-weight: normal;
}
ol,
ul {
list-style: none
}
blockquote {
quotes: none
}
blockquote:before,
blockquote:after {
content: '';
content: none;
}
del {
text-decoration: line-through
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Globals
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #67b5d1;
color: #505050;
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
/* line-height: 1.8; */
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1;
font-weight: 400;
}
a {
text-decoration: none;
color: #67b5d1;
}
a:hover {
color: #3184a1
}
/* clear floated divs */
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Template
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
#wrapper {
width: 100%;
margin: 0 auto;
}
#main {
background-color: #fff;
padding: 30px 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Info Bar
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
#info-bar {
background-color: #40a2c5
}
#info-bar a {
color: white;
font-size: 14px;
text-transform: uppercase;
display: inline-block;
margin: 0;
padding: 10px;
}
#info-bar a:hover {
background-color: #3184a1
}
span.all-tutorials,
span.back-to-tutorial {
display: block;
width: 50%;
}
span.all-tutorials {
float: left;
text-align: left;
}
span.back-to-tutorial {
float: right;
text-align: right;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Header
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
header {
padding: 30px 0
}
#title {
text-align: center
}
#title h1 {
color: #fff;
font-size: 30px;
margin-bottom: 10px;
}
#title h2 {
color: #b5dbe9;
font-size: 20px;
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Footer
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
footer {
padding: 30px 0;
text-align: center;
}
footer span {
color: #fff
}
footer span a {
color: #b5dbe9
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
@media all and (max-width: 600px) {
#info-bar a {
display: block
}
span.all-tutorials,
span.back-to-tutorial {
width: 100%
}
span.all-tutorials,
span.back-to-tutorial {
float: none;
text-align: center;
}
span.all-tutorials {
border-bottom: solid 1px #3184a1
}
#title h1 {
font-size: 20px
}
#title h2 {
font-size: 16px
}
}
style.css
Code:
body { margin:0px 0px; text-align:center; font-family:'Comic Sans MS',Arial,sans-serif; font-size:20px; color:#00f600; background:#000000; }
a:link { color:#00ce00; }
a:visited { color:#00a700; }
a:hover { color:#1eff1e; text-decoration:none; }
a:active { color:#6cff6c; text-decoration:none; }
body {
overflow-x: hidden
}
#wrapper {
position: relative;
z-index: 10;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
section {
margin-bottom: 30px
}
section h1 {
font-family: "Oswald", sans-serif;
margin-bottom: 10px;
}
section p {
margin-bottom: 30px
}
section p:last-child {
margin-bottom: 0
}
section:last-child {
margin-bottom: 0
}
section.toggle {
text-align: center
}
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 15;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
nav.menu {
position: fixed;
z-index: 20;
background-color: #003300;
overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav.menu a {
font-weight: 200;
color: #00ff00;
}
button.close-menu {
background-color: #006600;
color: #00ff00;
}
button.close-menu:focus {
outline: none
}
nav.slide-menu-left {
top: 0;
width: 200px;
height: 100%;
}
nav.slide-menu-left li {
display: block;
text-align: center;
}
nav.slide-menu-left li:first-child {
border-top: none
}
nav.slide-menu-left li:last-child {
border-bottom: none
}
nav.slide-menu-left a {
display: block;
padding: 1px;
font-size: 14px;
}
nav.slide-menu-left button.close-menu {
margin: 10px 0;
padding: 10px 30px;
background-color: #006600;
color: #00ff00;
}
nav.slide-menu-left {
left: -200px}
body.sml-open nav.slide-menu-left {
left: 0
}
|