القوائم المنسدلة

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

لقد قمت بتصميم هاته القائمة من القوائم المنسدلة هي قائمة بسيط جدا
بأستخدم كود jQuery هي قائمة لا اخذ مكان اي لا تظهر محتويتها الا ان ضغط على عنوان الرئسية
وتستطيع استخدامه لعرض اخر الواضيع او رعرض الصور حسب الاحتيجك او تقسيمها الى اجزاء كل جزء وحده هي قابل لتغير وتعدد الاستخدام ليس بضرور ان تكون قائمة يوجد بها بعض الصور لتوضيح ولك اختيار الصور التس تكون على ذوقك
وضعت الارقام من -1 الى -6 في القائمة التوضيح تستطيع بذالك زيادة اعداد الفئات والاقسام حسب الاحتياج

ان شاء الله يعجبكم تصميم البسيط Very Happy

اليك الكود جاهز انت اشتهد في تغيرها الى ما يناسب مدونتك او موقعك
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".toggle_container").hide();
$("li,.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false;
});

});
</script>

<style type="text/css">
html {
overflow-Y: scroll;
}

.trigger {
background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKCKfU5b3RH83dq13EPXFd2UkbHSlq5KYkD8urO84Ta6oGw1C0);
padding: 5px 5px 5px 5px;
margin: 5 5 5px 5;
height:50px;
line-height: 46px;
width:182px;
font-size:2em;
float: right;

}

.toggle_container {
background:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSkirXh531P9PVzJ2zDDaI7J9hp4SN7sWI5EvC3wcKubTIjgk18dQ);

overflow: hidden;
font-size: 1.2em;
width:190px;
clear: both;
direction:rtl;
float:right;
list-style: none;
}
li.tog{
background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTn3szaNe5DgePvNQOxzDlTSPb1slJ-b4487E8iNEFn2gnuRBDB);

overflow: hidden;
font-size: 1.2em;
width:190px;
clear: both;
direction:rtl;
float:right;
list-style: none;
}

</style>
</head>
<body>
<div class="container"><br />
<div align="center" class="trigger">
<a href="https://zaharatb.yoo7.com/">
<font color="#FFFF33">
زهرات البستان</font></a> </div>
<div class="toggle_container">

<div class="container">
<li align="center" class="tog">
<a href="https://zaharatb.yoo7.com/c5-category">
<font color="#FFFF33">
منتديات الكمبيوتر والأنترنت</font></a></li>
<div class="toggle_container">
<p align="center">
<a href="https://zaharatb.yoo7.com/f42-montada">
<font color="#FFFF33">
خصائص المدونات</font></a></p></div>
<li align="center"class="tog">
<a href="https://zaharatb.yoo7.com/f98-montada">
<font color="#FFFF33">
أكواد جاهزة</font></a> </li>
<div class="toggle_container">
<p align="center">
<font color="#FFFF33">
<a href="https://zaharatb.yoo7.com/f8-montada">
<font color="#FFFF33">
اكود جاهزة--JavaScript</font></a><br />
<a href="https://zaharatb.yoo7.com/f9-montada">
<font color="#FFFF33">
اكود جاهزة--css</font></a><br />
<a href="https://zaharatb.yoo7.com/f13-montada">
<font color="#FFFF33">
اكود جاهزة--jQuery</a>
</font></p></div>
<li align="center" class="tog"><a href="#">
<font color="#FFFF33">
1</font></a> </li>
<div class="toggle_container">
<p align="center">
<font color="#FFFF33">
2</font></p></div>
<li align="center" class="tog"><a href="#">
<font color="#FFFF33">
3</font></a> </li>
<div class="toggle_container">
<p align="center">
<font color="#FFFF33">
4</font></p></div>
<li align="center" class="tog"><a href="#">
<font color="#FFFF33">
5</font></a> </li>
<div class="toggle_container">
<p align="center">
<font color="#FFFF33">
6
</font></p>
</div>

</body>
</html>

» القوائم المنسدلة
» الانزلاق شريط القوائم من الجاني الايمن

مكتب ديكور و تشطيب (شركه عقاري للتشطيبات والديكور)

تقدم احدث الموديلات

…

[ قراءة كاملة ]

شركات ديكور في المهندسين ( عقاري للاسكان 01020115119)

تقدم شركة عقاري للاسكان …

[ قراءة كاملة ]

سأتحدث عن الإيمان الكامل بان
ما يحرمه الله عن البشر ..

فهو بالتأكيد لمصلحة البشر …

[ قراءة كاملة ]