VPF::Раздвигающееся меню на DIVах - Форум программистов

137

Дата 20.10.2007, 20:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 33
Регистрация: 15.9.2007

Репутация: нет
Всего: нет

Доброго времени.
Помогите пожалуйста сделать меню которое плавно раздвигается по щелчку мыши, на DIV-е. (рис.1 <--> рис.2)... тоесть чтобы подпункты плавно(не медленно, а плавно) вы езжали изпод выбранного пункта.
user posted image

сейчас просто меняется свойство display...
в html меню выглядит так:

Код


<div class="menu_item" onclick="show('sub_menu1')">Пункт меню</div>    
<div id="sub_menu1" style="display: none;">
    <ul class="sub_menu">
        <li><a href="#">Главная</a></li>
        <li><a href="#">Контакты</a></li>
        <li><a href="#">Главная</a></li>
    </ul>
</div>    
<div class="menu_item" onclick="show('sub_menu2')">Пункт меню</div>
<div id="sub_menu2" style="display: none;">
    <ul class="sub_menu">
        <li><a href="#">Главная</a></li>
        <li><a href="#">Главная</a></li>
    </ul>
</div>
...

в css:

Код


.menu_item
{
    margin: 5px 0px 0px 15px;
    padding: 6px 0px 0px 0px;
    cursor:pointer;
    text-align: center;
    font-size: 17px;
    width:186px;
    height:29px;
    font-family:"Trebuchet MS";
    background: #fff url('img/lmenu_bg1.gif') no-repeat;
    float:left;
    color : #d0dfef;
}
.sub_menu
{
    float:left;
    margin:2px;
    width: 186px;
    position:relative;
}

и код JavaScript котороый просто меняет display:

Код


var CURRENT_TARGET;

function show(aID) {
    var target = document.getElementById(aID).style;
    var value = target.display == 'block' ? 'none' : 'block';

    if (CURRENT_TARGET && CURRENT_TARGET != target) {
        CURRENT_TARGET.display = 'none';
    };
    target.display = value;
    CURRENT_TARGET = target;
};

Это сообщение отредактировал(а) 137 - 20.10.2007, 20:07

smartov

Дата 21.10.2007, 13:14 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

137, какой-то ты код не совсем корректный представил. Меню получается в ширину а не в высоту, что и логично, при наличии float: left
В общем чем-то меня эта тема задела smile

Ну вот по-быстрому (в смысле не то чтобы быстро сделал, а без анализа и особой оптимизации) получилось вот так

Код



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Insert title here</title>
</head>
<body>

<style>
.menu_item
{
    margin: 5px 0px 0px 15px;
    padding: 6px 0px 0px 0px;
    cursor:pointer;
    text-align: center;
    font-size: 17px;
    width:186px;
    height:29px;
    font-family:"Trebuchet MS";
    background: #fff url('img/lmenu_bg1.gif') no-repeat;
}
.sub_menu
{
    margin:2px;
    width: 186px;
    position:relative;
    overflow: hidden;
}
</style>

<script>

var $expandMaxHeight = 0;
var $expandInterval;

var GROW = 1;
var SHRINK = -1;


function smoothChange(object, factor) {
    var k = Math.abs((1 - object.offsetHeight/$expandMaxHeight) - object.offsetHeight/$expandMaxHeight);
    
    if (k<0.4) {
        var growth = 4*factor; //в середине элемента скорость прироста высоты быстрее
    } else {
        var growth = 2*factor; // чем в начале и конце элемента
    }
    
    if (
        ( (factor == GROW) && ((object.offsetHeight + growth) > $expandMaxHeight) ) ||
        ( (factor == SHRINK) && ((object.offsetHeight + growth) < 0) )
        )
    {
        growth = factor>0 ? ($expandMaxHeight - object.offsetHeight) : 0;
        clearInterval($expandInterval);
        $expandInterval = null;
    }
    
    object.style.height = object.offsetHeight + growth + 'px';
    if (factor == SHRINK && !$expandInterval) {
        object.style.height = $expandMaxHeight + 'px';
        object.style.display = 'none';
    }
}

function smoothShowVertical(object) {
    if ($expandInterval)
        return false;
        
    object.style.height = '0px';
    $expandInterval = setInterval(function(object) { return function () { smoothChange(object, GROW) } }(object), 20);
}

function smoothHideVertical(object) {    
    if ($expandInterval)
        return false;

    $expandInterval = setInterval(function(object) { return function () { smoothChange(object, SHRINK) } }(object), 20);
}

var CURRENT_TARGET;
function show(aID) {
    if ($expandInterval)
        return false;

    var target = document.getElementById(aID).style;
    var value = target.display == 'block' ? 'none' : 'block';
        
    if (CURRENT_TARGET && CURRENT_TARGET != target) {
        CURRENT_TARGET.display = 'none';
    };
    
    if (target.display == 'none') {
        CURRENT_TARGET = target;
        target.display = 'block';
    
        //---
        object = document.getElementById(aID);
        $expandMaxHeight = object.offsetHeight;
        object.style.height = '0px';

        smoothShowVertical(document.getElementById(aID));
        //---
    } else {
        $expandMaxHeight = object.offsetHeight;
        smoothHideVertical(document.getElementById(aID));
        //target.display = 'none';
    }
    

};
</script>

<div class="menu_item" onclick="show('sub_menu1')">Пункт меню</div>    
    <ul class="sub_menu" id="sub_menu1" style="display: none;">
        <li><a href="#">Главная</a></li>
        <li><a href="#">Контакты</a></li>
        <li><a href="#">Главная</a></li>
    </ul>

<div class="menu_item" onclick="show('sub_menu2')">Пункт меню</div>
    <ul class="sub_menu" id="sub_menu2" style="display: none;">
        <li><a href="#">Главная</a></li>
        <li><a href="#">Главная</a></li>
    </ul>



</body>
</html>

Добавлено через 1 минуту и 14 секунд
Правда в IE совсем некорректно работает smile

137

Дата 21.10.2007, 16:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 33
Регистрация: 15.9.2007

Репутация: нет
Всего: нет

Огромнейшее спасибо!
в IE работает, если сделать так:

Код


<div class="menu_item" onclick="show('sub_menu1')">Пункт меню</div>    
<div>    
<ul class="sub_menu" id="sub_menu1" style="display: none;">
        <li><a href="#">Главная</a></li>
        <li><a href="#">Контакты</a></li>
        <li><a href="#">Главная</a></li>
    </ul>
</div>

smartov

Дата 21.10.2007, 21:00 (ссылка)

(нет голосов)

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

Репутация: 7
Всего: 259

137,

Цитата(137 @ 21.10.2007, 15:23

)

в IE работает, если сделать так:

ну собственно я так и знал что там будет мелочь, просто надо было бежать - не успел дописать smile

рад что помог.
Темку как решенную пометь

GIK

Дата 23.10.2007, 11:02 (ссылка)

(нет голосов)

Загрузка ...

Добрый человек

Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14

А я думал тебе надо чтобы "выезжание" и "въезжание" из под меню никак не вляело на другие пункты, т.е. так:

Код


<html>
<head>
<style type="text/css">


</style>

<script type="text/javascript">

  var iid = new Array("m1","s_m11","s_m12","s_m13","m2","s_m21","s_m22","s_m23", "m3","s_m31","s_m32","s_m33"); 
    
   var hhhp=0; // в плюс
   var hhhm=30; //в минус
   var tim; 
   var thisobj, thisg; // и начало (вершина) от которой будем увеличивать или уменьшать 

 var dh=0, bull=1; 

  function start(obj, g, gg){
  if(bull){ bull=0;
   thisobj=obj; thisg=g; thisgg=gg;
   if(obj.visib==0){
      obj.visib=1; 
      for(var i=g; i<gg; i++) //Диапазон видимых
       {
        document.getElementById(iid[i]).style.display="block";  
       }      
   tim=setInterval("goplus()", 50); 
   }
    else{
     obj.visib=0;
     for(var i=g; i<gg; i++) 
       {
        //document.getElementById(iid[i]).style.display="none";  
       }  
     tim=setInterval("gominus()", 50); 
     }
  }
}
var t1=0, h1=0;
                              var ind=1; 
 function goplus(){   
 hhhp+=3;     
   for(var i=thisg; i < thisgg; i++) 
   {   
   if(document.getElementById(iid[i-1]).style.display=="block")
    {   
    t1 = document.getElementById(iid[i-1]).style.top;   
    if(t1.length<5) //И длину учтем :)
     { t1 = t1.substr(0,2)*1;
     }else{
       t1 = t1.substr(0,3)*1;
      }   
    document.getElementById(iid[i]).style.top = t1 + hhhp + "px";
   }   
  }     
   for(var i=thisgg; i <12; i++){
   ind = fgetM(i);  
   if(document.getElementById(iid[i]).style.display=="block")
   {    
    t1 = document.getElementById(iid[ind]).style.top;
     if(t1.length<5) 
     { t1 = t1.substr(0,2)*1;
     }else{
       t1 = t1.substr(0,3)*1;
      }     
    document.getElementById(iid[i]).style.top = t1+ 30 + "px";   
   }   
  }    
 if(hhhp>=30) {
  clearInterval(tim);
  hhhp=0; bull=1;
}
};
  function fgetM(i){
     var ind=0; 
   for(var ii=i-1; ii>=0; ii--)
  { 
     if(document.getElementById(iid[ii]).style.display=="block") {
     ind=ii; 
     break;    
    }
  }
  return ind; 
 }

function gominus(){  
 hhhm-=3;   
   for(var i=thisg; i < thisg+3; i++) 
   {  
   if(document.getElementById(iid[i-1]).style.display=="block")
    {  
    t1 = document.getElementById(iid[i-1]).style.top;
    //Вытаскиваем число
    if(t1.length<5) 
     { t1 = t1.substr(0,2)*1;
     }else{
       t1 = t1.substr(0,3)*1;
      } 
    document.getElementById(iid[i]).style.top = t1 + hhhm + "px"; 
   }   
  }    
   for(var i=thisgg; i <12; i++){
   ind = fgetM(i); 
   if(document.getElementById(iid[i]).style.display=="block")
   {    
    t1 = document.getElementById(iid[ind]).style.top;
     if(t1.length<5) //И длину учтем :)
     { t1 = t1.substr(0,2)*1;
     }else{
       t1 = t1.substr(0,3)*1;
      }     
    document.getElementById(iid[i]).style.top = t1+ 30+ hhhm + "px";       
   }   
  }   
 if(hhhm<=0) {
  clearInterval(tim);
  hhhm=30; bull=1;
  for(var i=thisg; i<thisgg; i++) //Диапазон невидимых видимых
       {
        document.getElementById(iid[i]).style.display="none";  
       }  
  }
};

</script>
</head>
<body>

<div id="m1" class="m1" visib=0 onclick="start(this, 1, 4)" style="position:absolute; top:10; height:30; display:block;background:#777777"><A href="#">МенюХа1</A></div>      
    <div id="s_m11" class="m1" style="position:absolute; top:10; height:30; display:none; background:#cdcdcd">Подпункт 1</div> 
    <div id="s_m12" class="m1" style="position:absolute; top:10; height:30; display:none; background:#cdcdcd">Подпункт 2</div>  
    <div id="s_m13" class="m1" style="position:absolute; top:10; height:30; display:none; background:#cdcdcd">Подпункт 3</div> 
<div id="m2" class="m2" visib=0 onclick="start(this, 5, 8)" style="position:absolute; top:40; height:30;background:#777337; display:block;"><A href="#">МенюХа2</A></div>
    <div id="s_m21" class="m2" style="position:absolute; top:35;height:30; display:none;background:#cdcdcd">Подпункт 1</div> 
    <div id="s_m22" class="m2" style="position:absolute; top:35;height:30; display:none;background:#cdcdcd">Подпункт 2</div>  
    <div id="s_m23" class="m2" style="position:absolute; top:35;height:30; display:none;background:#cdcdcd">Подпункт 3</div>

<div id="m3" class="m3" visib=0 onclick="start(this, 9, 12)" style="position:absolute; top:70;height:30;background:#358759; display:block;"><A href="#">МенюХа3</A></div>
    <div id="s_m31" class="m3" style="position:absolute; top:60; height:30; display:none;background:#cdcdcd">Подпункт 1</div> 
    <div id="s_m32" class="m3" style="position:absolute; top:60; height:30; display:none;background:#cdcdcd">Подпункт 2</div>  
    <div id="s_m33" class="m3" style="position:absolute; top:60; height:30; display:none;background:#cdcdcd">Подпункт 3</div>

</body>
</html>

Ну навсякий случай выложил вдруг кому и понадобиться smile

--------------------

Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »