Tekil Mesaj gösterimi - HTML'de bunu nasıl yapıyoruz?

Konu HTML'de bunu nasıl yapıyoruz?

17-05-2015, 09:27:44

Yalnızca css ile keşke yapılabilse ki belki yapılabiliyordur emin değilim. Çünkü şu sıralar css3 ile epey yeni özellik geldi bilmediğimiz şeyler olabilir yani. Küçük bir javascript kodu ile hazırladım bir sayfa aşağıda.

.html uzantılı kaydedip sonucu görebilirsin tam senin istediğin sayfa. menüleri vs rastgele ayarladım düzenlemelerini yaparsın zaten

<!doctype html>

<html lang="tr">
<head>
  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="description">
  <meta name="author" content="SitePoint">
  <meta name="keywords" content="keywords">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
 
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
      
if (scrollTop > stickyNavTop) { 
    $('.nav').addClass('sticky');
} else {
    $('.nav').removeClass('sticky'); 
}
};
 
stickyNav();
 
$(window).scroll(function() {
    stickyNav();
});
});
  </script>
  <style type="text/css">
  body {
	margin:0;
	padding:0;
  }
.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
}

/* HEADER */
.header {
	background-color:#333;
}
.header a {
	display:block;
	color:#888;
	text-decoration:none;
	padding:5px;
	transition:all .2s ease-in-out;
	font-family: tahoma;
	font-size:13px;
	border-bottom:1px solid #555;
	text-align:center;
}
.header ul {
	display:block;
	margin:0;
	padding:0;
}
.header ul li {
	list-style:none;
	display:block;
	margin:0;
	padding:0;
}
.header a:hover {
	transition:all .2s ease-in-out;
	background-color: #db3b2a;
	color:#fff;
}


/* NAVBAR */

.nav {
	background-color:#111;
}
.nav a {
	display:block;
	color:#fff;
	text-decoration:none;
	padding:15px;
	transition:all .2s ease-in-out;
	font-family: tahoma;
	font-size:13px;
	border-right:1px solid #333;
}
.nav ul {
	display:block;
	margin:0;
	padding:0;
}
.nav ul li {
	list-style:none;
	float:left;
	display:block;
}
.nav a:hover {
	transition:all .2s ease-in-out;
	background-color: #db3b2a;
}
.cle {
	clear:both;
}
  </style>
</head>
<body>
	
	

    <div class="header">
		<ul>
			<li><a href="">Yukarıda kaybolacak alan</a></li>
			<li><a href="">Menü 2</a></li>
			<li><a href="">Menü 3</a></li>
		</ul>
		<div class="cle"></div>
    </div>
    <div class="nav">
		<ul>
			<li><a href="">Sabitlenen alan</a></li>
			<li><a href="">Menü 2</a></li>
			<li><a href="">Menü 3</a></li>
		</ul>
		<div class="cle"></div>
    </div>
    
	
	
        <p>Sayfa içerik kısmı 1... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
    

	
</body>
</html>