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

Выпадающее меню
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <style type="text/javascript">
        </style>
        <style type="text/css">

            .a {display: inline; border: solid 1px;}
            .b {border: solid 1px; width: 220px; display: none;}
            
        </style>
        <script type="text/javascript">

        function findPos(obj) {
            var curleft = 0;
            var curbottom = obj.offsetHeight;
            if (obj.offsetParent) {
                do {
                    curleft += obj.offsetLeft;
	            curbottom += obj.offsetTop;
               } while (obj = obj.offsetParent);
            }
            return [curleft, curbottom];
	}

        function $(id) {
            return document.getElementById(id);
        }

        function s(obj, par_obj) {
            obj.style.display = "block";
            obj.style.position = "absolute";
            dim = findPos(par_obj);
            obj.style.left = dim[0];
            obj.style.top = dim[1];
        }

        function hide(obj) {
            obj.style.display = "none";
            obj.style.left = obj.style.top = 0;
        }

        </script>
        <div id="menu">
            <table>
                <tr>
                    <td id="a1" class="a" onmouseover="javascript: s($('b1'), $('a1'));" onmouseout="javascript: hide($('b1'));">Пункт1 &#x25ba;</td>
                    <td id="a2" class="a" onmouseover="javascript: s($('b2'), $('a2'));" onmouseout="javascript: hide($('b2'));">Пункт2 &#x25ba;</td>
                    <td id="a3" class="a" onmouseover="javascript: s($('b3'), $('a3'));" onmouseout="javascript: hide($('b3'));">Пункт3 &#x25ba;</td>
                </tr>
            </table>
            <div id="b1" class="b">
                <ul>
                    <li><a href="#">Ссылка 1.1</a></li>
                    <li><a href="#">Ссылка 1.2</a></li>
                    <li><a href="#">Ссылка 1.3</a></li>
                </ul>
            </div>
            <div id="b2" class="b">
                <ul>
                    <li><a href="#">Ссылка 2.1</a></li>
                    <li><a href="#">Ссылка 2.2</a></li>
                    <li><a href="#">Ссылка 2.3</a></li>
                </ul>
            </div>
        </div>
        <p>Текст.</p>
        <script type="text/javascript">

            // dim = findPos($('a2'));
            // alert(dim);
            
        </script>
    </body>
</html>

Помогите доделать...

Последний раз редактировалось gavnomaster, 24.05.2010 в 14:11.
Ответить с цитированием