• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

آموزش ساخت منوی شناور ثابت در گوشه صفحه (اختصاصی)

M

Mahdi Askari

مدير فنی
سلام
امیدوارم حالتون خوب باشه
امروز با یک نمونه کد در خدمتتون هستم که میتونید اونو در هر کجا از سایتتون خواستید استفاده کنید.
به درخواست یکی از دوستان عزیز این کد که قالب ایران انجمن هم از آن استفاده کرده رو براتون قرار میدم
تصویری از این منو رو ببینید:

Untitled.png



در این کد از فونت کودک استفاده شده که اگر در سایتتون ندارید این فونت رو این قطعه کد رو اول فایل های CSS قالبتون قرار بدید

کد: 
@font-face{
font-family:'BKoodakBold';
src:url('http://mahdiaskari.ir/fonts/BKoodakBold.eot?#') format('eot'),
 url('http://mahdiaskari.ir/fonts/BKoodakBold.woff') format('woff'),
 url('http://mahdiaskari.ir/fonts/BKoodakBold.ttf') format('truetype');
}


کدهای استایل زیر رو هم درون قالبتون قرار بدید:

کد: 
#navigationMenu {
 background: none repeat scroll 0px 0px transparent;
bottom: 0px;
cursor: pointer;
 height: 101px;
 left: -5px;
line-height: normal;
margin: 0px;
 padding: 0px;
position: fixed;
top: 35% !important;
 z-index: 2147483647 !important; 
}
 #navigationMenu li:first-child { 
    list-style: none outside none; 
height: 80px;
 padding: 2px;
width: 40px;
 }
 #navigationMenu li {
list-style: none outside none;
height: 39px;
padding: 2px;
width: 40px;
 } 
#navigationMenu .suppcenter {
background-position: -153px 0px;
height: 78px !important; 
}
 #navigationMenu a {
 background-image: url("http://www.up.iranjoman.com/images/koeyks4cebm3c7qy11.gif");
 height: 39px;
width: 38px;
display: block;
 position: relative;
 }
 #navigationMenu a {
color: rgb(51, 51, 51);
text-decoration: none;
transition: all 0.5s ease 0s;
 }
 #navigationMenu .ticket {
 background-position: -38px 0px;
 }
 #navigationMenu .chat { 
background-position: -76px 0px;
 }
 #navigationMenu .fq {
background-position: -114px 0px;
 }
 #navigationMenu .poll {
background-position: 0px 0px;
 } 
#navigationMenu a:hover {
text-decoration: none;
box-shadow: 0px 0px 5px rgb(157, 223, 245);
 }
 #navigationMenu .suppcenter:hover {
background-position: -191px 0px;
height: 78px !important;
 } 
#navigationMenu .ticket:hover {
 background-position: -38px -39px; 
} 
#navigationMenu .chat:hover {
background-position: -76px -39px;
 } 
#navigationMenu .fq:hover { 
background-position: -114px -39px;
 }
 #navigationMenu .poll:hover {
background-position: 0px -39px; 
}
 #navigationMenu a:hover span {
 width: auto;
 padding: 0px 20px;
 overflow: visible;
font: 21px bkoodakbold;
 }
 #navigationMenu .poll span {
background-color: rgb(208, 165, 37);
 color: rgb(96, 78, 24);
text-shadow: 1px 1px 0px rgb(216, 181, 75); 
} 
#navigationMenu span {
 width: 0px; 
 left: 38px; 
 padding: 0px; 
 position: absolute; 
overflow: hidden;
 font-size: 18px; 
 font-weight: bold; 
letter-spacing: 0.6px; 
white-space: nowrap; 
 line-height: 39px;
transition: all 0.25s ease 0s; 
} 
#navigationMenu .fq span {
 background-color: rgb(175, 30, 131);
 color: rgb(70, 15, 53);
 text-shadow: 1px 1px 0px rgb(210, 68, 166); 
}
 #navigationMenu .fq span {
background-color: rgb(175, 30, 131);
color: rgb(70, 15, 53);
text-shadow: 1px 1px 0px rgb(210, 68, 166);
 }
 #navigationMenu .chat span {
background-color: rgb(200, 108, 31);
color: rgb(90, 53, 23);
text-shadow: 1px 1px 0px rgb(210, 131, 68);
 }
 #navigationMenu a:hover span {
width: auto;
padding: 0px 20px;
overflow: visible;
 }
 #navigationMenu .ticket span {
background-color: rgb(30, 139, 180);
color: rgb(34, 58, 68);
text-shadow: 1px 1px 0px rgb(68, 168, 208);
 }
 #navigationMenu .ticket span {
 background-color: rgb(30, 139, 180);
color: rgb(34, 58, 68); 
 text-shadow: 1px 1px 0px rgb(68, 168, 208);
 }

و در آخر کد زیر رو در فایل قالب خودتون به عنوان مثلا یا در فوتر یا در هدر قرار دهید.

کد: 
<ul id="navigationMenu">

<li>
<a class="suppcenter" href="[URL="http://www.iranjoman.com/view-source:http://www.iranjoman.com/sendmessage.php"]http://www.iranjoman.com/sendmessage.php[/URL]"></a>
</li>

<li>
<a class="ticket" href="[URL="http://www.iranjoman.com/view-source:http://www.iranjoman.com/showthread.php?t=20236"]http://www.iranjoman.com/showthread.php?t=20236[/URL]">
<span> قوانین ایران انجمن </span>
</a>
</li>

<li>
<a class="chat" href="[URL="http://www.iranjoman.com/view-source:http://www.iranjoman.com/misc.php?do=cchatbox"]http://www.iranjoman.com/misc.php?do=cchatbox[/URL]">
<span id="kayako_sitebadgebg""> چت باکس </span>
</a>
</li>

<li>
<a class="fq" href="[URL="http://www.iranjoman.com/view-source:http://www.iranjoman.com/forumdisplay.php?f=70"]http://www.iranjoman.com/forumdisplay.php?f=70[/URL]">
<span> مشکلات کاربری </span>
</a>
</li>

<li>
<a class="poll" href="[URL="http://www.iranjoman.com/view-source:http://www.iranjoman.com/forumdisplay.php?f=1272"]http://www.iranjoman.com/forumdisplay.php?f=1272[/URL]">
<span> درخواست های مدیریتی </span>
</a>
</li>

</ul>



لینک ها رو متناسب با لینک خودتون تغییر بدید.


کپی برداری با نام ایران انجمن بلامانع است:گل:
موفق باشید:گل:
 
Z

zohreh

کاربر ويژه
Mahdi Askari گفت:
کدهای استایل زیر رو هم درون قالبتون قرار بدید:

کد: 
#navigationMenu {
 background: none repeat scroll 0px 0px transparent;
bottom: 0px;
cursor: pointer;
 height: 101px;
 left: -5px;
line-height: normal;
margin: 0px;
 padding: 0px;
position: fixed;
top: 35% !important;
 z-index: 2147483647 !important; 
}
 #navigationMenu li:first-child { 
    list-style: none outside none; 
height: 80px;
 padding: 2px;
width: 40px;
 }
 #navigationMenu li {
list-style: none outside none;
height: 39px;
padding: 2px;
width: 40px;
 } 
#navigationMenu .suppcenter {
background-position: -153px 0px;
height: 78px !important; 
}
 #navigationMenu a {
 background-image: url("http://www.up.iranjoman.com/images/koeyks4cebm3c7qy11.gif");
 height: 39px;
width: 38px;
display: block;
 position: relative;
 }
 #navigationMenu a {
color: rgb(51, 51, 51);
text-decoration: none;
transition: all 0.5s ease 0s;
 }
 #navigationMenu .ticket {
 background-position: -38px 0px;
 }
 #navigationMenu .chat { 
background-position: -76px 0px;
 }
 #navigationMenu .fq {
background-position: -114px 0px;
 }
 #navigationMenu .poll {
background-position: 0px 0px;
 } 
#navigationMenu a:hover {
text-decoration: none;
box-shadow: 0px 0px 5px rgb(157, 223, 245);
 }
 #navigationMenu .suppcenter:hover {
background-position: -191px 0px;
height: 78px !important;
 } 
#navigationMenu .ticket:hover {
 background-position: -38px -39px; 
} 
#navigationMenu .chat:hover {
background-position: -76px -39px;
 } 
#navigationMenu .fq:hover { 
background-position: -114px -39px;
 }
 #navigationMenu .poll:hover {
background-position: 0px -39px; 
}
 #navigationMenu a:hover span {
 width: auto;
 padding: 0px 20px;
 overflow: visible;
font: 21px bkoodakbold;
 }
 #navigationMenu .poll span {
background-color: rgb(208, 165, 37);
 color: rgb(96, 78, 24);
text-shadow: 1px 1px 0px rgb(216, 181, 75); 
} 
#navigationMenu span {
 width: 0px; 
 left: 38px; 
 padding: 0px; 
 position: absolute; 
overflow: hidden;
 font-size: 18px; 
 font-weight: bold; 
letter-spacing: 0.6px; 
white-space: nowrap; 
 line-height: 39px;
transition: all 0.25s ease 0s; 
} 
#navigationMenu .fq span {
 background-color: rgb(175, 30, 131);
 color: rgb(70, 15, 53);
 text-shadow: 1px 1px 0px rgb(210, 68, 166); 
}
 #navigationMenu .fq span {
background-color: rgb(175, 30, 131);
color: rgb(70, 15, 53);
text-shadow: 1px 1px 0px rgb(210, 68, 166);
 }
 #navigationMenu .chat span {
background-color: rgb(200, 108, 31);
color: rgb(90, 53, 23);
text-shadow: 1px 1px 0px rgb(210, 131, 68);
 }
 #navigationMenu a:hover span {
width: auto;
padding: 0px 20px;
overflow: visible;
 }
 #navigationMenu .ticket span {
background-color: rgb(30, 139, 180);
color: rgb(34, 58, 68);
text-shadow: 1px 1px 0px rgb(68, 168, 208);
 }
 #navigationMenu .ticket span {
 background-color: rgb(30, 139, 180);
color: rgb(34, 58, 68); 
 text-shadow: 1px 1px 0px rgb(68, 168, 208);
 }
کلیک کنید تا باز شود...

ببخشید دقیقا جای این کجاست؟؟
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا