کار ما نیست شناسایی «راز» گلِ سرخ

**میدوری** · تاریخ عضویت: 05 November 2011

یک ساید بار متنی یا تصویری با Query و CSS

یک ساید بار جالب با چند خط کد نویسی و با استفاده از برای دوستان قرار می دهم . نخست نمونه ی زنده ی زیر را ببینید در صورت علاقه از کد های داده شده استفاده کنید .

کد PHP:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Panel</title>
<style>
#left-panel {
  width: 300px;
  height: 400px;
  border: 5px solid #555;
  background-color: #ccc;
  position: fixed;
  top: 150px;
  left: -275px;
  border-radius: 0 1em 1em 0;
  padding: 5px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
#left-panel:hover {
  left: -250px;
}
#left-panel.show {
  left: -5px;
}
#left-panel a.controller {
  position: absolute;
  right: 5px;
  top: 5px;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  color: black;
  font-weight: bold;
}
#left-panel.show a.controller {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
</style>
</head>
<body>
  <div id="content">
   <center> <h1><a href="http://www.midorinco.ir">منتشر شده در تالار میدوری</a></h1>
	 <p>منوی چند منظوره برای نمایش متن یا نوشته و یا آیکون و تصویر و آنچه که نیاز دارید .</p></center>
    <div id="left-panel" >
	 <a href="#" onclick="showLeftPanel();" class ="controller">&gt;</a>
	<center><h1>متن یا نوشته</h1>
	 <p>منوی چند منظوره</p>
	 <p>این منو با بردن اشاره گر روی آن آماده بکار و با کلیک روی فلش باز می شود و با کلیک روی فلش بسته می شود </p></center>
    </div>
  </div>
<script type="text/javascript">
    function showLeftPanel() {
	 var elem = document.getElementById("left-panel");
	 if (elem.classList) {
	   console.log("classList supported");
	   elem.classList.toggle("show");
	 } else {
	   var classes = elem.className;
	   if (classes.indexOf("show") >= 0) {
		elem.className = classes.replace("show", "");
	   } else {
		elem.className = classes + " show";
	   }
	   console.log(elem.className);
	 }
    }
  </script>
</body></html>

آخرین ارسال ها :
مشاهده نسخه قابل چاپ ارسال این موضوع به یک دوست	نمایش آخرین ارسال این موضوع امتیاز موضوع: 2 رأی - میانگین امیتازات : 3 1 2 3 4 5 اهدای بیشترین امتیاز به این موضوع کاربران مشترک شده در موضوع : 0 کاربر

\| حالت موضوعی حالت خطی ( ابزار سایت ) یک ساید بار متنی یا تصویری با Query و CSS
نویسنده	پیام \| تغییر اندازه ی متن:

سهراب سپهری

کار ما نیست شناسایی «راز» گلِ سرخ