white tower
جمعه 05 دی 1393, 21:42 عصر
میشه یه نمونه انجام بدید من زیاد آشنایی ندارم؟ ممنون میشم
قرار نیست اینجا کسی کد بنویسه ولی چون قراره بهم کمک کنیم سریع واست نوشتم.البته ارور هایی هم داره و چون نخواستم زیاد وقت بذارم سر سری نوشتم.کار می کنه.مقصود اینه که مفهومش رو بگیری.با جاوا اسکریپت نوشتم. اگه با جی کوئری بنویسی کدت کوتاهتر میشه ولی خوب حجم صفحه ات هم می ره بالاتر از این
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
direction: rtl
}
#items{
list-style: none
}
#items>li{
float: right;
margin-right: 13px
}
#menu{
display: none;
list-style: none;
position: absolute
}
.s{
display: none
}
#menu li:hover{
color: red
}
</style>
<script>
function loader(){
document.getElementById('item1').addEventListener( 'mouseover',function(){
document.getElementById('menu').style.display = 'block';
},'true');
document.getElementById('item1').addEventListener( 'mouseout',function(){
document.getElementById('menu').style.display = 'none';
},'true');
document.getElementById('more').addEventListener(' click',function(){
for(var i = 1 ; i < this.parentNode.childNodes.length ; i += 2){
if(this.parentNode.childNodes[i].getAttribute('class') === 's'){
this.parentNode.childNodes[i].style.display = 'block';
}
}
},'true');
}
</script>
</head>
<body onload="loader()">
<ul id="items">
<li id="item1">ITEM 1
<ul id="menu">
<li>RED</li>
<li>GREEN</li>
<li>BLUE</li>
<li>BLACK</li>
<li class="s">WHITE</li>
<li class="s">YELLOW</li>
<li class="s">BROWN</li>
<li class="s">PINK</li>
<li id="more">MORE...</li>
</ul>
</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
</ul>
</body>
</html>