[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]القوائم المنسدلة بدلا من ذلك العادية على الصفحة الخاصة بك إلى مخصص القوائم المنسدلة بدلا من ذلك! والنتيجة النهائية هي عادة قائمة التنقل يبحث يستند كليا على HTML SELECT في القائمة. وبمنأى عن HTML الأصلي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]شكل الكود
<head>
<script type="text/javascript">
var combodropimage='https://i.servimg.com/u/f32/17/82/24/96/downbo10.gif'
var combodropoffsetY=2
var combozindex=100
if (combodropimage!="")
combodropimage='<img class="downimage" src="'+combodropimage+'" title="Select an option" />'
function dhtmlselect(selectid, selectwidth, optionwidth){
var selectbox=document.getElementById(selectid)
document.write('<div id="dhtml_'+selectid+'" class="dhtmlselect">'+selectbox.title+" "+combodropimage+'<div class="dropdown">')
for (var i=0; i<selectbox.options.length; i++)
document.write('<a href="'+selectbox.options[i].value+'">'+selectbox.options[i].text+'</a>')
document.write('</div></div>')
selectbox.style.display="none"
var dhtmlselectbox=document.getElementById("dhtml_"+selectid)
dhtmlselectbox.style.zIndex=combozindex
combozindex--
if (typeof selectwidth!="undefined")
dhtmlselectbox.style.width=selectwidth
if (typeof optionwidth!="undefined")
dhtmlselectbox.getElementsByTagName("div")[0].style.width=optionwidth
dhtmlselectbox.getElementsByTagName("div")[0].style.top=dhtmlselectbox.offsetHeight-combodropoffsetY+"px"
if (combodropimage!="")
dhtmlselectbox.getElementsByTagName("img")[0].style.left=dhtmlselectbox.offsetWidth+3+"px"
dhtmlselectbox.onmouseover=function(){
this.getElementsByTagName("div")[0].style.display="block"
}
dhtmlselectbox.onmouseout=function(){
this.getElementsByTagName("div")[0].style.display="none"
}
}
</script>
</head>
<style>
.dhtmlselect{
width: 140px;
border: 1px solid black;
position: relative;
text-indent: 3px;
padding: 1px 0;
cursor: hand;
cursor: pointer;
background-color: #F0F0F0;
}
.dhtmlselect .downimage{
position: absolute;
right: -25px;
}
.dhtmlselect .dropdown{
position: absolute;
left: 0;
width: 180px;
border: 1px solid black;
border-bottom-width: 0;
display: none;
z-index: 5;
font-weight: normal;
}
.dhtmlselect .dropdown a{
width: auto;
display: block;
background: #fff7d1;
border-bottom: 1px solid black;
padding: 1px 0;
text-indent: 5px;
text-decoration: none;
color: black;
}
* html .dhtmlselect .dropdown a{
width: 100%;
}
.dhtmlselect .dropdown a:hover{
background: #ffe469;
}
</style>
<body>
<form>
<select id="webmaster" title="قائمة--1">
<option value="http://www.google.com">جوجل</option>
<option value="http://www.yahoo.com">الياهو</option>
<option value="http://www.google.com">جوجل</option>
<option value="http://www.yahoo.com">الياهو</option>
</select>
<script type="text/javascript">
dhtmlselect("webmaster")
</script>
<br /><br /><br /><br /><br />
<select id="network" title="قائمة--2">
<option value="http://www.google.com">جوجل</option>
<option value="http://www.yahoo.com">الياهو</option>
</select>
<script type="text/javascript">
dhtmlselect("network", "190px", "200px")
</script>
</form>
</body>
موضوع: القوائم المنسدلة 
الثلاثاء 2 أكتوبر - 18:39