قوائم css أو جافا من يساعدني فيها !

[Perfect]

السلام عليكم ورحمة الله وبركاته
الأخوة في سوالف المحبه التقسييم الجديد ماشاء الله رهيب يسهل علينا كمطوري الوصول للشي المحدد
الإداره الجديده متميزه وماشاء الله عليها عيني عليها كولد cold :shy:

محترفي لغات البرمجه والتطوير
أحتاج منكم مساعده حيث في موقعي وأنا اسويه احتجت اسوي قوائم بنوع معين وشفتها بكذا موقع بوريكم موقع منها
http://www.alquma.net/
القائمه اللي على اليمين أحتاج شبيه لها حيث أستطيع وضع background وبمرور الماوس تتغير الخلفية

أنتظركم يا أحبه

[محمد الثقفي]

وعليكم السلام


راجع درس الاخ كتوم هنا
http://www.swalif.net/softs/swalif44/softs193292/

وهذا مثال للعمل

http://www.dev4arab.org/ca2oom/example/fast-rollovers


محمد

[أحمد عبدالمنعم]

مرحباا

هذه تسمى تأثير hover أو التأرجح على الأزار و القوائم

وسهل جدا ان تصعنها على اى قائمة او زر بواسطة الأمر التالي _ مثال :

a:hover {
	color: #FFF;
	background-color: #005F9F;
}

وذلك بعد الإنتهاء من ضبط القائمة نفسها بشكل يناسب موقعك ..

والاخ MohDesign وضع لك شرح لطريقة عمل هذا التأثير ولكن بطريقة مختلفة أكثر من تأثير في صورة واحده ـ ولكن ربما لا تفيدك كثيراً إن كنت تبحث عن قائمة بنفس الشبه بالموقع اللى وضعته ، فهي معمولة بخلفية تدرج واحد فقط تتغير عن المرور بلون آخر ...
ولعمل مثلها بالضبط

القائمة ul li :

<ul>
    <li><a href="index.html">الرئيسية</a></li>
    <li><a href="gallery.html">معرض الصور</a></li>
    <li><a href="products.html">قائمة المنتجات</a></li>
	<li><a href="about.html">عن الموقع</a></li>
</ul>

css :

ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 150px;
	border-bottom: 1px solid #5D76EF;
}
ul a {
	text-decoration: none;
	display: block;
	width: 138px;
	padding: 5px;
	border-top: 1px solid #5D76EF;
	border-right: 1px solid #5D76EF;
	border-bottom: 0px solid #5D76EF;
	border-left: 1px solid #5D76EF;
}
ul a:link, ul a:visited  {
	color: #0E2E6B;
	background-color: #DDE8FC;
	background-image: url(button-b.gif);
	background-repeat: repeat-x;
	background-position: 0px top;
}
ul a:hover {
	color: #FFF;
	background-color: #005F9F;
	background-image: none;
}

خلفية التدرج اللونى تم وضعها في ( ul a:link, ul a:visited ) والإستغناء عنها في ( ul a:hover )
نوع الخط يمكن ان تغيرة من الجسم body او تضيفة على العنصر a

لو حبيت تزود العرض او تقلله من العنصر ul كما في المثال العرض 150 اما في الوصلات فتم طرح منه قيمة padding يمين ويسار 150 - 10 = 140 وكذلك طرح قيمة الحدود 2 بكسل - 140 = 138 بكسل :looking: ودا كله علشان تظهر القائمة بنفس الشكل على المتصفح التعيس Internet Explorer

والنتيجة //



تحيتي ،،

[Perfect]

ماشاء الله عليكم هذا هو المطلوب
الأخ كتوم اصبت كبد الحقيقه لما وضعت الرد الأخير والأخوان الأفاضل ماقصرو فوق
الله يزوجك يا MohDesign :d
الأخ كتوم الصوره وين يكون مسارها حاولت اضعها ولكن ماطلعت معاي رفعتها لمجلد image رفعتها على الملفات رأساً سويت كذا طريقه وماظهرك الصور ظهرت المربعات بوتأثير الماوس س بدون خلفيه

[أحمد عبدالمنعم]

العفو أخي

والصورة توضع بأي مكان فهى مثل بقيه صور الموقع ـ ضعها على نفس مسار الصور التى تظهر
أو يمكن ان تضع الرابط كامل هكذا

http://www.yoursite.com/images/button-b.gif

تحيتي ،،

[Perfect]

woooow ضبطت ميه ميه وخمستعش زياده
ماقصرت والله
بقى هل أستطيع عمل قوائم متفرعه منها ! بنفس هالكود ؟

[أحمد عبدالمنعم]

نعم أكيد ، ويمكن أن تصنع بأكثر من طريقة وهذه أبسطها ولا تحتاج الى إضافة الكثير من الخصائص

أضف هذا الكود الى css

ul li {
	position: relative;
}
ul li ul {
	list-style: none;
	position: absolute;
	right: 149px;
	top: 0;
	display: none;
	width: 150px;
}
ul li:hover ul { display: block; }

وبعدها تعدل القائمة وتضع القوائم الفرعية بهذا الشكل

<ul>
    <li><a href="index.html">الرئيسية</a></li>
    <li><a href="gallery.html">معرض الصور</a>
	<ul>
        <li><a href="gallery1.html">قائمة الصور 1</a></li>
        <li><a href="gallery2.html">قائمة الصور 2</a></li>
        <li><a href="gallery3.html">قائمة الصور 3</a></li>
        <li><a href="gallery4.html">قائمة الصور 4</a></li>
    </ul>
	</li>
    <li><a href="products.html">قائمة المنتجات</a>
	<ul>
        <li><a href="gallery1.html">قائمة المنتجات 1</a></li>
        <li><a href="gallery2.html">قائمة المنتجات 2</a></li>
        <li><a href="gallery3.html">قائمة المنتجات 3</a></li>
        <li><a href="gallery4.html">قائمة المنتجات 4</a></li>
    </ul>
	</li>
	<li><a href="about.html">عن الموقع</a></li>
</ul>

والنتيجة //



تحيتي ،،

[Perfect]

ياخي والله إنك أبدعت
الله يطول بعمرك يا كتوم ويرزقك من حيث لا تحتسب
(f)

[Perfect]

من جديد نعود نحاول أن نستفيد من الأخ الخبير في css كتوم
حاولت أخلي النص متوسط

ul {
	font-family: Microsoft Sans Serif;
	font-size: 8pt;
	text-align: center;
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 150px;
	border-bottom: 1px solid #5D76EF;
}

بس ما نفعش

[أحمد عبدالمنعم]

مرحبااا أخي Perfect

لن يصلح التوسيط لانك أضفته الى العنصر ul كما انك كذلك اضفت نوع الخط اليه
وانا ذكرت لك انه لو اردت التحكم في الخط وتغير نوعه يكون ذلك من العنصر a فقط فـ منه تضع نوع الخط وتوسطة هكذا ..

ul a {
	text-decoration: none;
	display: block;
	width: 138px;
	padding: 5px;
	border-top: 1px solid #0E2E6B;
	border-right: 1px solid #0E2E6B;
	border-bottom: 0px solid #0E2E6B;
	border-left: 1px solid #0E2E6B;
	text-align: center;
	font-family: "Microsoft Sans Serif";
	font-size: 8pt;
}

تحيتي ،،

[Perfect]

عزيزيca2oom
ياليت بريدك للمراسله في شي خاص احتاجك فيه خارج هذا الموضوع

[Perfect]

العملية إلى الآن ناجحة ولكن بدأت تحدث مشاكل
القوائم شغاله تمام forefox لكن مشكله في internet expoler مايظهر القائمه المتفرعه

[أحمد عبدالمنعم]

بريدى بإسم ca2oom على hotmail

اما القائمة أنا جربتها على IE 7 وظهرت بدون مشاكل وكذلك جربتها على جميع المتصفحات الأخرى لدي وتعمل بدون مشاكل ابداً ( Opera , Firefox , Avant , Maxthon )

ربما تستخدم نسخه قديمة من IE وهنا تظهر مشكلة لانه لا يدعم CSS بشكل صحيح

[x_yousef_x]

السلام عليكم

اخوي الكريم ليه لم تجرب برنامج فايروركس

يسوي لك قوائم مسندلة براحة تامه

وبشكل هذا

http://www.traidnt.net/vb/showthread.php?t=372848

تحياتي