hrs192
سه شنبه 12 شهریور 1392, 11:11 صبح
سلام دوستان من میخواستم این منو را توی ورژن های قدیمی اینترنت اکسپلورر اجرا کنم
ولی خیلی بهم ریخته نشون میده
کسی میتونه بگه چطور میشه بهینه ترش کرد
مهم برام ثابت بودن منو توی اسکرول زدن هست
و زیبایی افکت های ظاهریش در درجه دوم
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
margin-top:36px;
}
.moisrex-nav8{
list-style:none;
direction:rtl;
font:11px tahoma;
text-align:center;
margin:0;
padding:0;
display:block;
width:100%;
background: #8bd3ed;
background: -moz-linear-gradient(top, #8bd3ed 0%, #2cafe3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bd3ed), color-stop(100%,#2cafe3));
background: -webkit-linear-gradient(top, #8bd3ed 0%,#2cafe3 100%);
background: -o-linear-gradient(top, #8bd3ed 0%,#2cafe3 100%);
background: -ms-linear-gradient(top, #8bd3ed 0%,#2cafe3 100%);
background: linear-gradient(to bottom, #8bd3ed 0%,#2cafe3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bd3ed', endColorstr='#2cafe3',GradientType=0 );
border-bottom:1px #ccc solid;
position:fixed;
top:0;
left:0;
}
.moisrex-nav8 li{
display:inline-block;
text-align:center;
position:relative;
top:0;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-khtml-transition:all 0.2s ease-out;
-webkit-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
.moisrex-nav8 li:hover{
top:5px;
}
.moisrex-nav8 a{
text-decoration:none;
display:block;
padding:10px;
color:#000;
font:11px tahoma;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-khtml-transition:all 0.2s ease-out;
-webkit-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
.moisrex-nav8 a:hover{
background: #8bd3ed;
color:#000;
margin-top:-5px;
padding-top:15px;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-ms-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
-o-border-radius:0 0 5px 5px;
-khtml-border-radius:0 0 5px 5px;
}
</style>
</head>
<body>
<ul class="moisrex-nav8">
<li><a href="تست">فهرست موضوعات</a></li>
<li><a href="تست">جستجو</a></li>
<li><a href="تست">درشت کردن قلم متن</a></li>
<li><a href="تست">ریز کردن قلم متن</a></li>
<li><a href="تست">ذخیره سازی صفحه و موقعیت</a></li>
</ul><div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/">کدستان</a></div>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p><p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p><p>This is the content for Layout P Tag</p><p>This is the content for Layout P Tag</p>
</body>
</html>
ولی خیلی بهم ریخته نشون میده
کسی میتونه بگه چطور میشه بهینه ترش کرد
مهم برام ثابت بودن منو توی اسکرول زدن هست
و زیبایی افکت های ظاهریش در درجه دوم
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
margin-top:36px;
}
.moisrex-nav8{
list-style:none;
direction:rtl;
font:11px tahoma;
text-align:center;
margin:0;
padding:0;
display:block;
width:100%;
background: #8bd3ed;
background: -moz-linear-gradient(top, #8bd3ed 0%, #2cafe3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bd3ed), color-stop(100%,#2cafe3));
background: -webkit-linear-gradient(top, #8bd3ed 0%,#2cafe3 100%);
background: -o-linear-gradient(top, #8bd3ed 0%,#2cafe3 100%);
background: -ms-linear-gradient(top, #8bd3ed 0%,#2cafe3 100%);
background: linear-gradient(to bottom, #8bd3ed 0%,#2cafe3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bd3ed', endColorstr='#2cafe3',GradientType=0 );
border-bottom:1px #ccc solid;
position:fixed;
top:0;
left:0;
}
.moisrex-nav8 li{
display:inline-block;
text-align:center;
position:relative;
top:0;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-khtml-transition:all 0.2s ease-out;
-webkit-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
.moisrex-nav8 li:hover{
top:5px;
}
.moisrex-nav8 a{
text-decoration:none;
display:block;
padding:10px;
color:#000;
font:11px tahoma;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-khtml-transition:all 0.2s ease-out;
-webkit-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
.moisrex-nav8 a:hover{
background: #8bd3ed;
color:#000;
margin-top:-5px;
padding-top:15px;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-ms-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
-o-border-radius:0 0 5px 5px;
-khtml-border-radius:0 0 5px 5px;
}
</style>
</head>
<body>
<ul class="moisrex-nav8">
<li><a href="تست">فهرست موضوعات</a></li>
<li><a href="تست">جستجو</a></li>
<li><a href="تست">درشت کردن قلم متن</a></li>
<li><a href="تست">ریز کردن قلم متن</a></li>
<li><a href="تست">ذخیره سازی صفحه و موقعیت</a></li>
</ul><div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/">کدستان</a></div>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p><p>This is the content for Layout P Tag</p>
<p>This is the content for Layout P Tag</p><p>This is the content for Layout P Tag</p><p>This is the content for Layout P Tag</p>
</body>
</html>