بسم الله الرحمن الرحيم
كيف اقوم بعمل قائمة منسدلة تشعبية مثل الموجودة فى اسفل الموقع بحث تحتوى على الروابط الاتية :-
الرياضة -------------------- Sport.htm
اسلاميات ------------------------ Islamic.htm
اخبار ------------------------------------News.htm
وايضا تحتوى على زر اذهب
بحيث اذا اختار المستخدم الرياضة ويضغط على زر اذهب
يقوم بفتح صفحة Sport.htm
وايضا باقى الصفحات
كيف اقوم بعمل ذلك
بســم الله الـرحمــن الرحيــم
السلام عليكــم ورحمـة الله وبركاتــه ،،
javascriptتفضل هالكود
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> whatever:hover cssmenu </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
behavior:url("../htc/csshover3.htc");
}
* {
font-family:arial,tahoma,verdana,helvetica;
font-size:12px;
}
/* the menu */
ul,li,a {
display:block;
margin:0;
padding:0;
border:0;
}
ul {
width:150px;
border:1px solid #9d9da1;
background:white;
list-style:none;
}
li {
position:relative;
padding:1px;
padding-left:26px;
background:url("images/item_moz.gif") no-repeat;
z-index:9;
}
li.folder { background:url("images/item_folder.gif") no-repeat; }
li.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
li.folder>ul { left:140px; } /* others */
a {
padding:2px;
border:1px solid white;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>a { width:auto; } /* others */
li a.submenu {
background:url("images/sub.gif") right no-repeat;
}
/* regular hovers */
a:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
li.folder a:hover {
background-color:#bbb7c7;
}
/* hovers with specificity */
li.folder:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#"> lorem </a></li>
<li class="folder">
<a href="#" class="submenu"> adipiscing </a>
<ul>
<li><a href="#"> dolor </a></li>
<li class="folder">
<a href="#" class="submenu"> consectetuer</a>
<ul>
<li><a href="#"> elit </a></li>
<li><a href="#"> ipsum </a></li>
<li><a href="#"> Donec </a></li>
</ul>
</li>
<li><a href="#"> vestibulum </a></li>
</ul>
</li>
<li class="folder">
<a href="#" class="submenu"> consectetuer</a>
<ul>
<li><a href="#"> elit </a></li>
<li><a href="#"> ipsum </a></li>
<li><a href="#"> Donec </a></li>
</ul>
</li>
<li><a href="#"> sit amet </a></li>
</ul>
</body>
</html>
تم تعديل هذه المشاركة بواسطة الـريّــانة في 25 مارس 2009 في 15:26
ممكن الموضوع بكل بساطة باستخدام ال Html forms
اقرا عنها في اي دروس لتعليم الhtml وستجد هذا الامر في غاية السهولة
واذا تحب تشرفني في دروسي هنا هتلاقي شرح كامل ليها :