Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.01.2011, 13:55
Новичок на форуме
Отправить личное сообщение для Программер Посмотреть профиль Найти все сообщения от Программер
 
Регистрация: 07.01.2011
Сообщений: 4

Меню сайта - древовидный список
Пытаюсь уже 2 дня сделать вот такую штуку



вот чего достиг

Код:
 <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Безымянная страница</title>
    </head>
  

     <script type="text/javascript" > 

    function startmenu() 
    { 
        document.getElementById('kRussia').style.display = "none"; 
        document.getElementById('menu2').style.display = "none"; 
        //inline
   
    } 

    function menufunc(menuId) 
    { 
        if(document.getElementById(menuId).style.display == "none")
        { 
            startmenu(); 
            document.getElementById(menuId).style.display = "block";
        } 
        else 
        { 
         startmenu(); 
        } 
    } 

    </script> 

     
 <body onload="javascript:startmenu()"> 
    <table width="100%"> 
    <tr> 
    <td valign="top" width="20%">&nbsp;
        <a href="javascript:menufunc('kRussia')"><img alt="Россия" src="22Russia.png"/>Photoshop</a> 
        <div id="kRussia"> 
        - <a href='/'>Работа в Photoshop</a></br /> 
        - <a href='/'>Photoshop Exchange</a> <br />
        </div> 
        <br /> 
        <a href="javascript:menufunc('menu2')">Векторные редакторы</a> 
        <div id="menu2"> 
        - <a href='/'>Adobe Illustrator</a><br /> 
        - <a href='/'>Corel Draw</a><br /> 
        </div> 
        <br /> 
      
    </td> 
    </tr>   
    </table> 
 </body>
</html>
Прошу помощи, просто уже не знаю в какую степь двигаться!
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2011, 17:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,109

Сообщение от Программер
уже не знаю в какую степь двигаться
Информации валом!
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2011, 19:34
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Вот накатал на чистом JS, проверил в IE6 и Firefox 3.6


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #menu li {
                display:inline;
                margin:10px;
            }

            li.hasUl {
                list-style-image:url(plus.gif);
            }
            
            li.hasUl li {
                list-style-image:none;
            }

            #list1 {
                display:block;
            }

            #list2 {
                display:none;
            }

        </style>
  </head>
  <body>
    <ul id="menu">
        <li id ="menu1">Menu 1</li>
        <li id ="menu2">Menu 2</li>
    </ul>
    <ul id="list1">
        <li class="hasUl">Item 1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3</li>
            <li>Item 1.4</li>
        </ul>
        </li>
        <li class="hasUl">Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
            <li>Item 2.4</li>
        </ul>
        </li>
        <li class="hasUl">Item 3
        <ul>
            <li>Item 3.1</li>
            <li>Item 3.2</li>
            <li>Item 3.3</li>
            <li>Item 3.4</li>
        </ul>
        </li>
    </ul>

        <ul id="list2">
        <li class="hasUl">Item 4
        <ul>
            <li>Item 4.1</li>
            <li>Item 4.2</li>
            <li>Item 4.3</li>
            <li>Item 4.4</li>
        </ul>
        </li>
        <li class="hasUl">Item 5
        <ul>
            <li>Item 5.1</li>
            <li>Item 5.2</li>
            <li>Item 5.3</li>
            <li>Item 5.4</li>
        </ul>
        </li>
        <li class="hasUl">Item 6
        <ul>
            <li>Item 6.1</li>
            <li>Item 6.2</li>
            <li>Item 6.3</li>
            <li>Item 6.4</li>
        </ul>
        </li>
        <li>Item 7</li>
    </ul>
    <script>

         if(document.getElementsByClassName) {
            getElementsByClass = function(classList, node) {
            return (node || document).getElementsByClassName(classList)
            }
            } else {
            getElementsByClass = function(classList, node) {
            var node = node || document,
            list = node.getElementsByTagName('*'),
            length = list.length,
            classArray = classList.split(/\s+/),
            classes = classArray.length,
            result = [], i,j
            for(i = 0; i < length; i++) {
                for(j = 0; j < classes; j++)  {
                    if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                        result.push(list[i])
                        break
                    }
                }
            }
            return result
         }
         }



        function addEvent(elem, type, handler){
            if (elem.addEventListener){
                elem.addEventListener(type, handler, false)
            } else {
                elem.attachEvent("on"+type, function() { handler.call(elem)})
            }
        }


        function processLi(event) {
            event = event || window.event;
            var target = event.target || event.srcElement;
            if (this == target)
            {
                var childs = this.getElementsByTagName('li');
                var style;
                for (var i = 0; i < childs.length; i++) {                
                   if (childs[i].style.display == "none") {
                       childs[i].style.display = "block";
                       if (i == childs.length - 1) this.style.listStyleImage = "url(minus.gif)"
                   }
                   else {
                       childs[i].style.display = "none";
                       if (i == childs.length - 1) this.style.listStyleImage = "url(plus.gif)"
                   }
                }
            }
        }


        function processFirstList() {
            var list1 = document.getElementById("list1");
            var list2 = document.getElementById("list2");
            var style;            
            if (window.getComputedStyle) {
                style = window.getComputedStyle(list1, null);                
            }
            else {
                style = list1.currentStyle;                
            }            
            if (style.display == "none")
               {
                list2.style.display = "none";
                list1.style.display = "block";
            }
        }

           function processSecondList() {
            var list1 = document.getElementById("list1");
            var list2 = document.getElementById("list2");            
            var style;
            if (window.getComputedStyle) {                
                style = window.getComputedStyle(list2, null);
            }
            else {                
                style = list2.currentStyle;
            }
            if (style.display == "none")
               {
                list1.style.display = "none";
                list2.style.display = "block";
            }
        }

        addEvent(document.getElementById("menu1"), "click", processFirstList);
        addEvent(document.getElementById("menu2"), "click", processSecondList);


        var liElements = getElementsByClass("hasUl");
        
        for (var i = 0; i < liElements.length; i++) {            
            addEvent(liElements[i], "click", processLi);
            var li = liElements[i].getElementsByTagName('li');
            for (var k = 0; k < li.length; k++)
                li[k].style.display = "none";
        }
        </script>
  </body>
</html>

Последний раз редактировалось Shaci, 07.01.2011 в 20:00.
Ответить с цитированием
  #4 (permalink)  
Старый 07.01.2011, 20:04
Новичок на форуме
Отправить личное сообщение для Программер Посмотреть профиль Найти все сообщения от Программер
 
Регистрация: 07.01.2011
Сообщений: 4

О круто!!!! спс!!! если не трудно можешь сделать чтобы если item1 открыт то при нажатии item2 он закрывался. И если не сложно проставь комментарии к скриптам, чтобы я смог разобраться.
Ответить с цитированием
  #5 (permalink)  
Старый 08.01.2011, 16:12
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Ну вот как вариант,
но я это накатал больше для себя, чтобы JS тренить начать,
уверен, что правильнее делать как-то по другому, +
наверняка в инете много вариантов есть на эту тему
+
на jquery это можно побыстрее сделать


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #menu li {
                display:inline;
                margin:10px;
            }

            li.hasUl {
                list-style-image:url(plus.gif);
            }

            li.hasUl li {
                list-style-image:none;
            }

            #list1 {
                display:block;
            }

            #list2 {
                display:none;
            }

        </style>
  </head>
  <body>
    <ul id="menu">
        <li id ="menu1">Menu 1</li>
        <li id ="menu2">Menu 2</li>
    </ul>
    <ul id="list1">
        <li class="hasUl">Item 1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
            <li>Item 1.3</li>
            <li>Item 1.4</li>
        </ul>
        </li>
        <li class="hasUl">Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
            <li>Item 2.4</li>
        </ul>
        </li>
        <li class="hasUl">Item 3
        <ul>
            <li>Item 3.1</li>
            <li>Item 3.2</li>
            <li>Item 3.3</li>
            <li>Item 3.4</li>
        </ul>
        </li>
    </ul>

        <ul id="list2">
        <li class="hasUl">Item 4
        <ul>
            <li>Item 4.1</li>
            <li>Item 4.2</li>
            <li>Item 4.3</li>
            <li>Item 4.4</li>
        </ul>
        </li>
        <li class="hasUl">Item 5
        <ul>
            <li>Item 5.1</li>
            <li>Item 5.2</li>
            <li>Item 5.3</li>
            <li>Item 5.4</li>
        </ul>
        </li>
        <li class="hasUl">Item 6
        <ul>
            <li>Item 6.1</li>
            <li>Item 6.2</li>
            <li>Item 6.3</li>            
        </ul>
        </li>
        <li>Item 7</li>
    </ul>
    <script>

         if(document.getElementsByClassName) {
            getElementsByClass = function(classList, node) {
            return (node || document).getElementsByClassName(classList)
            }
            } else {
            getElementsByClass = function(classList, node) {
            var node = node || document,
            list = node.getElementsByTagName('*'),
            length = list.length,
            classArray = classList.split(/\s+/),
            classes = classArray.length,
            result = [], i,j
            for(i = 0; i < length; i++) {
                for(j = 0; j < classes; j++)  {
                    if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                        result.push(list[i])
                        break
                    }
                }
            }
            return result
         }
         }



        function addEvent(elem, type, handler){
            if (elem.addEventListener){
                elem.addEventListener(type, handler, false)
            } else {
                elem.attachEvent("on"+type, function() { handler.call(elem)})
            }
        }


        function preprocess($this) {
        for (var i = 0; i < liElements.length; i++) {
            if ($this != liElements[i]) {
            var style;
            if (window.getComputedStyle) {
                style = window.getComputedStyle(liElements[i], null);
            }
            else {
                style = liElements[i].currentStyle;
            }
            if (style.listStyleImage != 'url("http://localhost/html/plus.gif")') {
                var li = liElements[i].getElementsByTagName("li");
                for (var k = 0; k < li.length; k++)
                    li[k].style.display = "none";
                liElements[i].style.listStyleImage = 'url("http://localhost/html/plus.gif")'
            }
            }
            }
        }

        function processLi(event) {       
              
            preprocess(this);

            event = event || window.event;
            var target = event.target || event.srcElement;
            if (this == target)
            {
                var childs = this.getElementsByTagName('li');
                var style;
                for (var i = 0; i < childs.length; i++) {
                   if (childs[i].style.display == "none") {
                       childs[i].style.display = "block";
                       if (i == childs.length - 1) this.style.listStyleImage = "url(minus.gif)"
                   }
                   else {
                       childs[i].style.display = "none";
                       if (i == childs.length - 1) this.style.listStyleImage = "url(plus.gif)"
                   }
                }
            }
        }

        function processFirstList() {

            preprocess(this);

            var list1 = document.getElementById("list1");
            var list2 = document.getElementById("list2");
            var style;
            if (window.getComputedStyle) {
                style = window.getComputedStyle(list1, null);
            }
            else {
                style = list1.currentStyle;
            }           
            if (style.display == "none") {
                list2.style.display = "none";
                list1.style.display = "block";
            }            
        }

        function processSecondList() {

            preprocess(this);

            var list1 = document.getElementById("list1");
            var list2 = document.getElementById("list2");
            var style;
            if (window.getComputedStyle) {
                style = window.getComputedStyle(list2, null);
            }
            else {
                style = list2.currentStyle;
            }    
            if (style.display == "none") {
                list1.style.display = "none";
                list2.style.display = "block";
            }         
        }

        addEvent(document.getElementById("menu1"), "click", processFirstList);
        addEvent(document.getElementById("menu2"), "click", processSecondList);


        var liElements = getElementsByClass("hasUl");

        for (var i = 0; i < liElements.length; i++) {
            addEvent(liElements[i], "click", processLi);
            var li = liElements[i].getElementsByTagName('li');
            for (var k = 0; k < li.length; k++)
                li[k].style.display = "none";
        }
        </script>
  </body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Раскрывающийся список меню sinichka Элементы интерфейса 2 21.07.2010 18:25
Как переделать простое меню для сайта на javascript? denspb Работа 2 16.07.2010 01:25
Меню сайта на JS lawer Работа 6 26.09.2009 21:47
Есть 2-a скрипта, 1-й показывает время, 2-й меню сайта. mahno Я не знаю javascript 11 30.05.2009 16:19