کمک در طراحی این منو

[csharpspider]

با سلام

من برنامه نویس ASP.NET C-Sharp هستم
میخواهم سایتی طراحی کنم که در سمت راست یا چپ صفحه منو داشته باشه که وقتی با موس روی اون میرویم منو فعال شود و زیر شاخه های ان نشان داده شود
بطوری که با پایین و بالا بردن صفحه منو ثابت باشد
برای درک بهتر شما میتوانید این سایت رو ببینید - منو سمت راست صفحه با عنوان دسترسی سریع
http://www.pnu.ac.ir

اگر نحوه طراحی را با CSS بگید ممنون میشوم مرسی

[Cybersilent]

ببین توی این سایت چیزی پیدا می کنی؟
temphaa.com

[forestasphalt]

دوست عزیز توی این آدرس همچین منویی وجود داره
http://webnovin.net/subpage/template/klassik.php?id=254
فقط نگید دارم تبلیغ میکنما!:D

[csharpspider]

دوستان عزیز من دنبال قالب یا تمپلیت نمیگردم که
من نحوه ساخت و کد نویسی این منو رو با ASP.NET CSHARP یا CSS میخوام بدونم

[forestasphalt]

دوستان عزیز من دنبال قالب یا تمپلیت نمیگردم که
من نحوه ساخت و کد نویسی این منو رو با ASP.NET CSHARP یا CSS میخوام بدونم

دوست عزیز این کد باید با جاوااسکریپت(یا کتابخانه محبوبش jquery ) باید بنویسی
بخوای خودت بنویس باید با جی کوئری آشنا بشی و تا حد زیادی باید به این زبان مسلط باشی
اگه آموزش جی کوئری شو خواستی بگو برات بفرستم:چشمک:

[csharpspider]

دوست عزیز این کد باید با جاوااسکریپت(یا کتابخانه محبوبش jquery ) باید بنویسی
بخوای خودت بنویس باید با جی کوئری آشنا بشی و تا حد زیادی باید به این زبان مسلط باشی
اگه آموزش جی کوئری شو خواستی بگو برات بفرستم:چشمک:

دوست عزیز میشه آموزش ساخت همین منو رو با جاوا اسکریپت مرحله به مرحله اینجا بزاری

[forestasphalt]

با سلام در این سایت منوی درخواستی شما آموزش داده شده است:
http://tympanus.net/codrops/2010/07/21/related-posts-slide-out-boxes/
اما توضیح css :

.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
}
این نحوه قرار گیری منو رو شرح میده که میگه از بالا 40 پیکسل از سمت راست -220 پیکسل (به تو رفتگی منو توجه کنید) margin ,padding:0 داده که فاصله ای از اطراف نداشته باشه

span.rp_shuffle{
background:#222 url(../images/shuffle.png) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
این قسمت برای اینه که گزینه ای که علامت فلش داره رو بزنی 5 تا پست بعدی رو نشون بده(که دارای خاصیت های طول و ارتفاع و border radius و... که استایل خود دکمه میباشد)

.rp_list ul{
margin:0;
padding:0;
list-style:none;
}
این استایل برای خود ul میباشه که گفته فاصله از اطراف نداشته باشه list-style:none هم به خاطر اینه که Li استایل نداشته باشن(یعنی به صورت دایره توپر یا مربعی یا ... نباشن)

.rp_list ul li{
width: 240px;
margin-bottom:5px;
display:none;
} این استایل خوده li میباشد که margin-bottom:5px باعث میشه بین هر li فاصله 5 پیکسلی وجود داشته باشه

.rp_list ul li div{
display: block;
line-height:15px;
width: 240px;
height: 80px;
background:#333;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
} این استایل div کلی میباشد که ul های در اون قرار میگیرن

.rp_list ul li div img{
width:70px;
border:none;
float:left;
margin:4px 10px 0px 4px;
border:1px solid #111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
} استایل عکس هاست و float:left باعث میشه عکس سمت چپ li قرار بگیره

span.rp_title{
font-size:11px;
color:#ddd;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:3px;
background:#222;
-moz-box-shadow:0px 0px 5px #000 inset;
-webkit-box-shadow:0px 0px 5px #000 inset;
box-shadow:0px 0px 5px #000 inset;
} این استایل عنوان میباشه

span.rp_links{
width:195px;
height:8px;
padding-top:2px;
display:block;
margin-left:42px;
}
span.rp_links a{
background: #222 url(../images/bgbutton.png) repeat-x;
padding: 2px 18px;
font-size:10px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
box-shadow:0 1px 3px #000;
text-shadow: 0 -1px 1px #222;
cursor: pointer;
outline:none;
}
span.rp_links a:hover{
background-color:#000;
color:#fff;
} اینم استایل تگ های a میباشد
این قسمت هم کدهای جی کوئری شه


$(function() {
/**
* the list of posts

*/
var $list = $('#rp_list ul');
/**
* number of related posts
برای پیدا کردن کل Liها
*/
var elems_cnt = $list.children().length;

/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);

function load(initial){
/**
* این کد میگه اول تگ Li رو مخفی کن بعد همون Li تگ div پیدا کن بعد که پیدا کردی margin-left -200 پیکسل کن
*/

$list.find('li').hide().andSelf().find('div').css( 'margin-left',-initial+'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//برای شاف کردن یا رندم کردن پست ها یا همون Li ها
//Make sure not to repeat
while(loaded < 5){
// با استفاده از کلاس math یک عدد تصادفی از صفر تا تعداد li ها --elems_cnt
var r = Math.floor(Math.random()*elems_cnt);
//
var $elem = $list.find('li:nth-child('+ (r+1) +')');
//اگر عنصر خودش قابل مشاهده بود visible به لبتدای تابع برو و از اول ادامه بده و اگر عنصر قالب مشاهده نبود اون عنصر نشون بده
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
// میگه به ازای هر عنصری که قابل مشاهده هست همون عنصر و خاصیت انیمیشی نو متوقف کن بعد از 200 میلی ثانیه به لود اولیه سایت توجه کن
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}

/**
* hovering over the list elements makes them slide out
// هنگامی که موس بر روی عنصر قابل مشاهده هست بهش استایل میده
*/
$list.find('li:visible').live('mouseenter',functio n () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
})
// هنگامی که موس از عنصر خارج میشه این استایل بهش میده
.live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});

/**
* when clicking the shuffle button,
* show 5 random posts
// این قسمت هم برای رندم کردن li ها هنگامی که گزینه shuffle یا همون علامت فلش رو میزنی نمایش میده
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);

function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
شرمنده اگه بیش از اندازه توضیح دادم یا بد توضیح دادم:لبخند:

[csharpspider]

[QUOTE=forestasphalt;1658990]با سلام در این سایت منوی درخواستی شما آموزش داده شده است:
http://tympanus.net/codrops/2010/07/21/related-posts-slide-out-boxes/
اما توضیح css :

مرسی دوست عزیز