Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум (новые сообщения вниз) Структурный форум

тема: Позиционирование простого выпадающего меню

Сообщения:  [1-3] 

 
 автор: amigo63   (14.01.2009 в 11:44)   письмо автору
 
   для: sl1p   (14.01.2009 в 05:46)
 

Что-то не то... в данном варианте кнопка всегда слева, меню вываливается из-под нее, но при этом сдвигает остальные объекты вправо. Если в кнопке обойтись без float, а в меню поставить float:right, уже лучше, но меню по-любому лепится к границам экрана. В IE к тому же начинает гулять нижняя граница body.

Вообще, можно как-нибудь с помощью JS получить расстояние в пикселах от границы окна до обьекта? Это было бы самое то

  Ответить  
 
 автор: sl1p   (14.01.2009 в 05:46)   письмо автору
 
   для: amigo63   (13.01.2009 в 21:07)
 

<style type="text/css">
.pannel{
    text-align:center;
    width:300px;
    font-size: 16px;
    background: #e8e8f8;
    border: 2px ridge #009;
    display: none;
    position: relative;
    z-index:99;
    top:27px;
    float:left;
}
.pannelLink{
    border:1px solid #000;
    background:#fff;
    color:#000;
    padding:3px;
    text-decoration:none;
    float:left;
}
</style>

<div>
    <a href="#" onClick="return displayMenu(this)" class="pannelLink">Open/Close</a>
    <div class="pannel">
        txttxttxttxttxttxttxttxttxttxttxttx t<br>
        txttxttxttxttxttxttxttxttxttxttxttx t<br>
        txttxttxttxttxttxttxttxttxttxttxttx t<br>
        txttxttxttxttxttxttxttxttxttxttxttx t<br>
    </div>
</div>

<script type="text/javascript">
function displayMenu(obj) {
    obj = obj.parentNode.getElementsByTagName("DIV")[0];
    with(obj.style) {
        display = !display || display == 'none' ? 'block' : 'none';
    }
    return false;
}
</script>

  Ответить  
 
 автор: amigo63   (13.01.2009 в 21:07)   письмо автору
 
 

Есть список ссылок:

<div class="pannel" id="pannel" onclick="displaymenu()">
<span><img src="../graphic/newpage.gif">Создание страницы</span>
<a href="?act=editpages"><img src="../graphic/editpages_active.gif">Редактирование страниц</a>
<a href="?act=config"><img src="../graphic/config_active.gif">Настройки</a>
<a href="?act=dump"><img src="../graphic/dump_active.gif">Дамп БД</a>
<a href="?act=parts"><img src="../graphic/parts_active.gif">Разделы</a>
<a href="?act=exit"><img src="../graphic/logout_active.gif">Выход</a>
</div>

стиль этого списка выглядит вот так:

.pannel{
    width:300px;
    font-size: 16px;
    display: none;
    position: absolute;
    top:30px;
    left: 300px;
    background: #e8e8f8;
    border: 2px ridge #009;
}

при нажатии на кнопку вызывается функция:

function displaymenu(){
if(document.getElementById("pannel").style.display=="none"||document.getElementById("pannel").style.display==""){
document.getElementById("pannel").style.display="inline";
}else{
document.getElementById("pannel").style.display="none";
}
}

То есть, как видите, все очень примитивно. Но...
Не могу понять, как сделать, чтобы меню выпадало внизу и справа от кнопки (поверх страницы!), независимо от того, в каком месте страницы она находится? Экспериментировал с position и float, желаемых результатов не принесло... Заранее спасибо за помощь!

  Ответить  

Сообщения:  [1-3] 

Форум разработан IT-студией SoftTime
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования