Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Меню для сайта (https://javascript.ru/forum/dom-window/16220-menyu-dlya-sajjta.html)

gellir 30.03.2011 14:45
Меню для сайта
 
Есть javascript menu для сайта:
Код:
<html>
<head>
<script language="JavaScript" type="text/javascript">
var supported = (document.all || (document.getElementById && !window.opera));

function hide(){
        var subNav = document.getElementById('menu');
        for (var i=0;i<subNav.getElementsByTagName('ul').length;i++){
        if(subNav.getElementsByTagName('ul')[i].id != '')
                subNav.getElementsByTagName('ul')[i].style.display='none';
        }
}

function block(i){
        if(!supported)return;
        var x = document.getElementById(i);
        with(x.style)
        {
        display == 'none' ? display = 'block' : display = 'none';
        }
        getIt();
}

function getIt()
{
        var status = new Object;
        var menu = document.getElementById('menu');       
        var uls = menu.getElementsByTagName('ul');
        for(i=0;i<uls.length;i++){
        var allids = uls[i].id;
        if(allids){
        status[allids] = uls[i].style.display;
        document.cookie = allids+'='+status[allids];
                }
        }
}

function setProp(id,value)
{
        var styleObj = document.getElementById(id);
        if(styleObj != null)
        {
        styleObj.style.display = value;
        }
}

function assignCookie()
{
        if(!document.cookie || document.cookie == ' ')
        {
        var menu = document.getElementById('menu');
        var ul = menu.getElementsByTagName('ul');
        for(i=0;i<ul.length;i++)
        {
                var ids = ul[i].id;
                if(ids)
                {
                        var styles = ul[i].style.display;
                        setProp(ids,styles);
                        }
                }
        }else if(document.cookie && document.cookie != ' ')
        {
                var allCookies = document.cookie;
                var cookies = allCookies.split('; ');
                for(var j=0;j<cookies.length;j++)                                       
        {
                var values = cookies[j].split('=');
                var idc = values[0];
                var stl = values[1];
                setProp(idc,stl);
                }
        }
}
window.onload = function(){hide();assignCookie();}
</script>

<style type="text/css">

.toplink{
        border-bottom: 1px #111111 solid;
        }
#menu{
        position: absolute;
        top: 25%;
        left: 5%;
        width: 150px;
        }
#menu ul{               
        list-style: none;
        margin: 0;
        padding: 0;
        }

#menu ul li{
        border-bottom: 1px solid black;
        list-style: none;
        margin-left: 5px;
        padding-left: 1em;
        text-indent: -1em;
       
        }
#menu ul li.sub{
        margin-left: 1em;
        padding-left: 1em;
        text-indent: -1em;
        border: none;
        }       


#menu li a.navw:link{
        font-size: 8pt;
        color: #111111;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        text-decoration:none;
        }
#menu li a.navw:visited{
        font-size: 8pt;
        color: #111111;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        text-decoration:none;
        }
#menu li a.navw:active{
        font-size: 8pt;
        color: #111111;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        text-decoration:none;
        }
#menu li a.navw:hover{
        font-size: 8pt;
        color: #999999;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        text-decoration:none;
        }
#menu li a.navh:link{
        font-size: 8pt;
        color: #111111;
        font-weight:bold;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        text-decoration:none;
        }
#menu li a.navh:visited{
        font-size: 8pt;
        color: #111111;
        font-weight:bold;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        text-decoration:none;
        }
#menu li a.navh:active{
        font-size: 8pt;
        color: #111111;
        font-weight:bold;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        text-decoration:none;
        }
#menu li a.navh:hover{
        font-size: 8pt;
        color: #999999;
        font-weight:bold;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        text-decoration:none;
        }

</style>
</head>

<body>

<div id="menu">
        <ul>
                <li><a href="javascript:;" class="navh">→ Home</a> </li>
        </ul>
        <ul>
                <li><a href="javascript:;" class="navh" onclick="block('one');return false">→ Javascript</a></li>
        </ul>
        <ul id="one" style="display: block; ">
                <li class="sub"><a href="javascript:;" class="navw">• HTML and JavaScript</a></li>
                  <li class="sub"><a href="javascript:;" class="navw">• Variables and strings</a></li>
                  <li class="sub"><a href="javascript:;" class="navw">• Functions</a></li>
        </ul>
        <ul>
                <li><a href="javascript:;" class="navh" onclick="block('two');return false">→ CSS</a></li>
        </ul>
        <ul id="two" style="display: block; ">
                <li class="sub"><a href="javascript:;" class="navw">• Properties</a></li>
                  <li class="sub"><a href="javascript:;" class="navw">• Utilities</a></li>
                  <li class="sub"><a href="javascript:;" class="navw">• Selectors</a></li>
        </ul>
        <ul>
                <li><a href="javascript:;" class="navh" onclick="block('three');return false">→ DOM</a></li>
        </ul>
        <ul id="three" style="display: none; ">
                <li class="sub"><a href="javascript:;" class="navw">• References</a></li>
                  <li class="sub"><a href="javascript:;" class="navw">• Utilities</a></li>
        </ul>
        <ul>
                <li><a href="javascript:;" class="navh" onclick="block('four');return false">→ Web Design</a></li>
        </ul>
        <ul id="four" style="display: block; ">
                <li class="sub"><a href="javascript:;" class="navw">• Graphics</a></li>
                  <li class="sub"><a href="javascript:;" class="navw">• Colors</a></li>
        </ul>
</div>


</body>
</html>
Как сделать чтоб при открытом блоке one, кликнув по блоку two, блок one свернулся, а блок two развернулся?

kostr 30.03.2011 23:57
Если вам нужно только то, что вы написали, то так:
function block(i){
 if(!supported)return;
 var x = document.getElementById(i);
 with(x.style)
 {
 display == 'none' ? display = 'block' : display = 'none';
 if (display == 'block' && i == 'two')
  document.getElementById('one').style.display = 'none';
 }
 getIt();
}


Но это действительно сделает только, чтобы когда вы открываете второй блок, первый закрывался, и ничего больше.

gellir 31.03.2011 10:18
спасибо за ответ) но мне нужно чтоб это все это действовало и на другие блоки и не только на те которые в примере потому что их будет намного больше. заранее спасибо.

kostr 31.03.2011 12:47
Ну вот так тогда:
function block(i){
 if(!supported)return;
 var x = document.getElementById(i);
 var bl = document.getElementsByTagName('ul');
 with(x.style)
 {
 display == 'none' ? display = 'block' : display = 'none';
 for (j = 0; j < bl.length; j++) {
  if (display == 'block' && bl[j].id && bl[j].id != i)
   bl[j].style.display = 'none';
  }
 }
 getIt();
}

будет работать для всех списков ul, у которых есть id.
Такие задачи вообще-то проще с jquery решаются.


Часовой пояс GMT +3, время: 03:53.