شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك Empty28.02.13 20:30

شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك

رقم المشاركة : ( 1 )
نائب المدير
نائب المدير

البراق

إحصائيةالعضو

ذكر
العمر : 36
عدد المساهمات : 5565
نقاط : 112447
20
مُساهمةموضوع: شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك


شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك


شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك

السلام عليكم ورحمة الله وبركاته

شرحنا اليوم لطريقة عمل قائمة menu

في بداية نحن تعلمنا طريقة عمل تبويب جديد في درس سابق (اضغط هنا)

الآن نفتح التبويب الجديد ولنطق عليه اسم Menu

طريقة قائمة جميلة جداً Menu


  شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك Attachment

ونلصق فيه الكود التالي :

الكود:
<span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;">  </span></span><br />
<center><span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;"> <style type="text/css">
  .urbangreymenu{ width: 190px; /*width of menu*/ }  .urbangreymenu .headerbar{ font: bold 11px Tahoma; color: white; background: #606060 url(http://site.mynet.com/tekkanarya_hakan/BizeHerYerParis/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/ margin-bottom: 0; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 7px 0 7px 31px; /*31px is left indentation of header text*/ }  .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /*bottom spacing between each UL and rest of content*/ }  .urbangreymenu ul li{ padding-bottom: 2px; /*bottom spacing between  menu  items*/ }  .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /*link text is indented 8px*/ text-decoration: none; }  .urbangreymenu ul li a:visited{ color: black; }  .urbangreymenu ul li a:hover{ /*hover state CSS*/ color: white; background: #0099cc; } 
</style> </span></span><br />
<div class="urbangreymenu"><h3 class="headerbar"><span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;">ANA MENÜ/MAIN MENU</span></span></h3><ul><span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;">
<li><a _fcksavedurl="DUVAR LİNK BURAYA" href="http://wall%20l%c4%b0nk%20buraya/"><b>» Walll</b> </a></li>
<li><a _fcksavedurl="FOTORAFLAR LİNK BURAYA" href="http://www.blogger.com/FOTORAFLAR%20L%C4%B0NK%20BURAYA"><b>» Photos</b></a></li>
<li><a _fcksavedurl="VİDEOLAR LİNK BURAYA" href="http://v%c4%b0deos%20l%c4%b0nk%20buraya/"><b>» Videos</b></a></li>
<li><a _fcksavedurl="NOTLAR LİNK BURAYA" href="http://notes%20l%c4%b0nk%20buraya/"><b>»  Notes</b></a></li>
<li><a _fcksavedurl="SAYFANIZIN LİNKİ" href="http://www.blogger.com/SAYFANIZIN%20L%C4%B0NK%C4%B0" rel="nofollow" target="_blank"><b>» Share</b></a></li>
<li><a _fcksavedurl="http://fbmlkod.tr.gg" href="http://fbmlkod.tr.gg/" rel="nofollow" target="_blank"><b>» Web Sitemiz / Our Web</b></a></li>
<li><a _fcksavedurl="İLETİŞİM LİNKİ" href="http://contact%20l%c4%b0nk%c4%b0/" rel="nofollow" target="_blank"><b>» Contact</b></a></li>
</span></span></ul><h3 class="headerbar"><span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;">YÖNETİCİLER/MANAGERS</span></span></h3><ul><span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;">
<li><a _fcksavedurl="http://www.facebook.com/FbmlKod.Tr.gg" href="http://www.facebook.com/FbmlKod.Tr.gg" rel="nofollow" target="_blank"><b>» HasaN GönüLaL</b></a></li>
</span></span></ul><h3 class="headerbar"><span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;">DOST SAYFALAR/FRIENDS</span></span></h3><ul><span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;">
<li><a _fcksavedurl="http://www.facebook.com/FbmlKod.Tr.gg" href="http://www.facebook.com/FbmlKod.Tr.gg" rel="nofollow" target="_blank"><b>» FbmlKod.Tr.gg</b></a></li>
</span></span></ul></div></center><span onmouseout="_tipoff()" onmouseover="_tipon(this)"><span class="google-src-text" style="direction: ltr; text-align: left;">    </span>  <style type="text/css">
 <center>. Urbangreymenu (width: 190px; / * width of  menu  * /). Urbangreymenu. Headerbar (font: bold Tahoma 11px; color: white; background: # 606 060 url (http://site.mynet.com/tekkanarya_hakan/BizeHerYerParis/arrowstop.gif) no-repeat 6px 8px; / * last 2 values are the x and y coordinates of bullet image * / margin-bottom: 0; / * bottom spacing Between header and rest of content * / text-transform: uppercase; padding: 7px 0 7px 31px; / * 31px is left indentation of header text * /). urbangreymenu ul ( list-style-type: none; margin: 0, padding: 0; margin-bottom: 0; / * bottom spacing Between each UL and rest of content * /). urbangreymenu ul li (padding-bottom: 2px; / * bottom Between spacing  menu  items * /). urbangreymenu ul li a (font: normal 12px Arial; color: black; background: # E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; / * link text is indented 8px * / text-decoration: none;). urbangreymenu ul li a: visited (color: black;). urbangreymenu ul li a: hover (* hover state CSS * / color: white; backgrounds: # 0099cc;) </ style> <div class="urbangreymenu"><h3 class="headerbar">MAIN  menu  / MAIN  menu  </ h3> <ul><li> <a href = "LINK HERE WALL" _fcksavedurl = " WALL LINK HERE "_fcksavedurl =" LINK HERE "> <b>» Wall Walll </ b> </ a> </ li><br />
<li> <a href = "LINK HERE Gallery Images" _fcksavedurl = "LINK HERE Gallery Images" _fcksavedurl = "Gallery Images LINK HERE"> <b> »Pictures / Photos </ b> </ a> </ li><br />
<li> <a href =" VIDEOS LINKS HERE "_fcksavedurl =" VIDEOS LINKS HERE "_fcksavedurl =" VIDEOS LINKS HERE "> <b>» Videos / Videos </ b> </ a> </ li><br />
<li> BURAYA" _fcksavedurl="NOTLAR <a href="NOTLAR LINKS LINKS LINKS BURAYA" _fcksavedurl="NOTLAR BURAYA"> <b > »Notes / Notes </ b> </ a> </ li><br />
<li> <a rel="nofollow" target="_blank" href="SAYFANIZIN LİNKİ" _fcksavedurl="SAYFANIZIN LİNKİ" _fcksavedurl="SAYFANIZIN LİNKİ"> <b>» Share / Share </ b> </ a> </ li><br />
<li> <a target = "_blank" href = "http://fbmlkod.tr.gg" _fcksavedurl = "http://fbmlkod.tr.gg "_fcksavedurl =" http://fbmlkod.tr.gg "> <b>» Web Site / Our Web </ b> </ a> </ li><br />
<li> <a target = "_blank" href = "CONTACTS LINKS is "_fcksavedurl =" CONTACT LINK is "_fcksavedurl =" CONTACT LINK is "> <b>» Contact / Contact </ b> </ a> </ li> </ ul> <h3 class="headerbar">MANAGERS / Managers < / h3> <ul><li> <a target = "_blank" href = "http://www.facebook.com/FbmlKod.Tr.gg" _fcksavedurl = "http://www.facebook.com/FbmlKod. Tr.gg "_fcksavedurl =" http://www.facebook.com/FbmlKod.Tr.gg "> <b>» Hasan GönüLaL </ b> </ a> </ li><br />
<li> <a target = " _blank "href =" http://www.facebook.com/Fbmlkod.tr.gg "_fcksavedurl =" http://www.facebook.com/Fbmlkod.tr.gg "_fcksavedurl =" http://www.facebook .com / Fbmlkod.tr.gg "> <b>» FBMLKOD.TR.GG </ b> </ a> </ li><br />
<li> <a target = "_blank" href = "http://kodservisi. tr.gg / iletisim.htm "_fcksavedurl =" http://kodservisi.tr.gg/iletisim.htm "_fcksavedurl =" http://kodservisi.tr.gg/iletisim.htm "> <b>» Application for < / b> </ a> </ li><br />
<li> <a rel="nofollow" target="_blank" href="BAŞVURU LİNKİ" _fcksavedurl="BAŞVURU LİNKİ" _fcksavedurl="BAŞVURU LİNKİ"> <b> »Applications </ b> </ a> </ li> </ ul> <h3 class="headerbar">FRIENDS PAGES / FRIENDS </ h3> <ul><li> <a target = "_blank" href = "http://www. facebook.com / FbmlKod.Tr.gg "_fcksavedurl =" http://www.facebook.com/FbmlKod.Tr.gg "_fcksavedurl =" http://www.facebook.com/FbmlKod.Tr.gg "> < b> »FbmlKod.Tr.gg </ b> </ a> </ li><br />
<li> <a target =" _blank "href =" http://www.facebook.com/FbmlKod.Tr.gg "_fcksavedurl = "http://www.facebook.com/FbmlKod.Tr.gg" _fcksavedurl = "http://www.facebook.com/FbmlKod.Tr.gg"> <b> »Application Click </ b> < / a> </ li><br />
<li> <a rel="nofollow" target="_blank" href="BAŞVURU LİNKİ" _fcksavedurl="BAŞVURU LİNKİ" _fcksavedurl="BAŞVURU LİNKİ"> <b> »Application Click </ b> </ a > </ li> </ ul> </ center> <!--- www.fbmlkodlari.com---> <br />
</span>  </style></span>



ويمكنك ايضاً تعديلة ليتوافق مع متطلباتك من اسماء القوائم
وروابط القوائم فيه وحتى الوانها

ونبدأ بالاهم وهي اسماء القوائم وروابطها وسأذكر لكم الاسم وطريقة البحث عنه في الكود وتغييرة
اضغط ctrl+f وضع الكلمات التالية وغيرها في الكود

ANA MENÜ/MAIN MENU= رأس القائمة = ضع المسمى المناسب لك
Walll= الخيار الاول = ضع المسمى المناسب لك وغيير الرابط الذي يسبقها في الكود
photos=الخيار الثاني= ضع المسمى المناسب لك وغير الرابط الذي يسبقها في الكود
Videos= الخيار الثالث=
Notes= الخيار الرابع =
Share= الخيار الخامس=
Web Sitemiz / Our Web= الخيار السادس=
Contact= الخيار السادس =
YÖNETİCİLER/MANAGERS= رأس القائمة الثانية=
HasaN Gonulal= الخيار الاول =
DOST SAYFALAR/FRICNDS=رأس القائمة الثالثة=
FbmlKod.Tr.gg= الخيار الاول=


ستظر لنا القائمة في صفحتنا بالشكل التالي
طريقة قائمة جميلة جداً Menu

  شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك Attachment

تمنياتي لكم بالتوفيق مع هذا الدرس





توقيع : البراق




  شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك Empty14.04.13 13:28

شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك

رقم المشاركة : ( 2 )
أصدقاء المنتدى


إحصائيةالعضو

انثى
العمر : 25
عدد المساهمات : 678
نقاط : 96578
مُساهمةموضوع: رد: شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك


شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك


ابدعتَ في انتقاء الطرح ..~
يعطيكَ العافية على جمالية طرحكـَ الراقي
..~تألقتَ بروعة موضوعك ..~
ننتظرابداعكَِ بكل شوق وجديدكـَ المميز ..~
تقبلَ مروري ..~

الموضوع الأصلي : شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك // المصدر : منتديات همسات المطر //الكاتب: سهرانة الليالي


توقيع : سهرانة الليالي




  شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك Empty19.06.13 3:52

شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك

رقم المشاركة : ( 3 )
نائب المدير
نائب المدير

الساهر

إحصائيةالعضو

العراق
ذكر
العمر : 38
عدد المساهمات : 21275
نقاط : 143160
2
https://raad2.ahlamontada.com/
مُساهمةموضوع: رد: شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك


شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك


  شرح طريقة عمل قائمة جميلة جداً CSS Menu على صفحتك 1023419731389869660



توقيع : الساهر





**

الــرد الســـريـع




**َ

 مواضيع مماثلة

-
»  شرح طريقة ارسل رسالة جماعية لكل المشتركين في صفحتك على الفيسبوك بطريقة بسيطة وسهله
» طريقة تثبيت تغريدة على صفحتك في تويتر - شرح بالـ صور
»  طريقة تنسيق حجم ولون ونوع الخط في صفحتك على الفيسبوك
» يا صباح الجمال العربي الطبيعي - بنات جميلة جداً
» كود قائمة افقية جميلة للمواقع