css لصنع قائمة افقية مضيئة بالنيون

http://www.dzbatna.com/images/icons/iconrote.gif css ظ„طµظ†ط¹ ظ‚ط§ط¦ظ…ط© ط§ظپظ‚ظٹط© ظ…ط¶ظٹط¦ط© ط¨ط§ظ„ظ†ظٹظˆظ†

---

السلام عليكم
الشرح طريقة مقدم من الموقع التقني الأول عربيا
www.f-arb.net

الشرح طريقة

نبذة : هذا كود code css فقط يتحكم فى صنع هذه القائمة التى تضئ بما يشبه اضاءة النيون عند الضغط عليها
مثال:
http://hawari.hostse.com/47666_177334782d4782f0a5.bmp
التركيب install:
نسخ هذا الكود code فى منطقة ال head بصفحتك

كود code:
رمز PHP:

<style type="text/css">


/* remove the margin and bullets, set the padding for this demo only*/
.neon {margin:0 0 50px 0; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;}

/* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {display:inline; float:left; background:url(http://www.cssplay.co.uk/menus/neon_on.gif);}

/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:32px; float:left; background:url(http://www.cssplay.co.uk/menus/neon_off.gif); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}




/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(neon_off.gif) right top; padding:0 40px 0 0; color:#fff;}

/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(neon_on.gif); cursor:pointer; color:#000;}

.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(neon_on.gif); color:#000; cursor:default;}

style>


2-- ثم قم بنسخ هذا الكود code مع تغيير المسميات والروابط بما يناسب موقعك


كود code:
رمز PHP:

<h3>قائمة نيون مضيئةh3>

<ul class="neon">
<li><a href="#nogo"><b>الرئيسيةb>a>li>
<li><a href="#nogo"><b>حول الموقعb>a>li>
<li><a href="#nogo"><b>سجل الزوارb>a>li>
<li><a href="#nogo" class="current"><b>اتصل بناb>a>li>
<li><a href="#nogo"><b>مواقع هامةb>a>li>
ul>


4-- ارفع هاتين الصورتين الى نفس مسار صفحتك
http://www.arabwebtalk.com/filestore...ss/neon_on.gif


الموضوع الأصلي
http://f-arb.net/forum.php?action=view&id=8

التعديل الأخير كان بواسطة Mr.Ajax; 27 - 06 - 2014 الساعة 01:24 السبب: تعديل شكل الأكواد

ألعاب الأندرويد مجانا و حصريا

https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©