امکانات جالب این 2 سایت؟

[mahdi.iqu]

سلام
سایت زیر رو ببنید:
http://www.saipavafadoust.com/1390-12-20-13-42-33.html
در انتهای این سایت (گوشه سمت چپ)یه قسمت هست به نام "امکانات بیشتر"
وقتی روش قرار میگیریند باز میشه چطوری اینجوری شده؟؟؟
سایت زیر هم همینچوری هست
http://nasle4.ir/
انتهای سایت سمت راست تماس باما یه شک هست که روش کلیک میکنید باز میشه
ممنون میشم کمکم کنید

[khanlo.javid]

دوست عزیز این کار رو با استفاده از jquery انجام دادن که من خودم به شکل دیگه ای تو نمونه کارم دارم میتونید ببینید www.jd-tak.ugig.ir ، و اما توضیح :

همونطور که گفتم با استفاده از jquery این کار رو انجام داده ، به این شکل که طرح خودش رو ایجاد میکنه و با استفاده از خاصیت display:none در css تگ اصلی طرحشون رو مخفی میکنن و با استفاده از دستور jquery وقتی موس روی اون قسمت مورد نظر میره تگ رو به نمایش در میارن کدش هم تو سایت من به این شکله :



<script>
$("#show").click(function () {
$("#nav").slideDown("slow");
});
$("#show").click(function () {
$("#show").hide("");
$("#close").show("");
});
$("#close").click(function () {
$("#nav").slideUp("slow");
});
$("#close").click(function () {
$("#close").hide("");
$("#show").show("");
});
</script>




موفق باشید.

[mahdi.iqu]

بسیار بسیار عالی و حرفه ای
ممکن هست کمی کد ها رو باز کنید و بگید خطوط چی کار میکنند؟

[khanlo.javid]

بسیار بسیار عالی و حرفه ای
ممکن هست کمی کد ها رو باز کنید و بگید خطوط چی کار میکنند؟

خیلی ممنون نظر لطفتون هست ، و اما توضیح

تکه کد زیر رو ببینید ، ما تو این کد یه تابع تعریف کردیم تا بتونیم دیوی که آی دی nav داره و با css مخفی کردیم رو با کلیک کردن روی دیوی که آی دی show داره به نمایش در بیاریم که به صورت زیر نوشته میشه :


$("#show").click(function () {
$("#nav").slideDown("slow");
});



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


$("#show").click(function () {
$("#show").hide("");
$("#close").show("");
});


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


$("#close").click(function () {
$("#nav").slideUp("slow");
});


و در قسمت آخر باید تابعی بنویسیم که دوباره آیکن های نمایش و مخفی کردن منو رو به حالت قبلی برگردونه یعنی دقیقا بر عکس تابع دوم :


$("#close").click(function () {
$("#close").hide("");
$("#show").show("");
});



امیدورام مصلب رو گرفته باشید .




موفق باشید.

[mahdi.iqu]

میشه کد Css رو هم قرار بدید
چون واقعیت هنوز متوجه کار نشدم

[mahdi.iqu]

دوستان کمک کنند لطفا

[khanlo.javid]

بفرمائید اینم کد کامل :




<div class="menu-footer">
<div class="click" id="show" title="باز کردن منو">
</div>
<div class="close" id="close" title="بستن منو">
</div>
<div style="clear:both">
</div>
<script>
$("#show").click(function () {
$("#nav").slideDown("slow");
});
$("#show").click(function () {
$("#show").hide("");
$("#close").show("");
});
$("#close").click(function () {
$("#nav").slideUp("slow");
});
$("#close").click(function () {
$("#close").hide("");
$("#show").show("");
});
</script>
<div class="nav" id="nav">
<div style="float:right;width:15%;margin-right:30px">
<a href="order.php" title="سفارش طراحی"><img class="zoom" src="images/amozesh.png" /><p style="color:#661b3e;padding-top:20px"><b>سفارش وب سایت</b></p></a>
</div>
<div style="float:right;width:15%;margin-right:10px">
<a href="#" title="پرداخت آنلاین"><img class="zoom" src="images/en-bank.png" /><p style="color:#661b3e;padding-top:20px"><b>پرداخت آنلاین</b></p></a>
</div>
<div style="float:right;width:15%;margin-right:10px">
<a href="#" title="نمونه کارها"><img class="zoom" src="images/example.png" /><p style="color:#661b3e;padding-top:20px"><b>نمونه کارها</b></p></a>
</div>
<div style="float:right;width:15%;margin-right:10px">
<a href="#" title="لیست قیمت"><img class="zoom" src="images/sabt.png" /><p style="color:#661b3e;padding-top:20px"><b>لیست قیمت</b></p></a>
</div>
<div style="float:right;width:15%;margin-right:10px">
<a href="sabt.php" title="ثبت فیش"><img class="zoom" src="images/sabt2.png" /><p style="color:#661b3e;padding-top:20px"><b>ثبت فیش واریز</b></p></a>
</div>
<div style="float:right;width:15%;margin-right:10px">
<a href="seo.html" title="بهینه سازی"><img class="zoom" src="images/seo2.png" /><p style="color:#661b3e;padding-top:20px"><b>بهینه سازی</b></p></a>
</div>
<div style="clear:both">
</div>
<br />
</div>
</div>
<div style="clear:both">
</div>




اینم کد css :



.menu-footer
{
margin:auto;
padding:0px;
width:99%;
bottom:0;
left:0;
right:0;
position:fixed;
text-align:center;
z-index:1000;
}
.click
{
cursor:pointer;
width:60px;
height:50px;
background-image:url(../images/qm.png);
background-repeat:no-repeat;
left:20px;
bottom:0;
float:left;
margin-left:20px;
color:#661b3e;
font-size:18px;
}
.close
{
cursor:pointer;
width:60px;
height:50px;
background-image:url(../images/close.png);
background-repeat:no-repeat;
left:20px;
bottom:0;
float:left;
margin-left:20px;
display:none;
color:#661b3e;
font-size:18px;
}
.nav
{
width:100%;
display:none;
padding-top:30px;
background-color:#c6c8c9;
background-repeat:repeat;
box-shadow: 0 0 15px #069;
}



موفق باشید.

[mahdi.iqu]

داداش کارت عالیه خدایی دمت گرم
ببین الان شما 4 تا کلاس تعریف کردی
.menu-footer
.nav
.close
.click
میشه یه توضیح در باب این 4 کلاس بدی؟ که اصلا برای چی هستند؟

[mahdi.iqu]

دوستان میشه یاری کنید؟

[khanlo.javid]

داداش کارت عالیه خدایی دمت گرم
ببین الان شما 4 تا کلاس تعریف کردی
.menu-footer
.nav
.close
.click
میشه یه توضیح در باب این 4 کلاس بدی؟ که اصلا برای چی هستند؟

دوست عزیز این روزا یه مقدار سرم شلوغه ایشالا تو اولین فرصت بهت توضیح میدم.

[moalla]

کاری که شما میخواید یه خط کد بیشتر نمیخواد. یه آموزش ویدئوی برای شما ساختم و توی سایتم قرار دادم.
اون رو اینجا (http://quicklearn.ir/?q=node/13)ببینید
این سایت رو مخصوص آموزش درست کردم و اگه آموزش مشابهی هم میخواین از طریق ایمیل بگین تا قرار بدم. بیشتر قصدم ارائه آموزش طراحیه سایته و شاید در مراحل بعد طراحی اندروید و زبانهای دیگه برنامه نویسی