私は impress.js、html5、および css を使用してきました。私は非常に満足している標準に impress.js プレゼンテーションを持っていますが、Twitter に似た固定トップ ナビゲーションを実装しようとしています。
現在の実装は正しく機能しません。スライド/ステップでバーをクリックすると、リンクはクリックできなくなります。
HTML
<!DOCTYPE html5>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>PATCHU_</title>
<meta name="author" content="patchu" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <strong>doesn't support the features required</strong> by my website, so you are presented with a simplified version.</p>
<p>For the best experience please use the latest <strong>Chrome</strong>, <strong>Safari</strong> or <strong>Firefox</strong> browser.</p>
</div>
<div class="navbar-fixed-top2" align="center">
<p>Navigation will go here <a class="" href="#websites" title="My Websites">My Websites</a>
<a class="" href="#about" title="My Websites">About</a>
<a class="" href="#contact" title="My Websites">Contact</a>
<a class="" href="#applications" title="My Websites">Applications</a>
</div>
<div id="impress" data-transition-duration="800">
<div id="title" class="step slide" data-x="0" data-y="0" data-scale="3">
<hgroup>
<h1>@PATCHU_</h1>
<h2></h2>
</hgroup>
</div>
<div id="about" class="step slide" data-x="-1000" data-y="-700" data-rotate="270" data-scale="5">
<h1>About Me</h1>
</div>
<div id="about1" class="step slide about" data-x="-1900" data-y="880" data-z="-100" data-rotate="270" data-scale="1">
<p>Apart from making <strong>awesome websites</strong>, I love computer networking and making <strong>iOS applications.</strong></p>
</div>
<div id="about2" class="step slide about" data-x="-1900" data-y="100" data-z="-100" data-rotate="270" data-scale="1">
<p>Minimalist, <strong>Perfectionist</strong>, Gamer and Apple fanboy. I have a passion for creating stuff. Love trying out <strong>new technologies</strong> and experiences.</p>
</div>
<div id="about3" class="step slide about" data-x="-1900" data-y="-800" data-z="-100" data-rotate="270" data-scale="1">
<p>I mostly code in <strong>PHP</strong> and <strong>Objective-C</strong>, but I'm not afraid to get my hands dirty.</p>
</div>
<div id="about4" class="step slide about" data-x="-1900" data-y="-1600" data-z="-100" data-rotate="270" data-scale="1">
<p><strong>Graduated</strong> with a <strong>1:1</strong> (84% Average) in Computer Network Technology BSc.</p>
</div>
<div id="websites" class="step slide" data-x="7100" data-y="-700" data-z="-3000" data-rotate="0" data-scale="5">
<h1>Websites</h1>
</div>
<div id="applications" class="step slide application" data-x="3950" data-y="-4500" data-z="-3000" data-rotate="90" data-scale="5">
<h1>Applications</h1>
</div>
<div id="contact" class="step slide" data-x="-180" data-y="2100" data-scale="3">
<h1>Connect</h1>
<p></p>
<div id="contact_images">
<a href=""><img src="images/twitter.png"></a>
<a href=""><img src="images/linkedin.png"></a>
</div>
</div>
</div>
<script src="js/impress.js"></script>
<script>
//All hail megatron
impress().init();
//impress().showMenu();
</script>
</body>
</html>
CSS
/*
Resetting the humans
*/
.navbar-fixed-top2{
position:fixed;
top:0;
width:100%;
height:50px;
background-color:red;
z-index:3000;
}