الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

كيف ممكن أعمل لينكات بشكل قائمة منسدلة

بدأه Dena22 في 1 ديسمبر 2013 · 4 رد · 631 مشاهدة · في ASP.NET
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

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

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

أرجو المساعده وشكرا

#2

السلام عليكم

 

يمكن الحصول عل النتيجة التي طلباتها بإستخدام  <ul> و css

 

مثال:

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testmenu.aspx.vb" Inherits="testmenu" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
    <style>
        ul#main-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#main-nav li{
    display:block;
    position:relative;
    float:right;
}
ul#main-nav li ul{
    display:none;
}
ul#main-nav li  a{
display:block;
text-decoration:none;
color: rgb(255, 255, 255);
border-top: 1px solid #888;
padding: 5px 15px;
background-color: #2c6463;
margin-right: 1px;
white-space: nowrap;
}
ul#main-nav li a:hover {
    background: #617f8a;
}
ul#main-nav li:hover ul {
    display: block;
    position:absolute;
}
ul#main-nav li:hover li {
    float: none;
    font-size: 11px;
}
ul#main-nav li:hover a{background-color:#617f8a;}
ul#main-nav li a:hover {background-color:#95a9ba;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul id="main-nav">
                        <li><a href="Contacts.aspx">الرسائل</a></li>
                        <li><a href="#"><span>أسئلة المسابقة</span></a>
                            <ul>
                                <li><a href="quize.aspx">إضافة سؤال جديد</a></li>
                                <li><a href="quise_list.aspx">قائمة الأسئلة</a></li>
                                <li><a href="quize_guests.aspx">إختيار الفائزين</a></li>
                                <li class="separation-menu"></li>
                            </ul>
                        </li>
                        <li><a href="#"><span>الفئات</span></a>
                            <ul>
                                <li><a href="addcataspx.aspx">إضافة فئة جديدة</a></li>
                                <li><a href="EditCats.aspx">تعديل الفئة</a></li>
                                <li class="separation-menu"></li>
                            </ul>
                        </li>
                        <li><a href="addFeatures.aspx"><span>الدعايات/الإعلانات</span></a>
                            <ul>
                                <li><a href="AddBottomBar.aspx">دعايات/صور أسفل الصفحة</a></li>
                                <li><a href="EditCats.aspx">تعديل الفئة</a></li>
                                <li class="separation-menu"></li>
                            </ul>
 
                        </li>
                        <li><a href="AddUsers.aspx"><span>المستخدمين</span></a></li>
                        <li><a href="ImgFolders.aspx"><span>مجلدات الصور</span></a></li>
                        <li><a href="websettings.aspx"><span>التضبيطات</span></a></li>
                        <li><a href="#"><span>المقالات</span></a>
                            <ul>
                                <li><a href="postlist.aspx">قائمة المقالات</a></li>
                                <li><a href="addpost.aspx">إضافة مقالة جديدة</a></li>
                                <li class="separation-menu"></li>
                            </ul>
                        </li>
                    </ul>
    </div>
    </form>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
#3

أخي الفاضل allformona

ممكن ترفق لي المثال للتوضيح؟

#4

السلام عليكم

 

يمكنك زيارة الموقع التالي:

http://jsfiddle.net/tabook22/V3BC9/

#5

شكرا جزيلا أخي allformona

وجزاك الله خير

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