آموزش کامل ساخت منوهای حرفه ای با Dhtml
آموزش کامل ساخت منوهای حرفه ای با Dhtml
[در این مقاله قصد دارم چگونگی ساخت منوهای Rollover و Drop-Down را با DHTML (و نه جاوااسکریپت) توضیح بدهم... من این مقاله را طوری نوشتم که اگر در زمینه DHTML مبتدی باشید، یعنی هیچی از آن ندانید، قادر به ساخت منوهای مورد نظر خود خواهید بود. این منوها را با جاوااسکریپت هم می توان ساخت، اما به نظر من استفاده از DHTML بهتر است...
به یاد داشته باشید که این منوها فقط در IE قابل استفاده خواهد بود و در مرورگرهای دیگر نظیر Netscape و Opera جواب نخواهد داد!
خوب، برای شروع به هیچ نرم افزار خاصی نیاز ندارید. از آنجا که می خواهید با DHTML کار کنید، یعنی می خواهید کدنویسی کنید، نرم افزارهایی نظیر Microsoft FrontPage و یا Macromedia Dreamweaver نمی توانند کمکی به شما بکنند. پس نرم افزار Notepad را باز کرده و فایل مورد نظر را در جای مناسب و با پسوند htm و یا html ذخیره نمائید. دقت داشته باشید که اگر می خواهید درون فایل خود فارسی تایپ کنید، در قسمت Encoding گزینه UTF-8 را انتخاب کنید. همچنین نرم افزار Notepad به طور اتوماتیک به آخر نام فایل وارد شده، پسوند txt را اضافه می کند. به عنوان مثال اگر فایل خود را با نام DHTML.htm ذخیره کنید، فایل نهایی به صورت DHTML.htm.txt خواهد بود. برای جلوگیری از چنین عملی، نام فایل را درون علامت کوتیشن ( " ) قرار دهید. یعنی چیزی شبیه به "DHTML.htm".
پس از ذخیره فایل، کدهای زیر را درون آن وارد کنید. این کدها برای هر صفحه وبی نیاز می باشد (هر چند مرورگرهای امروزی بدون نوشتن این کدهای ضروری هم، صفحه وب شما را 99.99% درست نمایش می دهند!).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DHTML Menus</title>
</head>
<body>
</body>
</html>
چون در ساخت این منوها، ما از CSS استفاده کرده ایم، می توانید برای تایپ این کدها (کدهای CSS)، به دو طریق عمل کنید:
1- کدهای CSS را درون یک فایل خارجی و با پسوند css ذخیره کنید و سپس آن را به صفحه خود لینک کنید.
2- کدهای CSS را مستقیما درون صفحه تایپ کنید.
چنان چه بخواهید کدهای CSS را مستقیما درون صفحه تایپ کنید، در قسمت Head صفحه (یعنی در بین تگهای </head> و <head>)، تگی به نام <style> باز کنید و کدهای CSS را درون آن تایپ نمائید. یعنی چیزی شبیه به کد زیر:
<head>
<style type="text/css">
</style>
</head>
خاصیت type="text/css" به مرورگر می گوید که این Styleها با CSS نوشته شده اند. (نکته در گوشی: علاوه بر CSS، از جاوااسکریپت (JavaScript) هم برای نوشتن Styleها استفاده می کنند).
چنان چه خواهان استفاده از یک Style Sheet خارجی هستید، یک فایل Notepad باز کرده و به همان روشی که در بالا گفته شد، آن را ذخیره کنید. با این تفاوت که آن را به جای UTF-8 به صورت ANSI و با پسوند css ذخیره کنید. پس از ذخیره این فایل، می بایست آن را به صفحه وب اصلی پیوند بزنید. برای این کار از کد زیر استفاده کنید:
<link rel="stylesheet" type="text/css" href="DHTML.css">
من در اینجا فرض کردم که شما نام فایل css را DHTML و آن را در کنار همان فایل صفحه وب (DHTML.htm) ذخیره کرده اید. چنان چه آن را با نام دیگری و یا در جای دیگری ذخیره کرده اید، آدرس آن را می بایست در قسمت href بنویسید.
یکی از کارهای دیگری که انجام آن ضرری ندارد، پنهان کردن Style Sheetها از مرورگرهای قدیمی است. چنان چه مرورگر فرد بازدید کننده، Styleها را پشتیبانی نکند، تمامی محتوای درون تگ <style> را بر روی صفحه نشان خواهد داد. برای جلوگیری از چنین عملی، می توانید از کدهای Comment (توضیحات) در HTML استفاده کنید. به کد زیر توجه کنید:
<style type="text/css">
<!--
-->
</style>
این علامتها سبب می شود که چنان چه مرورگر فرد بازدید کننده، Styleها را پشتیبانی نکند، آنها را به عنوان توضیح در نظر بگیرد و در نتیجه آنها را در صفحه نشان نخواهد داد.
تا اینجا هر چه گفتم، مقدمات کار بود. حال به کدنویسی اصلی می پردازیم. همان طور که در پیش نمایش منو ملاحظه نمودید، هنگامی که بر روی لینکی می رفتید، رنگ آن لینک عوض می شد. برای این کار نیاز به نوشتن Styleها برای دو لایه داریم. (لایه ها در HTML به وسیله تگ <div> ساخته می شوند). من نام این لایه ها (در واقع نام کلاس (Class) آنها) را برابر Normal و Over قرار داده ام. Normal برای حالتی که لینک غیر فعال و Over برای حالتی که لینک فعال می باشد. کد CSS این دو لایه به صورت زیر است:
div.Over {
background-color: #ffffff;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
width: 160;
height: 25;
font-family: tahoma;
font-size: 9pt;
color: #000000;
padding-left: 20;
padding-top: 4;
cursor: hand;
}
div.Normal {
width: 160;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
height: 25;
font-family: tahoma;
font-size: 9pt;
color: #000000;
padding-left: 20;
padding-top: 4;
cursor: hand;
}
توضیح: در زیر توضیح تک تک این خاصیتها آمده است. هر چند که مفهوم آنها از روی معنی کلمات معلوم است:
خاصیت width: پهنای طولی منو را مشخص کرده است.
خاصیت border-top و border-bottom: این خاصیتها، نوع حاشیه بالا و پایین را مشخص کرده اند. مقدار 1px solid #000000 بدین معناست که ضخامت حاشیه برابر 1px، به صورت solid (خط صاف) و رنگ 000000 (یعنی سیاه) می باشد. این نوع نوشتن Styleها، در حقیقت ادغام چندین خط کد در یک خط کد است. در حقیقت گسترده این خط، به صورت زیر می باشد:
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
خاصیت height هم عرض منو را مشخص می کند.
خاصیتهای font-family و font-size و color به ترتیب نام فونت، سایز فونت و رنگ فونت مورد نظر را مشخص می کند.
از آنجا که ما عرض منو را برابر 25 قرار داده ایم، برای قرار دادن متن مورد نظر در وسط این منو، از خاصیت padding-top استفاده کرده ایم. این خاصیت سبب می شود که متن ما، از بالا به اندازه 4px پایین بیاید. مقدار 4px برای منویی با عرض 25px و فونت Tahoma 9pt، دقیقا مناسب می باشد. خاصیت padding-left هم سبب می شود که متن ما از سمت چپ کمی فاصله داشته باشد تا منوی ما کمی قشنگتر به نظر برسد.
خاصیت آخر، یعنی خاصیت cursor، نوع فلش ماوس را مشخص می کند. از آنجا که در ساخت این منو، از هیچ نوع لینکی استفاده نشده است، یعنی به هیچ عنوان از تگ <a> استفاده نشده است، نشانه گر ماوس به صورت Normal (معمولا یک فلش سفید) می باشد. برای این که این نشانه گر را به حالت دست تبدیل کنیم، یعنی همانند اینکه بر روی لینکی قرار گرفته است، از این خاصیت استفاده می کنیم.
بعد از نوشتن این Styleها، می بایست این منوها را درون جعبه ای قرار دهیم. این جعبه را من با کلاس border مشخص کرده ام.
div.border {
text-align: left;
width: 160;
border: 1px solid #000000;
background-color: #eeeeee;
height: auto;
}
خاصیت background-color رنگ پشت زمینه را مشخص کرده است. خاصیت border هم به تمامی حاشیه ها، اعمال می شود. خاصیت text-align هم سبب می شود که متنها از سمت چپ به سمت راست نوشته شوند. تا اینجای کار، تقریبا نصف منو را کامل کرده اید. حال به صفحه وب اصلی خود بر می گردیم و کدنویسی آن را آغاز می کنیم.
ابتدا لایه ای با نام کلاس Normal می سازیم:
<div class="Normal">Main Page</div>
حال باید کدی بنویسیم که هنگامی که کاربر با ماوس بر روی این منو رفت، کلاس این لایه از Normal به Over تغییر کند. علاوه بر این کد، به کدی هم نیاز داریم که هنگامی که ماوس کاربر خارج شد، نام کلاس Over دوباره به Normal تبدیل شود. برای این کار از خاصیتهای onmouseover و onmouseout استفاده می کنیم.
<div class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'">Main Page</div>
کلمه کلید this یعنی همین المنت! className هم یعنی نام کلاس. دقت داشته باشید که نام کلاس جدید را من درون کوتیشن تکی ( ' ) قرار داده ام. اگر از کوتیشن دوتایی ( " ) استفاده کنید، به مشکل بر می خورید... خروجی این مثال به صورت زیر خواهد بود:
Main Page
حتما تعجب می کنید که چرا این منو، با اون منویی که من به شما نشان داده ام فرق می کند. صبر کنید! کد ما هنوز کامل نشده است. برای این که آب و رنگ این کد کمی زیباتر شود، آن لایه جعبه ای که آن را با نام کلاس border را مشخص کرده ام، می بایست در اطراف این کد قرار دهید. در حقیقت تمامی کدهای ما در بین کد زیر قرار خواهد گرفت:
<div class="border">
</div>
حال خروجی کد زیر را مشاهده کنید:
<div class="border">
<div class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'">Main Page</div>
<div class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'">Articles</div>
<div class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'">Tutorials</div>
</div>
خروجی:
Main Page
Articles
Tutorials
تا اینجا همه کار به خوبی پیش رفت. فقط یک مشکل کوچک وجود دارد. هنگامی که روی اولین لینک و یا آخرین لینک می روید، حاشیه بالا (در اولین لینک) و حاشیه پایین (در آخرین لینک)، به جای 1px برابر 2px می شود. علت آن این است که 1px برای لایه border و 1px هم برای لایه Over می باشد که مجموع آنها برابر 2px می باشد. برای اینکار، ما نام کلاس اولین لینک و آخرین لینک را به ترتیب برابر firstNormal و lastNormal و برای حالت Hover آنها، نامهای firstOver و lastOver را اختیار می کنیم. کد CSS برای این دو لایه به صورت زیر است:
div.firstOver {
background-color: #ffffff;
border-bottom: 1px solid #000000;
width: 160;
height: 25;
font-family: tahoma;
font-size: 9pt;
color: #000000;
padding-top: 4;
padding-left: 20;
cursor: hand;
}
div.firstNormal {
width: 160;
border-bottom: 1px solid #eeeeee;
height: 25;
font-family: tahoma;
font-size: 9pt;
color: #000000;
padding-top: 4;
padding-left: 20;
cursor: hand;
}
div.lastOver {
background-color: #ffffff;
border-top: 1px solid #000000;
width: 160;
height: 25;
font-family: tahoma;
font-size: 9pt;
color: #000000;
padding-left: 20;
padding-top: 4;
cursor: hand;
}
div.lastNormal {
width: 160;
border-top: 1px solid #eeeeee;
height: 25;
font-family: tahoma;
font-size: 9pt;
color: #000000;
padding-left: 20;
padding-top: 4;
cursor: hand;
}
این کدها دقیقا همانند کدهای div.Over و div.Normal می باشند. با این تفاوت که برای لایه lastNormal و lastOver، خاصیت border-bottom و برای لایه های firstNormal و firstOver، خاصیت border-top برداشته شده است. حال خروجی کد زیر را با خروجی کد قبلی مقایسه کنید:
<div class="border">
<div class="firstNormal" onmouseover="this.className='firstOver'" onmouseout="this.className='firstNormal'">Main Page</div>
<div class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'">Articles</div>
<div class="lastNormal" onmouseover="this.className='lastOver'" onmouseout="this.className='lastNormal'">Tutorials </div>
</div>
Main Page
Articles
Tutorials
بهتر نشد؟ چرا! حال فقط نوبت به فلشها می رسد. من فلشها را به وسیله فونت Webdings ساختم. (نکته درگوشی: در فونت Webdings هر چیزی را می توانید پیدا کنید. WordPad را باز کنید و تمامی حروف فونت Webdings را امتحان کنید. حتما خوشتان می آید!). برای اینکه بتوانم به این فلشها، Style اعمال کنم، آنها را درون تگ <span> قرار دادم. تگ <span> همانند تگ <div> هیچ کار خاصی انجام نمی دهد. فقط برای اینکه بتوانید به آنها Style اعمال کنید به کار می رود. فرق تگ <span> و تگ <div> هم در این است که تگ <span>، به صورت Inline و تگ <div> به صورت Block-Level می باشد.
من برای این فلشها، نام کلاس آنها را برابر arrow قرار داده ام. کد CSS این فلشها به صورت زیر می باشد:
span.arrow {
color: #006699;
font-family: webdings;
padding-right: 10;
}
این فلش به رنگ 006699 (چیزی شبیه به رنگ آبی) می باشد. برای اینکه رنگ این فلش، هنگامی که ماوس بر روی آنها قرار میگیرد، عوض شود، می بایست خاصیتی بنویسیم که به مرورگر بگوییم تگهای <span> با نام کلاس arrow را که در تگ <div> با نام کلاس Over قرار دارد را به رنگ نارنجی نشان دهد. این کد به صورت زیر می باشد:
div.Over span.arrow {
color: #ff6600;
}
div.firstOver span.arrow {
color: #ff6600;
}
div.lastOver span.arrow {
color: #ff6600;
}
از آنجا که ما سه نوع لایه (به نام های Over و firstOver و lastOver) داشتیم، این کد را برای هر سه لایه نوشتم... حال کافیست قبل از متن مورد نظر، کد زیر را قرار دهید تا فلش ظاهر شود.
<span class="arrow">4</span>
عدد 4 در فونت Webdings، سبب نمایش یک فلش به سمت راست اشاره می کند می شود. به خروجی کد زیر توجه کنید:
<div class="border">
<div class="firstNormal" onmouseover="this.className='firstOver'" onmouseout="this.className='firstNormal'"><span class="arrow">4</span>Main Page</div>
<div class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'"><span class="arrow">4</span>Articles</div>
<div class="lastNormal" onmouseover="this.className='lastOver'" onmouseout="this.className='lastNormal'"><span class="arrow">4</span>Tutorials</div>
</div>
4Main Page
4Articles
4Tutorials
تبریک! منوی شما با موفقیت تمام ساخته شد!
آخرین مطلبی که می خواهم آن را به شما بگویم، ساخت منوی Drop-Down می باشد. با کمی فکر خودتان می توانید منوی Drop-Down را به کمک همین DHTML بسازید. اما با این حال، توضیح کامل را در زیر آورده ام.
قبل از هر چیز، به تجزیه و تحلیل کد می پردازیم. ما کدی می خواهیم که هنگامی که بر روی یکی از منوهای بالا کلیک شد، گزینه هایی را در زیر به نمایش در بیاورد. همچنین جهت فلش به سمت پایین تغییر کند. سپس هنگامی که بر روی همان گزینه کلیک شد، گزینه ها محو شوند و جهت فلش هم به همان سمت راست بر گردد.
فرض کنید می خواهید هنگامی که کاربر بر روی گزینه Articles کلیک می کند، منوی مورد نظر در زیر آن به نمایش در بیاید و جهت فلش هم عوض شود. برای ساخت فلشی به سمت پایین، از همان تگ <span> و با نام کلاس arrow استفاده می کنیم. با این تفاوت که به جای نوشتن عدد 4، از عدد 6 استفاده می کنیم.
<div id="articlesNormal" class="Normal"><span class="arrow">4</span>Articles</div>
<div id="articlesOver" class="Normal"><span class="arrow">6</span>Articles</div>
همان طور که در کد بالا مشاهده می کنید، علاه بر اینکه به این دو منو، کلاس Normal را اختصاص داده ام، به هر یک از آنها، یک نام منحصر به فرد نیز داده ام. کدهای CSS ای که می بایست برای لایه articlesOver بنویسید، به صورت زیر است:
div#articlesOver {
display: none;
}
خاصیت/مقدار display: none سبب می شود که این لایه بر روی صفحه نمایش داده نشود.
من زیر منوی Articles را درون لایه ای به نام articlesMenu قرار می دهم.
<div id="articlesNormal" class="Normal"><span class="arrow">4</span>Articles</div>
<div id="articlesOver" class="Normal"><span class="arrow">6</span>Articles</div>
<div id="articlesMenu">
<div style="padding-left: 50" class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'"><span class="arrow">4</span>Articles 1</div>
</div>
برای منوهای زیر Articles، من خاصیت/مقدار style="padding-left: 50" را هم نیز اضافه کردم که از بقیه منوها، کمی متمایز باشد و تو رفتگی داشته باشد. برای لایه articlesMenu هم باید کد CSS زیر را بنویسیم:
div#articlesMenu {
display: none;
}
حال که کدهای CSS نوشته شد، نوبت به نوشتن کدهای اصلی می رسد.
<div id="articlesNormal" class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'" onclick="this.style.display='none'; articlesOver.style.display='block'; articlesMenu.style.display='block'"><span class="arrow">4</span>Articles</div>
<div id="articlesOver"><span class="arrow">6</span>Articles</div>
توضیح: خاصیت onclick همان طور که از نامش پیداست، موقعی فعال می شود که کاربر بر روی لایه کلیک می کند. ما کدی نوشتیم که هنگامی که کاربر بر روی لایه Articles کلیک می کند، خود لایه Articles (یعنی لایه ای به نام articlesNormal) از روی صفحه محو شود و سپس لایه های articlesMenu و articlesOver (که به وسیله کد CSS از روی صفحه محو شده اند) نمایش داده شوند. حال نوبت به کدنویسی لایه articlesOver می باشد. برای این لایه، کدی می نویسیم که این کد دقیقا برعکس کد بالا می باشد.
<div id="articlesOver" class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'" onclick="this.style.display='none'; articlesNormal.style.display='block'; articlesMenu.style.display='none'"><span class="arrow">6</span>Articles</div>
خروجی کد زیر را مشاهده کنید:
<div class="border">
<div class="firstNormal" onmouseover="this.className='firstOver'" onmouseout="this.className='firstNormal'"><span class="arrow">4</span>Main Page</div>
<div id="articlesNormal" class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'" onclick="this.style.display='none'; articlesOver.style.display='block'; articlesMenu.style.display='block'"><span class="arrow">4</span>Articles</div>
<div id="articlesOver" class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'" onclick="this.style.display='none'; articlesNormal.style.display='block'; articlesMenu.style.display='none'"><span class="arrow">6</span>Articles</div>
<div id="articlesMenu">
<div style="padding-left: 50" class="Normal" onmouseover="this.className='Over'" onmouseout="this.className='Normal'"><span class="arrow">4</span>Articles 1</div>
</div>
<div class="lastNormal" onmouseover="this.className='lastOver'" onmouseout="this.className='lastNormal'"><span class="arrow">4</span>Tutorials</div>
</div>
