كيفية عمل عناوين رئيسية و فرعية

بدأه sofiender في 2 سبتمبر 2010 · 7 رد · 681 مشاهدة · في منتدى تصميم صفحات الويب

#12 سبتمبر 2010 في 16:38 صاحب الموضوع

كيف يمكن عمل عناوين رئيسية و تندرج تحتها عناوين فرعية مع امكانية الاضافة و الحذف

و ان تظهر في القائمة فقط العناوين الرئيسية و باقي العناوين مخفية و عند مرور الماوس او الضغط على العنوان الرئيسي تفتح قائمة العناوين الفرعية و عند مرور الماوس على العناوين الفرعية تظهر العنوان1 و عند مرور الماوس على عنوان 1 تظهر المحور الاول ..... الخ

مثال

العنوان الرئيسي 1

------ العنوان الفرعي 1

--------------- عنوان 1

------------------المحور الاول

-----------------------درس1

------------------المحور الثاني

------------------المحور الثالث

-----------------------درس1

-----------------------درس2

-----------------------درس3

--------------- عنوان 2

------------------المحور الاول

-----------------------درس1

------------------المحور الثاني

--------------- عنوان 3

------ العنوان الفرعي 2

--------------- عنوان 1

------------------المحور الاول

-----------------------درس1

------------------المحور الثاني

------------------المحور الثالث

--------------- عنوان 2

--------------- عنوان 3

--------------- عنوان 4

------ العنوان الفرعي 3

العنوان الرئيسي 2

------ العنوان الفرعي 1

--------------- عنوان 1

------------------المحور الاول

-----------------------درس1

------------------المحور الثاني

------------------المحور الثالث

-----------------------درس1

-----------------------درس2

-----------------------درس3

--------------- عنوان 2

------------------المحور الاول

-----------------------درس1

------------------المحور الثاني

--------------- عنوان 3

------ العنوان الفرعي 3

------ العنوان الفرعي 4

العنوان الرئيسي 3

العنوان الرئيسي 5

و اليكم صورة توضيحية

المرفقات

#22 سبتمبر 2010 في 22:34

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

سوف اضع اليك هنا مثال باستخدام ال html فقط

سوف يساعدكف ي الفكرة

<ul>
<li>Acount
  <ul>
         <li>application1</li>
        	<li>application2</li>
        	<li>application3</li>
    	</ul>
	</li>
	<li>Arabic
     <ul>
         <li>application1</li>
        	<li>application2</li>
        	<li>application3</li>
    	</ul>
	</li>
	<li>Math
  <ul >
         <li>application1</li>
        	<li>application2</li>
        	<li>application3</li>
    	</ul>
	</li>

</ul>

وفي هذا الرابط سوف تجد ضالتك بإذن الله

الرابط الخاص بي لاني بصراحةفي الجافا سكربت لست خبيرا

وابحث عن موضوع Navigational Menu

سوف تجد اشياء جاهز تساعدك

تم تعديل هذه المشاركة بواسطة EMNALI في 2 سبتمبر 2010 في 22:36

وَعَبْدٌ قَدْ يَنامُ عَلَى حَرِيرٍ ××× وَذُو نَسَبٍ مَفَارِشُهُ التُّرَابُ

#32 سبتمبر 2010 في 23:20

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

بما أن طلبك في هذا القسم فإليك هذا المثال على ما طلبت :)

<ul class="main">
<li><a href="#">Title0</a>
<ul class="sub">
<li><a href="#">Subtitle</a>
<ul class="ssub">
<li><a href="#">Sub-Subtitle1</a></li>
<li><a href="#">Sub-Subtitle2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Title1</a>
<ul class="sub">
<li><a href="#">Subtitle1</a>
<ul class="ssub">
<li><a href="#">Sub-Subtitle1</a></li>
<li><a href="#">Sub-Subtitle2</a></li>
</ul>
</li>
<li><a href="#">Subtitle2</a></li>
</ul>
</li>
<li><a href="#">Title3</a>
<ul class="sub">
<li><a href="#">Subtitle1</a></li>
<li><a href="#">Subtitle2</a></li>
<li><a href="#">Subtitle3</a></li>
</ul>
</li>
</ul>

CSS :

ul {
margin: 0;
padding: 0;
list-style: none;
width: 130px;
border: 1px solid #EEE;
}

ul li {
position: relative;
}

.sub,.ssub {
position: absolute;
left: 130px;
top: 0;
display: none;
}

a {
display: block;
text-decoration: none;
padding: 10px;
border: 1px solid #EEE;
border-bottom: 0px;
}

.main li:hover ul.sub { display: block; }
.sub li:hover ul.ssub { display: block; }

بإذن الله تعمل على جميع المتصفحات عدا

(IE6)

والله أعلم

بتوفيق الله

تم تعديل هذه المشاركة بواسطة MoHaMMaD Pro في 2 سبتمبر 2010 في 23:52

Everything will be fine when we TALK LESS, DO MORE

#42 سبتمبر 2010 في 23:31

MoHaMMaD Pro كتب:
السلام عليكم ورحمة الله وبركاته
بما أن طلبك في هذا القسم فإليك هذا المثال على ما طلبت :)
<ul class="main">
<li><a href="#">Title0</a>
<ul class="sub">
<li><a href="#">Subtitle</a>
<ul class="ssub">
<li><a href="#">Sub-Subtitle1</a></li>
<li><a href="#">Sub-Subtitle2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Title1</a>
<ul class="sub">
<li><a href="#">Subtitle1</a>
<ul class="ssub">
<li><a href="#">Sub-Subtitle1</a></li>
<li><a href="#">Sub-Subtitle2</a></li>
</ul>
</li>
<li><a href="#">Subtitle2</a></li>
</ul>
</li>
<li><a href="#">Title3</a>
<ul class="sub">
<li><a href="#">Subtitle1</a></li>
<li><a href="#">Subtitle2</a></li>
<li><a href="#">Subtitle3</a></li>
</ul>
</li>
</ul>
CSS :
ul {
margin: 0;
padding: 0;
list-style: none;
width: 130px;
border: 1px solid #EEE;
}

ul li {
position: relative;
}

.sub,.ssub {
position: absolute;
left: 130px;
top: 0;
display: none;
}

a {
display: block;
text-decoration: none;
padding: 10px;
border: 1px solid #EEE;
border-bottom: 0px;
}

.main li:hover ul.sub { display: block; }
.sub li:hover ul.ssub { display: block; }
بإذن الله تعمل على جميع المتصفحات عدا
(IE6)
والله أعلم
بتوفيق الله ..

طريقة صحيحة أحسنت.

+١

welcome to my portfolio:

www.cornerofart.net

Submit you design

here

#53 سبتمبر 2010 في 04:08

بارك الله فيكم

و لكن ممكن تكملو جميلكم و تخبروني عن الجداول

#63 سبتمبر 2010 في 04:58

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

CMS Sfhati , Website Generator

نظام إدارة المحتوى صفحتي ... جربه الآن

#74 سبتمبر 2010 في 19:25

بارك الله فيكم

ولكن با ليت لو تقولون لي كيف يمكنني ربط صفحة اضافة المواضيع مع العناوين

هل اقوم بعمل لكل عنوان صفحة صفحة اضافة موضوع خاصة او ماذا؟؟

#84 سبتمبر 2010 في 19:31

اما بالنسبة للكود فقد استخدمت هذا الكود

و هو من مجهودي الشخصي فارجو تصحيحه ان كان فيه خطأ

و ايضا كيف يمكنني التحكم فيها من اضافة و حذف و تعديل

  <td width="203" height="544" valign="top" bgcolor="#867D61"><ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">1 ére cecondaire</a>
        <ul>
          <li><a href="#">Physique</a>
            <ul>
              <li><a href="#" class="titrebar">Cours</a></li>
              <li><a href="#" class="titrebar">TP</a></li>
              <li><a href="#" class="titrebar">Exercices</a></li>
              <li><a href="#" class="titrebar">Documents</a></li>
              <li><a href="#" class="titrebar">Animations</a></li>
            </ul>
          </li>
          <li><a href="#">Chimie</a>
            <ul>
              <li><a href="#" class="titrebar">Cours</a></li>
              <li><a href="#" class="titrebar">TP</a></li>
              <li><a href="#" class="titrebar">Exercices</a></li>
              <li><a href="#" class="titrebar">Documents</a></li>
              <li><a href="#" class="titrebar">Animations</a></li>
            </ul>
          </li>
          <li><a href="#">Devoirs</a>
        </ul>

      </li>
      <li><a href="#">2 ème secondaire</a>
        <ul>
          <li><a href="#">science</a>
            <ul>
              <li><a href="#">Physique</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Chimie</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Devoirs</a></li>
            </ul>
          </li>
          <li><a href="#">Tech.info</a>
            <ul>
              <li><a href="#">Physique</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Chimie</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Devoirs</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">3 ème secondaire</a>
        <ul>
          <li><a href="#">Maths</a>
            <ul>
              <li><a href="#">Physique</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Chimie</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Devoirs</a></li>
            </ul>
          </li>
          <li><a href="#">Sc. exp</a>
            <ul>
              <li><a href="#">Physique</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Chimie</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Devoirs</a></li>
            </ul>
          </li>
          <li><a href="#">Sc. Tech</a>
            <ul>
              <li><a href="#">Physique</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Chimie</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>
              <li><a href="#">Devoirs</a></li>
            </ul>
          </li>
          <li><a href="#">Sc. Info</a>
            <ul>
              <li><a href="#">Physique</a>
                <ul>
                  <li><a href="#" class="titrebar">Cours</a></li>
                  <li><a href="#" class="titrebar">TP</a></li>
                  <li><a href="#" class="titrebar">Exercices</a></li>
                  <li><a href="#" class="titrebar">Documents</a></li>
                  <li><a href="#" class="titrebar">Animations</a></li>
                </ul>
              </li>

تم تعديل هذه المشاركة بواسطة sofiender في 4 سبتمبر 2010 في 19:33

مواضيع مشابهة

كيفية التحكم في خط القوائم الرئيسيه والفرعيه1 رد · 8 يناير 2011
كيفيه عمل اقسام فرعيه ورئيسية0 رد · 22 يناير 2012
برجاء المساعدة فى عمل قوائم تشغيل رئيسية متفرع منها قوائم تشغيل فرعية ببرنامج اكسس2 رد · 7 يوليو 2018
فتح الصفحة الفرعية مع الابقاء على الصفحة الرئيسية مفتوحة1 رد · 25 أبريل 2009
شجرة الحسابات الرئيسية والفرعية9 رد · 19 مايو 2007
موضوع مخالف:عروض العمل في الصفحة الرئيسية0 رد · 14 مارس 2008