نياز به كد منوي شناور

Nikpendar

Nikpendar

Member
من جهت تكميل پروژه‌ام نياز به كد منوي شناور دارم. اگر دوستان لطف كنند و كد آن را در اين تاپيك قرار بدهند ممنون مي‌شوم.

...
 
irania

irania

Member
اتفاقا منم دنبال همین کدم! آقایون و خانوما لطفا هر کسی در این خصوص اطلاع داره ما رو هم مطلع کنه! خیلی ممنون میشم!
 
shah_ram

shah_ram

New Member
کد منوی شناور!
فقط باید جای کلمات تست منوی مورد نظرتونو بنویسید و جای مجید آنلاین.کام لینک مورد نظرتونو بزارید!!
===============================================================
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left">تست</a><br>
<a href="http://www.majidonline.com">تست</a><br>
<a href="http://www.majidonline.com">تست</a><br>
<a href="http://www.majidonline.com">تست</a><br>
<a href="http://www.majidonline.com">تست</a></td>
</tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
 
Mahdi

Mahdi

کاربر متخصص انجمن بُرداری
سلام دوست عزيز
با نرم افزارهاي مربوطه تسلط بيشتري روي منوي خودت داري مثل
allwebmenu
sothink dhtml menu
موفق باشيد
مهدي
 
N

~negin~

New Member
shah_ram گفت:
کد منوی شناور!
فقط باید جای کلمات تست منوی مورد نظرتونو بنویسید و جای مجید آنلاین.کام لینک مورد نظرتونو بزارید!!
===============================================================
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left">تست</a><br>
<a href="http://www.majidonline.com">تست</a><br>
<a href="http://www.majidonline.com">تست</a><br>
<a href="http://www.majidonline.com">تست</a><br>
<a href="http://www.majidonline.com">تست</a></td>
</tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
کلیک کنید تا باز شود...

شکیل تر ازین نیست؟
 
tarenoco

tarenoco

Member
برای اینکه به سورس های خوبی دسترسی داشته باشین یه سری به این سایت بزنید
htmldrive.net
 
tarenoco

tarenoco

Member
در این مطلب آموزشی از بخش آموزش های وردپرس روکش می خواهیم نحوه ساخت منو کشویی (آبشاری) برای وردپرس را به صورت گام به گام برای شما بیان کنیم. این مطلب آموزشی را بگونه ای پیش خواهیم برد که شما با اصول اولیه ساخت یک منو توسط css و html آشنا شوید و علوه بر تسلط کامل بر ساخت منو کشویی برای وردپرس بتوانید برای سیستم های محتوای دیگر یا حتی قالب های html نیز به راحتی یک منو زیبای کشویی یا همان منو آبشاری ایجاد کنید.

[h=2]گام اول : نوشتن markup HTML منو کشویی[/h] برای ساخت یک منو کشویی ما باید در ابتدا markup HTML آن را بنویسیم. بهترین تگ html برای ساخت یک منو کشویی تگ ul می باشد. در اصل این تگ برای فهرست کردن موضوعات در یک سند html می باشد اما ما می توانیم از آن جهت ساخت یک منو آبشاری نیز استفاده کنیم. یک نمونه ساده از markup HTML یک منو کشویی با استفاده از تگ ul مانند زیر می باشد.
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
همانطور که در خط چهارم می بینید ما بین تگ باز و بسته li یک تگ باز و بسته ul دیگر قرار دادیم به همین ترتیب می توان به صورت پله ای بی نهایت تگ ul و li را درون هم قرار داد. تنها باید به این نگته توجه کرد که ما فقط مجاز به استفاده از تگ li در تگ ul می باشیم. در تگ li هم می توانیم از اکثر تگ های html استفاده کنیم.
حال که با markup HTML کلی یک منو آبشاری آشنا شدید نگاهی به کد های html زیر بیندازید.
<nav>
<ul>
<li><a>خانه</a></li>
<li><a>دسته بندی ها</a>
<ul>
<li><a>قالب وردپرس</a>
<ul>
<li><a>قالب شخصی</a></li>
<li><a>قالب شرکتی</a></li>
</ul>
</li>
<li><a>آموزش وردپرس</a></li>
</ul>
</li>
<li><a>درباره ما</a></li>
<li><a>تماس با ما</a></li>
</ul>
</nav>
در کد بالا ما ۴ عنوان اصلی داریم که یکی از آنها شامل دو زیر مجموعه می باشد به همین ترتیب یک از زیر مجموعه ها نیز دارای ۲ زیر مجموعه دیگر می باشد. بعد از اینکه این کد را در یک صفحه با فرمت html ذخیره کردید نتیجه کار مانند زیر می شود.
html-menu-markup.jpg

خوب حال یک سوال ممکن است برای شما پیش آید که: آیا برای ساخت یک منو کشویی در وردپرس نیز باید کد های html را به صورت دستی وارد کنم؟
برای افزودن منو به قالب وردپرس شما هم می توانید کد های html منو را به صورت دستی وارد کنید و هم می توانید از قابلیت فهرست های وردپرس بهره بگیرید. به نظر من بهترین گزینه برای مدیریت منو در وردپرس استفاده از فهرست ها می باشد. در حقیقت وقتی ما با استفاده از فهرست های وردپرس یک منو را به قالب اضافه می کنیم وردپرس همان کاری را انجام می دهد که ما در بالا بصورت دستی انجام دادیم. یعنی وردپرس طبق خواسته شما کد های html منو را می سازد. از ویژگی ها بارز کد های html خروجی فهرست های وردپرس می توان به موارد زیر اشاره کرد:

  • سرعت بالا در ساخت منو ها
  • فراهم آوردن امکانات مدیریتی آسان برای منو ها
  • افزودن کلاس های html خاص به منو ها
  • قابلیت مدیریت چندین منو در یک بخش
[h=3]چگونه از فهرست های وردپرس استفاده کنیم؟[/h] برای استفاده از فهرست ها ابتدا باید کد زیر را به فایل فانکسن قالب سایت خود اضافه کنید.
function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'منو بالا' )
)
);
}

add_action( 'init', 'register_my_menus' );
در کد بالا top-menu شناسه منو و “منو بالا” نام منو می باشد. برای داشتن منو های بیشتر می توانید مانند زیر اقدام کنید.
function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'منو بالا' ),
'main-menu' => __( 'منو میانی' ),
'footer-menu' => __( 'منو پایین' )
)
);
}

add_action( 'init', 'register_my_menus' );
حال باید با استفاده از کد زیر منو را در قالب فراخوانی کنیم.
<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' =>'nav', 'menu_class' =>'topnav' ) ); ?>
در این کد ما منو با شناسه top-menu را فراخوانی کرده ایم. ما این کد را در فایل header.php قرار می دهیم تا در بالای تمامی صفحات دیده شود.
حال وارد مسیر داشبورد > نمایش > فهرست ها شوید و یک منو به شکل زیر ایجاد کنید سپس در بخش پایین صفحه یعنی جایگاه‌ها در پوسته جایگاه این فهرست را مشخص کنید.
wp-admin_nav-menus.jpg

پس از ذخیره فهرست قالب خود را باز کنید, می بینید که فهرستی که ساخته اید در قالب شما به نمایش در می آید.
html-menu-markup.jpg

[h=2]گام دوم: تغییر ظاهر منو کشویی با استفاده از css[/h] حال نوبت به تغییر ظاهر منو می رسد. در این مرحله ما به شما می گوییم که چگونه می توانید برای یک منو آبشاری کد های CSS را بنویسد. تمام کد هایی که در اینجا معرفی می کنیم را باید در فایل style.css قالب فعلی سایت خود قرار دهید.
در ابتدا با استفاده از کدهای css زیر رنگ پس زمینه, ارتفاع, فاصله منو از اطراف و عرض کل قسمت منو در قالب را مشخص می کنیم.
nav {
background: none repeat scroll 0 0 #708090;
height: 40px;
margin: 0 auto;
width: 1000px;
}
wp-nav-menu-1.jpg

حال با استفاده از کد های زیر تمام تگ های ul موجود در منو را از حالت لیست بودن خارج می کنیم و فاصله هایی که به صورت پیش فرض توسط مرورگر ها به تگ ul اضافه می شود را بر می داریم.
nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
wp-nav-menu-2.jpg

حال نوبت به تگ li می رسد. کد های زیر برای این تگ نوشته شده اند که باید به همین ترتیب نیز در فایل style.css قالب قرار گیرند.
nav > ul > li {
background: none repeat scroll 0 0 #87CEEB;
border-left: 1px solid #73BAD7;
display: block;
float: right;
}
nav ul li {
margin: 0;
position: relative;
}
wp-nav-menu-3.jpg

حال نوبت به لینک ها می رسد. کد های css زیر برای لینک های منو نوشته شده اند که باعث می شوند تا این منو شکل یک منو واقعی را به خود بگیرد.
nav > ul > li > a {
padding: 10px 20px;
}
nav ul li a {
color: #0000FF;
display: block;
float: right;
font-family: tahoma;
font-size: 15px;
padding: 10px 15%;
text-decoration: none;
}
wp-nav-menu-4.jpg

تا اینجای کار خوب پیش رفتیم. منو تقریبا کامل است اما هنوز نمی توان زیر منو ها را از منو های اصلی تشخیص داد و با حرکت موس روی عنوان های اصلی زیر منو های آنها را دید. حال با افزودن کد های زیر به فایل style.css قالب دیگر منو شکل واقعی خود را می گیرد و با حرکت دادن موس روی منو های اصلی زیر منو آنها ظاهر می شود.
nav ul li ul {
background: none repeat scroll 0 0 #708090;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 100%;
transition: all 0.5s ease 0s;
visibility: hidden;
width: 170px;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul li ul li ul {
border-right: 1px solid #5D6D7D;
right: 100%;
top: 0;
}
nav ul li ul li a {
border-bottom: 1px solid #637383;
color: #FFFFFF;
text-align: right;
width: 70%;
}
wp-nav-menu-5.jpg

خوب کار تغییر ظاهر منو هم در اینجا تمام شد. امیدواریم تا این آموزش توانسته باشد به شما کمک کند. در صورت داشتن هرگونه پرسشی در باره منوهای کشویی وردپرس آن را با ما در میان بگذارید.
[h=3]کد کامل css جهت تغییر ظاهر منو آبشاری (کشویی):[/h] nav {
background: none repeat scroll 0 0 #708090;
height: 40px;
margin: 30px auto 0;
width: 1000px;
}
nav ul li a {
color: #485868;
display: block;
float: right;
font-family: tahoma;
font-size: 15px;
padding: 10px 15%;
text-decoration: none;
}
nav > ul > li > a {
padding: 10px 20px;
}
nav ul li {
margin: 0;
position: relative;
}
nav ul li ul {
background: none repeat scroll 0 0 #708090;
opacity: 0;
padding: 0;
position: absolute;
right: 0;
top: 100%;
transition: all 0.5s ease 0s;
visibility: hidden;
width: 170px;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul li ul li ul {
border-right: 1px solid #5D6D7D;
right: 100%;
top: 0;
z-index: 2;
}
nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
nav > ul > li {
background: none repeat scroll 0 0 #87CEEB;
border-left: 1px solid #73BAD7;
display: block;
float: right;
}
nav ul li ul li a {
border-bottom: 1px solid #637383;
color: #333333;
float: none;
text-align: right;
width: 70%;
z-index: 2;
}
nav ul li ul li {
clear: both;
display: block;
float: none;
position: relative;
width: 100%;
z-index: 2;
}
wp-nav-menu-6.jpg
 
tarenoco

tarenoco

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

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا