قائمة عمودية بتقنية ال css3 غاية في الاناقة متعددة الالوان

 السلام عليكم ورحمة الله وبركاتة ... اثناء تجولي في احد المواقع الاجنبيه الخاصه بتطوير المواقع وجدت درس رائع يتناول تطبيق قائمه تعمل بشكل عمودي ومتعدده الالوان وبتقنية ال css3 المبهره ومثال عليها في تلك المدونه التجريبيه من هنا
ان اعجبك شكل القائمه وتريد وضعها في مدونتك حيث يمكنك الاستفاده منها من خلال وضع روابطك الهامه والمميزه فيها حيث انها تشد انظار قرائك بلا شك وفي تدوينتي تلك صوره مرفقه توضح شكل القائمه العموديه بخلاف المثال الحى الذي وضعته بالاعلى.. لتطبيق الدرس قم باتباع ما هو موجود بالاسفل .

الخطوه الاولى. سجل دخول الى لوحة تحكم مدونتك > اذهب الى مصمم النماذج > الوضع المتقدم > اذهب الي هذا الخيار Add Css
كما هو موضح لك في الصوره التي بالاسفل





الخطوه الثانيه. قم بنسخ ولصق الكود الموجود بالاسفل داخل الصندوق المحدد في مصمم النماذج :

/* CSS Style for Horizontal Menu - info @ http://www.spiceupyourblog.com*/
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}


/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
}


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhINrt7RgZ1Hpoud1T8OU0XHWGtOC_kRBk1Rfz3d4AvFpuQzNsHy5p8EnNV3vF5J5AUYB_2Su9sAmsd1MibA339bJDm5ZfphmqFJpFzD_E91RENXkSkJrYNownoYociKoDbxqO7cIKDaDs/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

/*End menu css - info @ http://www.spiceupyourblog.com */

الخطوه الثالثه. قم بحفظ التعديلات.

الخطوه الرابعه. قم بالرجوع الي بلوجر ثم قم مجددا بالذهاب الي عناصر تصميم الصفحه وقم باختيار اداه جديده من نوع جافا سكربت  Html/Javascript 






الخطوه الخامسه. انسخ الكود الموجود بالاسفل وضعه داخل الاداه الجديده ولن تحتاج ان تسميها باسم دعها بدون اسم مع تعديل الروابط والمسميات الموجوده داخل الكود كما هو موضح فيه :

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="الرابط الاول">
<span>القسم الاول</span>
</a>
</li>

<li>

<a class="about" href="الرابط الثاني">
<span>القسم الثاني</span>
</a>
</li>

<li>
<a class="services" href="الرابط الثالث">
<span>القسم الثالث</span>
</a>

</li>

<li>
<a class="portfolio" href="الرابط الرابع/">
<span>القسم الرابع</span>
</a>
</li>

<li>
<a class="contact" href="رابط اتصل بنا">

<span>الاتصال بنا</span>
</a>
</li>
</ul>
</div><a href="http://www.tqarob.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>
ملحوظه- لا تنسى تغيير كلمه القسم الاول والثاني والثالث الخ .. وكلمه الرابط الاول والثاني الخ.. باسم القسم الذي تريده والرابط المؤدي اليه.

الخطوه الاخيره. قم بحفظ الاداه ولا تنسى دعاءا لى بظهر الغيب ان اعجبتك الاضافه.
أصدقاء(تطوير ويب)
تعليقات Facebook
4تعليقات Blogger

4 عدد التعليقات على موضوع قائمة عمودية بتقنية ال css3 غاية في الاناقة متعددة الالوان

Unknown يقول...

درس ممتاز، وقد تم التجربة والتركيب علي مدونتي بنجاح، جزاك الله خيرا :)

غير معرف يقول...

@ShaiMaa Gaber
بالتوفيق اخت شيماء بارك الله فيكي

فرعون يقول...

تمت التجربه على مدونتى بنجاح
مشكور اخى الكريم
http://mazikety4.blogspot.com/
ننتظر جديدك

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .