web page displays abnormally on google-chrome - javascript

The photo slideshow can't display on google-chrome, but it looks perfect on firefox. The code is here:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxxxx</title>
<meta name="keywords" content="xxxxxxxxx" />
<meta name="description" content="xxxxxxx, New York" />
<link rel="shortcut icon" href="css/favicon.ico">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link type="text/css" rel="stylesheet" href="css/tn3e/tn3e.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tn3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tn1 = $('.mygallery').tn3({
skinDir:"css",
autoplay:true,
width:768,
delay:5000,
skin:"tn3e",
imageClick:"url",
image:{
crop:true,
transitions:[{
type:"blinds",
duration:300
},
{
type:"grid",
duration:160,
gridX:9,
gridY:7,
easing:"easeInCubic",
sort:"circle"
},{
type:"slide",
duration:430,
easing:"easeInOutExpo"
}]
}
});
});
</script>
</head>
<body>
<figure class="logo">
<img src="css/vbccr.jpg" alt="logo" />
</figure>'
<div class="nav_example">
<div class="menu">
<span>'
<ul id="nav">
<li>主页<br />Home
<div class="subs">
<div>
<ul>
<li><h3>关于我们<br />About Us</h3>
<ul>'
<li>陈述</li>
<li>历史沿革</li>
<li>联系我们</li>
</ul>
</li>
<li><h3>冯师<br />Feng</h3>
<ul>'
<li>简介</li>
<li>寄语</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>主拜<br />Sunday
<div class="subs">
<div class="wrp2">
<ul>'
<li><h3>时间地点<br />Time & Location</h3></li>
<li><h3>师道<br />Sermons</h3>
<ul>'
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
<li>2008</li>
</ul>
</li>
</ul>
<p class="sep"></p>
<ul>
<li><h3>人学<br />School</h3>
<ul>'
<li>新班</li>
<li>门班</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
</div>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
<!-- This is gallery setting -->
<div class="mygallery">
<div class="tn3 album">
<h4>Large Images</h4>
<div class="tn3 description">Large Images</div>
<div class="tn3 thumb">images/114x72/3.jpg</div>
<ol>
<li>
<h4>Hdfae</h4>
<div class="tn3 description">daa</div>
<img src="images/114x72/1.jpg" alt="demo" />
</li>
<li>
<h4>Isolated</h4>
<div class="tn3 description">island</div>
<img src="images/114x72/2.jpg" alt="demo" />
</li>
<li>
<h4>Town</h4>
<div class="tn3 description">Herceg</div>
<img src="images/114x72/3.jpg" alt="demo" />
</li>
</ol>
</div>
<div class="tn3 album">
<h4>Fixed</h4>
<div class="tn3 description">Images</div>
<div class="tn3 thumb">images/114x72/1.jpg</div>
<ol>
<li>
<h4>Wall</h4>
<div class="tn3 description">Jai</div>
<img src="images/114x72/6.jpg" alt="demo" />
</li>
<li>
<h4>City</h4>
<div class="tn3 description">Ne</div>
<img src="images/114x72/7.jpg" alt="demo" />
</li>
</ol>
</div>
</div>
</body>
</html>
tn3e.css:
#charset "utf-8";
.tn3e-gallery {
position:relative;
width: 960px;
height: 550px;
background-color:#c5c5c5;
background-image: url('grad.jpg');
background-position:center center;
background-repeat:no-repeat;
line-height: normal;
}
.tn3e-image {
position:absolute;
left: 20px;
top: 20px;
width: 920px;
height: 360px;
background-color: #000000;
}
/*
.tn3e-full-image {
box-shadow: 0 0 5px rgba(40, 40, 40, 1);
-webkit-box-shadow: 0 0 5px rgba(40, 40, 40, 1);
-moz-box-shadow: 0 0 5px rgba(40, 40, 40, 1);
}
*/
.tn3e-control-bar {
position:absolute;
background: url('bg.png') repeat;
width:243px;
height:80px;
}
.tn3e-thumbs ul, .tn3e-thumbs li {
margin: 0;
}
.tn3e-thumbs {
position:absolute;
width:920px;
height:80px;
bottom:20px;
left:20px;
background-image: url('thumb_bg.png');
background-repeat:repeat-x;
padding-top:2px;
}
.tn3e-thumb {
padding: 2px;
cursor:pointer;
}
.tn3e-thumb-selected {
cursor:default;
}
.tn3e-thumb img {
width: 114px;
height:72px;
}
.tn3e-next {
position:absolute;
background-image:url('tn3e.png');
background-position:-20px -3px;
width: 13px;
height: 17px;
right:33px;
bottom:126px;
cursor:pointer;
}
.tn3e-next:hover {
background-position:-20px -23px;
}
.tn3e-prev {
position:absolute;
background-image:url('tn3e.png');
background-position:-2px -3px;
width: 13px;
height: 17px;
left:30px;
bottom:126px;
cursor:pointer;
}
.tn3e-prev:hover {
background-position:-2px -23px;
}
.tn3e-preloader {
position:absolute;
width: 22px;
height: 8px;
right:5px;
top:5px;
}
.tn3e-text {
position: absolute;
left: 64px;
bottom: 110px;
width: 832px;
height: 40px;
vertical-align:middle;
overflow: hidden;
}
.tn3e-image-title {
font-family: Tahoma, Helvetica, sans-serif;
color:#3f4146;
font-size:12px;
width:100%;
text-align:center;
font-weight:bold;
}
.tn3e-image-description {
font-family: Tahoma, Helvetica, sans-serif;
color:#3f4146;
width:100%;
text-align:center;
font-size:10px;
}
.tn3e-timer {
position:absolute;
width: 100%;
height: 4px;
bottom: 0px;
background: url('bg.png') repeat;
background: rgba(0, 0, 0, 0.3);
}
.tn3e-play {
position:absolute;
background-image:url('tn3e.png');
background-position:-2px -80px;
left:94px;
top:12px;
width:57px;
height:57px;
cursor:pointer;
}
.tn3e-play:hover {
background-position:-64px -80px;
}
.tn3e-play-active {
background-position:-2px -139px;
}
.tn3e-play-active:hover {
background-position:-64px -139px;
}
.tn3e-show-albums {
position:absolute;
background-image:url('tn3e.png');
background-position:-35px -39px;
top:22px;
left:23px;
width:37px;
height:36px;
padding:0;
margin:0;
cursor:pointer;
}
.tn3e-show-albums:hover {
background-position:-76px -39px;
}
.tn3e-fullscreen {
position:absolute;
background-image:url('tn3e.png');
background-position:-35px -1px;
top:22px;
right:23px;
width:37px;
height:36px;
cursor:pointer;
}
.tn3e-fullscreen:hover {
background-position:-76px -1px;
}
.tn3e-albums {
position:absolute;
width: 920px;
height: 510px;
left:20px;
top:20px;
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
background-image:url('bg.png');
background: rgba(0, 0, 0, 0.8);
}
.tn3e-albums h4 {
position: absolute;
margin-top: 1.33em;
font-weight: bold;
left: 34px;
top: 10px;
font-size: 18px;
color: #c7c8c9;
}
.tn3e-inalbums {
position:absolute;
top: 80px;
width: 920px;
height: 350px;
padding: 20px;
}
.tn3e-album {
position:absolute;
width: 420px;
height: 66px;
background-color:#111111;
overflow: hidden;
cursor:pointer;
font-size: medium;
}
.tn3e-album-over {
background-color:#222;
}
.tn3e-album-selected {
background-color:#cdcdcd;
color:#111214;
cursor:default;
}
.tn3e-album-image {
height: 100%;
margin-right: 1em;
overflow:hidden;
float: left;
}
.tn3e-album-title {
font-size:13px;
font-weight:bold;
margin-top: 1em;
}
.tn3e-album-description {
font-size:0.6em;
height: 3em;
line-height: 1.6em;
overflow: hidden;
}
.tn3e-albums-next {
position:absolute;
background-image:url('tn3e.png');
background-position:-217px -1px;
width: 97px;
height: 37px;
right:20px;
bottom:20px;
cursor:default;
}
.tn3e-albums-next-over {
background-position:-217px -40px;
cursor:pointer;
}
.tn3e-albums-prev {
position:absolute;
background-image:url('tn3e.png');
background-position:-117px -1px;
width: 97px;
height: 37px;
left:20px;
bottom:20px;
cursor:default;
}
.tn3e-albums-prev-over {
background-position:-117px -40px;
cursor:pointer;
}
.tn3e-albums-close {
position:absolute;
background-image:url('tn3e.png');
background-position:-125px -80px;
width: 27px;
height: 27px;
right:31px;
top:30px;
cursor:pointer;
}
.tn3e-albums-close:hover {
background-position:-155px -80px;
}
/* when javascript is disabled */
.tn3.album, .tn3.album li {
float:left;
list-style-type: none;
margin:4px;
}
.tn3.album div, .tn3.album li h4, .tn3.album li div{
display:none;
}
style.css:
body {
background:white;
margin:0px auto;
padding:0;
width: 768px;
color:#eee;
font-size:medium;
font-family:Tahoma,Arial,Verdana,sans-serif;
}
.logo {
padding:inherit;
margin:inherit;
}
.logo > img {
width: 768px;
display:block;
}
.nav_example {
background:url(navigation_bar.gif) no-repeat;
width:100%;
height:60px;
margin:inherit;
/* border:1px #000 solid; */
/* border-radius:3px; */
/* -moz-border-radius:3px; */
/* -webkit-border-radius:3px; */
}
/* main menu styles */
.menu {
padding-top:9px;
text-align:center;
width:100%;
}
.menu > span {
display:inline-block;
margin:10 auto;
}
#nav {
display:inline;
text-align:center;
/* text-align:left; */
position:relative;
list-style-type:none;
}
#nav > li {
float:left;
padding:0;
position:relative;
}
#nav > li > a {
/* border:1px solid transparent; */
color:#eee;
display:block;
font-size:1.05em;
padding:3px 10px;
position:relative;
text-decoration:none;
}
#nav > li > a:hover {
color:#fefefe;
background-color:#d10e15;
/* border-color:#999 */
}
#nav > li.selected > a {
background-color:#d10e15;
color:#fefefe;
z-index:0;
}
#nav li div {
position:relative;
}
#nav li div div {
background-color:#1a1a1a;
display:none;
font-size:1em;
margin:0;
padding:0;
position:absolute;
top:5px;
z-index:1;
width:200px;
}
#nav li div div.wrp2 {
width:400px;
}
#nav .sep {
left:200px;
border-left:1px solid #2a2a2a;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left:5px;
padding-right:5px;
position:relative;
width:190px;
float:left;
list-style-type:none;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
border-bottom:1px solid #3a3a3a;
color:#1da0ff;
font-weight:bold;
font-size:0.95em;
margin:8px 0px;
padding:3px 0px;
}
#nav li div ul li h3 a {
color:#1da0ff;
display:block;
text-decoration:none;
}
#nav li div ul li h3 a:hover{
background-color:#d10e15;
color:#fefefe;
}
#nav li ul ul {
padding:0 0 8px;
}
#nav li ul ul li {
margin:0;
padding:0;
}
#nav li ul ul li a {
color:#eee;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
font-size:0.95em;
}
#nav li ul ul li a:hover{
background-color:#d10e15;
color:#fefefe;
}
The jquery.min.js is the latest from google. And jquery.tn3.min.js is from:
/*!
* tn3 v1.1.0.28
* http://tn3gallery.com/
*
* License
* http://tn3gallery.com/license
*
* Date: 29 Jul, 2011 16:21:54 +0300
*/
And by the way, the favicon can't show in google-chrome either, but successfully in firefox. Does anyone have any idea?


try using a css reset http://meyerweb.com/eric/tools/css/reset/, if you provide more information on how the page is behaving would be better

Related

Link does not stay open and active

i have created a navigation that navigates back and forth between sections. I have styled two lists that are supposed to fulfill this task.
List: the active link works there as soon as I click a link. The text and the point are unfortunately upside down. When I change the order, the list name / Nav remains in the visible area
List: there the point and the name are arranged correctly but the active link cannot be combined somehow.
In both examples, the active link does not remain open. I've been trying it out for a long time and I'm a bit overwhelmed.
$('#menu li a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:rgba(255,255,255,.5);
border-right:1px solid #e5e5e5;
position:fixed;
top:0;
bottom:0;
height:100%;
right:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#999;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
.active{
background-color:#f30;
}
section {
height: 100vh;
color: rgba(255,255,255, .5);
font-size: 20vh;
}
section:nth-child(odd) {
background: blue
}
section:nth-child(even) {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="nav" class="area"></div><nav class="main-menu">
<ul id="menu">
<li class="active">
<a href="#slide01" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 1
</span>
</a>
</li>
<li class="has-subnav">
<a href="#slide02" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 2
</span>
</a>
</li>
<li class="has-subnav">
<a href="#slide03" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 3
</span>
</a>
</ul>
</nav>
<section id="slide01">Section 1</section>
<section id="slide02">Section 2 </section>
<section id="slide03">Section 3</section>
</body>
</html>
h2 {
text-align: center;
font-size: 3em !important;
}
#nav {
position: fixed;
height: 100%;
right: 0;
z-index: 1;
top: 0;
background: rgba(255, 255, 255, .5);
padding: 5px;
box-shadow: 0 0 6px #555;
}
.list-group-item {
background-color: rgba(0,0,0,0) !important;
border: none !important;
font-size: 2em;
}
.list-group-item a, .list-group-item a:hover {
color: #fff;
text-decoration: none;
}
.inner {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.inner a, .inner a:hover {
color: #fff;
text-decoration: none;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
section {
height: 100vh;
color: rgba(255,255,255, .5);
font-size: 20vh;
}
section:nth-child(odd) {
background: blue
}
section:nth-child(even) {
background: red
}
.test {
padding: 0 15px !important;
}
.test:hover .later {
display: block;
text-align: right;
}
.test:hover .before {
display: none;
}
.test .later {
display: none;
z-index: 100;
}
.test .before {
display: block;
z-index: 50;
text-align: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section id="slide01">Section 1</section>
<section id="slide02">Section 2 </section>
<section id="slide03">Section 3</section>
<section id="slide04">Section 4</section>
<section id="slide05">Section 5</section>
<nav id="nav">
<div class="inner">
<ul class="list-group">
<li class="list-group-item"><a href="#slide01">
<div class="test"><span class="before"> •</span><span class="later">Nav 1 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide02">
<div class="test"><span class="before"> •</span><span class="later">Nav 2 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide03">
<div class="test"><span class="before"> •</span><span class="later">Nav 3 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide04">
<div class="test"><span class="before"> •</span><span class="later">Nav 4 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide05">
<div class="test"><span class="before"> •</span><span class="later">Nav 5 •</span></a></div>
</li>
</ul>
</div>
</nav>
-> Active status

The second example does not have an element with ID "menu," so your JavaScript isn't targeting anything. For the second example specifically:
Change your jQuery to
$('.list-group-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
This will properly apply the "active" class to your list-group-item when clicked.
However, the other issue is that ".active" won't do anything right now because you are overriding Bootstrap's built-in styles with this rule:
.list-group-item {
background-color: rgba(0,0,0,0) !important;
border: none !important;
font-size: 2em;
}
The !important on background-color is keeping the color the same even when ".active" is applied.
Instead of using !important, you could increase the specificity of your rule by writing it like so:
.list-group .list-group-item {
background-color: rgba(0,0,0,0);
border: none !important;
font-size: 2em;
}
However I'm not sure what you mean by "In both examples, the active link does not remain open." Your ".active" class currently only applies a background color to the active link (both in the way you've written it in example 1 and the way Bootstrap styles it in example 2) and this is what we fixed with the code above. If you want more styling applied to the active link, it will need to be added.

Navigation - transparent, horizontale center, difficult with Subnavigation

i would create this Navigation.
i have try some things with css and js.
but it works not on every browser and i think the code is dirty.
the driangle of the navigation-hover is center of the length. the transparent driangle is lay under the blue driangle and the body of the Subnavigation (or undernavigation) is flexible in width.
have you some ideas to create this navigation clean? and possibly without JS?
i hope you can help me. i have spend so much hours and it does nt correct work.
yours, yellow
$( ".active" ).mouseover(function() {
var xbreite = this.offsetWidth;
//Breite von nav-sub
var ybreite = this.nextElementSibling.offsetWidth;
var zbreite = ybreite - xbreite;
var xb = xbreite/2;
xb = xb - 23;
var zb = ybreite - xb;
xb = xb+"px";
zb = zb+"px";
// console.log(this.nextElementSibling.firstElementChild.firstElementChild);
//div rest -> aber bekomme kein element und style unter gebracht
var rest = this.nextElementSibling.firstElementChild.firstElementChild;
rest.style.width=xb;
var eck = this.nextElementSibling.firstElementChild.lastElementChild;
eck.style.width=zb;
//Subnav sichtbar machen
// this.nextElementSibling.style.top='59px';
this.nextElementSibling.style.visibility='visible';
});
//Subnavi schließen
$( ".nav-sub" ).mouseleave(function() {
var navsubs = $('.nav-sub');
var subsCount = $(navsubs).length;
for( hilf = 0; hilf < subsCount; hilf++){
//navsubs[hilf].style.top='-9999999px';
navsubs[hilf].style.visibility='hidden';}
});
.bcg{
position:absolute;
z-index:2;
}
.header{
position:fixed;
height:84px;
z-index:10;
background-color:#579dd3;
opacity: 0.75;
width:100%;
z-index: 100;
}
.logo{
float:left;
padding-left:1.875em;
padding-top:0.938em;
}
.nav{
float:left;
}
/* Navigation Primär */
.nav-prim{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
position:absolute;
right:1.64em;
bottom: -1.2em;
font-size:17px;
text-transform:uppercase;
z-index:999;
}
/* Dreieck Navigation Primär */
.nav-prim ul li a {
position: relative;
}
.nav-prim ul li a:hover::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/*Aktiver Link */
.nav-prim .active{
position: relative;
}
.nav-prim .active::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/* Ende Dreieck Navigation Primär */
.nav-prim ul li{
float:left;
list-style:none;
padding-left:0.7em;
padding-right:0.7em;
/* position: relative; */
}
.nav-prim ul li:last-child{
padding-right:0;
}
.nav-prim ul li a{
text-decoration:none;
color:white;
height:56px;
display:block;
}
/* Subnavigation */
.nav-sub{
position:absolute;
color:blue;
padding:0;
margin:0;
z-index:11111;
visibility:hidden;
top: 59px;
/*
display:none;*/
}
.nav-sub li{
clear:both;
padding:0 !important;
margin:0;
background-color:white;
width:100%;
}
.nav-sub li:first-child{
background-color:transparent;
padding:0;
margin:0;
}
.nav-sub .eck{
background-image:url('http://mattgelb.canopus.uberspace.de/nav_bg_active.png');
background-repeat:no-repeat;
height:25px;
float:left;
}
.nav-sub .rest{
background-color:white;
height:25px;
width:30%;float:left;
}
.nav-sub a{
color:blue !important;
text-transform:none;
}
.nav-sub a:hover{
color:red !important;
background-image:none !important;
}
.nav-sub a:hover::after{
border:0 !important;
background-image:none !important;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<img class="bcg" src="http://www.jessicajonesdesign.com/downloads/lines-wallpaper-orange.gif">
<div class="header">
<div class="logo">
<img width="60" src="https://davidwalsh.name/demo/codepenLogo.png">
</div>
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
</div>

Hi You can use something like this
The HTML
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest">
<div class="eck"></div>
</div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"><div class="eck"></div></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
And some css
body
{
background-color : #eeeeee;
}
div.nav ul
{
list-style-type : none;
}
div.nav ul li
{
font-family: Arial, Haettenschweiler, "Arial Narrow Bold", sans-serif;
color:black;
float: left;
padding: 10px;
vertical-align: middle;
text-transform:uppercase;
position : relative;
background-color : #0000ff;
}
div.nav a
{
color:black;
}
div.nav li ul
{
display: none;
position : absolute;
top : 100%;
left : -40px;
padding-top : 5px;
}
div.nav li:hover ul
{
display: block;
position: absolute;
z-index: 999;
}
div.nav li:hover li
{
float:none;
padding: 0;
text-align:left;
}
div.nav li:hover li a
{
min-width: 150px;
display:block;
}
.rest {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
margin-left : 10px;
position : relative;
}
.eck {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0000ff;
margin-left : 10px;
position : absolute;
top : -25px;
left : -30px;
z-index : 999;
}
You can also view the fiddle here https://jsfiddle.net/x8x2L93u/

Creating A Responsive Menu with HTML, CSS & jQuery

I'm making a responsive menu following this guide http://demos.inspirationalpixels.com/responsive-menu/ everything's working fine when the width is less than 980px, the menu (the three dash) is showing but not opening.
What am I doing wrong? Can anyone tell me?
It's not working on my website:
Here's my HTML Code
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body {
margin: 0;
padding: 0;
background-image: url("img-bg-mobile.jpg");
background-repeat: no-repeat;
font-family: open sans;
}
.toggle-nav {
display: none;
}
#media screen and (min-width: 1000px) {
nav {
height: auto;
width:auto;
margin-left:17%;
}
nav ul{
list-style: none;
margin:0px;
padding:0px;
}
nav ul li {
float: left;
margin: 2%;
}
nav ul li a{
transition:all linear 0.15s;
text-decoration: none;
font-family: open sans;
color: white;
font-size: 1.5em;
text-align: center;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
}
nav ul li ul a {
color: #ff3c1f;
}
nav ul li:hover ul
{
display:block;
height:auto;
width: 110px;
position:absolute;
margin:0;
}
}
#media screen and (max-width: 980px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul.active {
display:none;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
article {
clear: both;
font-family: open sans;
font-size: 1em;
}
article p {
color: white;
margin-left: 10%;
margin-right: 10%;
}
footer {
color: white;
margin-left: 10%;
margin-right: 10%;
}
.arrow {
font-size: 11px;
margin-left: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Yoo Free Recharge App That gives talktime for trying out cool appps">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" maximum-scale=2.0">
<title>Yoo Get Free Recharge</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- header start from here-->
<header>
<nav class="menu">
<ul class="active">
<li class=logo>
<img class=yoologo src="yoosmall.png" title="Yoo Get Free Recharge">
</li>
<li class="mainmenu">
HOME
</li>
<li class="mainmenu">
ADVERTISE
</li>
<li id="mainmenu" class="sub-menu">
WHO WE ARE<span class="arrow">▼</span>
<ul>
<li>About Us</li>
<li>Vision</li>
<li>Team</li>
</ul>
</li>
<li class="mainmenu">
PRICING
</li>
<li class="mainmenu">
CONTACT
</li>
</ul>
<a class="toggle-nav" href="#">&#9776</a>
</nav>
</header>
<article>
<p>Yoo Free Recharge App - Yoo is an app that gives free recharge/talktime for trying out new and cool apps you can also refer your friends and get money for that too you can get upto 125Rs. Per Friend Download Now</p>
</article>
<footer>
<div style="font-family:'open sans';" > © Yoo Infotech. All right reserved. </div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

You left this out of your css
#media screen and (max-width: 980px) {
....
.menu ul {
width: 100%;
position: absolute;
top: 120%;
left: 0px;
padding: 10px 18px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
border-radius: 3px;
background: #303030;
}
...
}

You can use some framework like bootstrap or material design
http://getbootstrap.com/components/#navbar-default
http://www.getmdl.io/components/index.html#layout-section

I followed this tutorial and made my responsive header menu
Here it is

Scrollbars and Elements - HTML/CSS

I have a little problem.
I tried to create a social-media plattform - everything is well working.
But this is anoying me: I want to create an area, where the post are. If there more then 3 you have to scoll with you mouse. The scrollbars are not in the correct place.
Here the wrong design (But "correct" technic):
Here it is more clearer and simplier to controll.
My Imagination was: The Posts-Area should be scrolled.
My CSS:
* {
box-sizing:border-box;
}
a {
text-decoration:none;
color:#FFF;
}
a:hover {
color:#F5F5F5;
}
body {
margin:0px;
width:100%;
height:100%;
background-color:#99cc99;
font-family:'Open Sans';
overflow-y: scroll;
}
.website {
position:absolute;
left:50%;
margin-left:-540px;
width:1080px;
height:100%;
background-color:#99cc99;
border-collapse: separate;
}
#menu {
position:fixed;
top:0px;
width:1080px;
height:50px;
background-color:#6dbd6c;
}
#partition-horizontal {
height:0px;
background-color:#99cc99;
}
#content {
width:100%;
height:auto;
background-color:transparent;
}
#left-top {
width:330px;
height:50px;
border-bottom:2px solid #437C42;
}
#partition1 {
background-color:#6dbd6c;
width:10px;
height:50px;
border-bottom:2px solid #437C42;
}
#right-top {
width:770px;
border-bottom:2px solid #437C42;
height:50px;
}
#right-top .menu {
position:relative;
float:left;
}
#right-top .menu a {
height:100%;
width:auto;
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
}
#right-top .menu a:hover {
background-color:rgba(0,0,0,0.15);
color:#fff;
}
#right-top .menu a:first-child {
margin-left:-0px;
}
#left-bottom {
clear:both;
width:330px;
height:auto;
background-color:#fff;
}
#right-bottom {
clear:both;
width:770px;
overflow:auto;
}
#partition2 {
background-color:#99cc99;
width:10px;
}
#left-bottom-area {
padding:;
width:100%;
height:851px;
clear:both;
}
#right-bottom-area {
padding:;
width:100%;
min-height:887px;
height:auto;
clear:both;
}
#right-bottom-area #poster {
width:100%;
height:300px;
background-color:#FFF;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
margin-bottom:10px;
}
#right-bottom-area #real-content {
width:100%;
height:auto;
background-color:#FFFFFF;
border-top-right-radius:3px;
border-top-left-radius:3px;
color:#111111;
overflow:hidden;
}
#real-content p {
width:100%;
height:200px;
background-color:#FFFFFF;
border-bottom:1px solid #99cc99;
padding:15px;
margin-top:0px;
margin-bottom:0px;
}
#real-content p:hover {
background-color:rgba(0,0,0,0.02);
}
#real-content p:last-child {
border-bottom:none;
}
My HTML/PHP:
<?php
$links = $_SERVER['REQUEST_URI'];
preg_match("/[^\/]+$/", $links, $matches);
$link = $matches[0];
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box6</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./design.css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="./resources/scripts/js/main.js"></script>
</head>
<body>
<table class="website" cellspacing="0">
<tr id="menu">
<th id="left-top"></th>
<td id="partition1"></td>
<th id="right-top">
<div class="menu">
Home
Friends
Gallery
Settings
</div>
</th>
</tr>
<tr id="partition-horizontal"></tr>
<tr id="content">
<td id="left-bottom">
<div id="left-bottom-area"></div>
</td>
<td id="partition2"></td>
<td id="right-bottom">
<div id="right-bottom-area">
<?php
if($link == "me"){
?>
<div id="poster">
</div>
<div id="real-content" full-site="false">
<?php
//HERE IS THE POSTS-AREA
for ($i = 0; $i < 10; $i++) {
echo "<p>".$i."</p>";
}
?>
</div>
<?php
}else {
?>
<div id="real-content" full-site="true" style="border-radius:0px;">
</div>
<?php
}
?>
</div>
</td>
</tr>
</table>
</body>
</html>

Lots of issues with your code.
I suggest not using tables but divs for your layout. Tables should generally only be used to display tabular data.
Also, there are a lot of issues with your overflows and there shouldn't be any absolute positionning.
Finally, I recommend you use the CSS calc() function for your widths and heights. It's supported by IE9.
height: calc(100% - 30px);
Here's kinda how I would do it (might need some additional modifications):
http://codepen.io/jlowcs/pen/dPKKdB
HTML:
<div class="website" cellspacing="0">
<div id="menu">
<div id="left-top"></div
><div id="partition1"></div
><div id="right-top">
<div class="menu">
Home
Friends
Gallery
Settings
</div>
</div>
</div>
<div id="partition-horizontal"></div>
<div id="content">
<div id="left-bottom">
<div id="left-bottom-area"></div>
</div
><div id="partition2"></div
><div id="right-bottom">
<div id="right-bottom-area">
<div id="poster">
</div>
<div id="real-content" full-site="false">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
* {
box-sizing:border-box;
}
a {
text-decoration:none;
color:#FFF;
}
a:hover {
color:#F5F5F5;
}
body {
margin:0px;
width:100%;
height:100%;
background-color:#99cc99;
font-family:'Open Sans';
}
.website {
margin: auto;
width:1080px;
height:100%;
background-color:#99cc99;
border-collapse: separate;
}
#menu {
width:1080px;
height:50px;
background-color:#6dbd6c;
}
#menu > * {
display: inline-block;
}
#partition-horizontal {
height:0px;
background-color:#99cc99;
}
#content {
overflow: hidden; /* FIXED */
height: calc(100% - 50px); /* FIXED */
width: 100%;
background-color:transparent;
}
#left-top {
width:330px;
height:50px;
border-bottom:2px solid #437C42;
}
#partition1 {
background-color:#6dbd6c;
width:10px;
height:50px;
border-bottom:2px solid #437C42;
}
#right-top {
width: calc(100% - 330px - 10px);
border-bottom:2px solid #437C42;
height:50px;
}
#right-top .menu {
height:100%;
position:relative;
float:left;
}
#right-top .menu a {
line-height: 48px;
padding-left:15px;
padding-right:15px;
}
#right-top .menu a:hover {
background-color:rgba(0,0,0,0.15);
color:#fff;
}
#right-top .menu a:first-child {
margin-left:-0px;
}
#content > * {
display: inline-block;
vertical-align: top;
}
#left-bottom {
width: 330px;
height: 100%;
background-color: #fff;
}
#partition2 {
background-color: #99cc99;
width: 10px;
height: 100%;
}
#left-bottom-area {
overflow: auto;
width:100%;
}
#right-bottom {
width: calc(100% - 330px - 10px);
height: 100%;
}
#right-bottom-area {
height: 100%;
}
#right-bottom-area #poster {
height:300px;
background-color:#FFF;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
margin-bottom:10px;
}
#right-bottom-area #real-content {
width: 100%;
height: calc(100% - 300px - 10px);
background-color:#FFFFFF;
border-top-right-radius:3px;
border-top-left-radius:3px;
color:#111111;
overflow:auto; /* FIXED */
}
#real-content p {
width:100%;
height:200px;
background-color:#FFFFFF;
border-bottom:1px solid #99cc99;
padding:15px;
margin-top:0px;
margin-bottom:0px;
}
#real-content p:hover {
background-color:rgba(0,0,0,0.02);
}
#real-content p:last-child {
border-bottom:none;
}

Help in jQuery animation

What I want to do something like this bad example, I tried by CSS3 but field to change the picture, at least I made everything in jQuery, but no animation or something wrong, actually I don't know, here is my Attempt BY CSS3.
Here is my code
#maged{
width:198px; /*140px * 5*/
height:591px;
background-color:#0C9;
position: absolute;
overflow:hidden;
top: 14px;
left: 41px;
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
#maged:hover {
opacity:0;
filter:alpha(opacity=0);
-moz-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
-webkit-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
background-color:#36F;
}
#cc_item img{
position:absolute;
width:195px;
height:591px;
top:-562px;
left:54px;
}
#cc_title{
color:#fff;
line-height:46px;
font-size:30px;
top:472px;
left:59px;
position:absolute;
background:#272727;
width:167px;
display:block;
z-index:11;
}
-->
</style>
<script type="text/javascript">
$(function(evt) {
$("#maged").click(function() {
alert("loool");
$("#cc_item").slideDown("slow");
$("#cc_title").fadeIn("slow");
return false;
});
});
</script>
</head>
<body>
<div id="maged"></div>
<div id="cc_title">Main page</div>
<div id="cc_item" style="z-index:5;">
<img src="img30000.jpg" alt="" />
</div>
</body>
</html>

This solution is very CSS heavy, as I wanted to focus on making the HTML cleaner and making sure the general effect worked (though to a lesser degree) when JavaScript is off.
To my knowledge, there's no CSS3 per se, though the CSS may seem advanced. (it's not!)
The most important point for me what that those images really aren't content so I don't think you need to use <img> elements for them; instead use CSS background images... but to animate those background images easily I did have to use a jQuery plugin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>javascript - Help in jQuery animation</title>
<style type="text/css">
<!--
body {
background:url(http://osc4.template-help.com/wt_32608/images/bg.gif);
text-align:center;
}
ul#menu {
background:#171717;
margin:auto;
overflow:hidden;
width:985px;
list-style:none;
padding:0px;
}
ul#menu li {
list-style:none;
background:transparent;
float:left;
text-align:center;
width:195px;
height:591px;
padding:0px;
position:relative;
border:1px solid #FFFFFF;
}
ul#menu li a {
text-decoration:none;
color:#FFFFFF;
display:block;
background:transparent;
height:591px;
width:195px;
position:relative;
}
ul#menu li a .menu-text {
background:#272727;
width:167px;
font-size:30px;
font-family:Arial,Helvetica,sans-serif;
font-variant:small-caps;
position:absolute;
top:224px;
left:14px;
}
ul#menu li a .menu-text .title {
line-height:46px;
}
ul#menu li a .description {
display:none;
font-size:smaller;
text-align:left;
line-height:auto;
}
ul#menu li a:hover .menu-text {
top:auto;
width:195px;
height:152px;
left:0px;
bottom:0px;
}
body.javascript-enabled ul#menu li a:hover .menu-text {
top:224px;
bottom:auto;
width:167px;
height:auto;
left:14px;
}
ul#menu li a:hover .description {
display:block;
padding-left:30px;
}
body.javascript-enabled ul#menu li a:hover .description {
display:none;
}
ul#menu #main-page a {
background:url(http://osc4.template-help.com/wt_32608/images/img1.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #about-us a {
background:url(http://osc4.template-help.com/wt_32608/images/img2.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #services a {
background:url(http://osc4.template-help.com/wt_32608/images/img3.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #partners a {
background:url(http://osc4.template-help.com/wt_32608/images/img4.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #locations a {
background:url(http://osc4.template-help.com/wt_32608/images/img5.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #main-page a:hover {
background-position:top center;
}
ul#menu #about-us a:hover {
background-position:top center;
}
ul#menu #services a:hover {
background-position:top center;
}
ul#menu #partners a:hover {
background-position:top center;
}
ul#menu #locations a:hover {
background-position:top center;
}
body.javascript-enabled ul#menu #main-page a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #about-us a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #services a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #partners a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #locations a:hover {
background-position:center -1000px;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/jquery.backgroundPosition.js_7.txt" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("body").addClass("javascript-enabled");
$("ul#menu li a")
.css({backgroundPosition: '0px -591px'})
.mouseenter(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px 0px'}, 500, function() {
$(this).css({backgroundPosition: '0px 0px'});
$(this).find(".description").css({display:'block'});
$(this).find(".menu-text").css({top:'auto',width:'195px',height:'152px',left:'0px',bottom:'0px'}).fadeIn('slow');
});
})
.mouseleave(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px -591px'}, 250, function() {
$(this).css({backgroundPosition: '0px -591px'});
$(this).find(".description").css({display:''});
$(this).find(".menu-text").css({top:'',width:'',height:'',left:'',bottom:''}).fadeIn('slow');
});
})
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li id="main-page">
<span class="menu-text"><span class="title">Main page</span> <span class="description">Welcome to our site</span></span>
</li>
<li id="about-us">
<span class="menu-text"><span class="title">About us</span> <span class="description">Who we are</span></span>
</li>
<li id="services">
<span class="menu-text"><span class="title">Services</span> <span class="description">& solutions</span></span>
</li>
<li id="partners">
<span class="menu-text"><span class="title">Partners</span> <span class="description">Partners list</span></span>
</li>
<li id="locations">
<span class="menu-text"><span class="title">Locations</span> <span class="description">Our contacts</span></span>
</li>
</ul>
</body>
</html>

Heres my solution to your problem without using css3. It´s all in the 1.html file, jquery and images are poiting to external sources, so you can just run it. Hope this can help you :)
<html>
<head>
<style>
#container{
overflow: hidden;
width: 800px;
height: 600px;
border: 1px solid black;
cursor: pointer;
}
.maged{
width:200px;
height:600px;
float:left;
display: none;
}
.cc_item{
text-align:center;
width:200px;
height:600px;
background:#171717;
float:left;
}
span.cc_title{
color:#fff;
line-height:46px;
font-size:30px;
margin: 250px 10px 0px;
float: left;
background:#272727;
width:180px;
z-index:11;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(evt) {
$(".cc_item").hover(function() {
$(this).find(".maged").stop(true,true).slideDown(300);
$(this).find(".cc_title").fadeOut("slow");
},function(){
$(this).find(".maged").stop(true,true).slideUp(300);
$(this).find(".cc_title").fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="container">
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/richardnicoll08-711189.jpg" alt="" />
</div>
<span class="cc_title">Main page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/brunopieters05-717446.jpg" alt="" />
</div>
<span class="cc_title">Second page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.delhierro.ca/wp-content/uploads/2010/11/Fashion-Studio-01S.jpg" alt="" />
</div>
<span class="cc_title">Third page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://lockdownmodels.files.wordpress.com/2009/05/kell-1.jpg?w=200&h=600" alt="" />
</div>
<span class="cc_title">Fourth page</span>
</div>
</div>
</body>
</html>

Categories

Resources