Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.07.2012, 15:13   #11
RelaX Inc.
Пользователь
 
Регистрация: 15.01.2012
Сообщений: 52
По умолчанию

С анимацией лучше, но это уже не по теме, так как это js надо, я прав?) А вообще можно и без нее
RelaX Inc. вне форума Ответить с цитированием
Старый 08.07.2012, 15:17   #12
serken
Новичок
Джуниор
 
Регистрация: 08.07.2012
Сообщений: 12
По умолчанию

Думаю да. Подождите немного
serken вне форума Ответить с цитированием
Старый 08.07.2012, 15:18   #13
serken
Новичок
Джуниор
 
Регистрация: 08.07.2012
Сообщений: 12
По умолчанию

Цитата:
Сообщение от RelaX Inc. Посмотреть сообщение
С анимацией лучше, но это уже не по теме, так как это js надо, я прав?) А вообще можно и без нее
Не совсем. Анимацию можно сделать и средствами css3
serken вне форума Ответить с цитированием
Старый 08.07.2012, 16:45   #14
RelaX Inc.
Пользователь
 
Регистрация: 15.01.2012
Сообщений: 52
По умолчанию

Ну вообщем по-любому лучше с анимацией, но это уже не по теме
RelaX Inc. вне форума Ответить с цитированием
Старый 08.07.2012, 17:22   #15
serken
Новичок
Джуниор
 
Регистрация: 08.07.2012
Сообщений: 12
По умолчанию

HTML
Код HTML:
<div id="menu">
    <ul class="nav">
        <li><a href="/">Новости</a> 
            <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
        </li>
        <li><a href="/forum/">Форум</a>
            <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
        </li>                 
        <li><a href="/load/">Загрузки</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="/ships/">Корабли</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="/video/">Видео</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="/images/">Изображения</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="/stories/">Истории</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
        <li><a href="./index.php?do=feedback">Связь с администрацией</a>
        <ul class="anchor">
                <li><a href="\">Первый подпункт</a></li>
                <li><a href="\">Второй подпункт</a></li>
            </ul>
            </li>
    </ul>
</div>
CSS
Код HTML:
#menu .nav {
    position: relative;
    font-family: Times New Roman;
    font-size: 16px;
    border-bottom:2px solid #FFFFFF;
    border-top:2px solid #FFFFFF;
    height:30px;
    margin-top: 25px;
    background: url('bg.png');
        -webkit-box-shadow: 0px 0px 50px #000000; /* Safari, Chrome */
        -moz-box-shadow: 0px 0px 50px #000000; /* Firefox */
        box-shadow: 0px 0px 50px #000000}
        
#menu .anchor {position: absolute; top: 22px; display: none; background: white; padding: 10px;}

#menu .anchor li{width: 150px; position: relative;} /*Пункт вложенного меню*/

#menu .nav li:hover .anchor, .anchor:hover{display: run-in;}   /*Наведение на пункт*/

#menu .nav li {float: left; list-style: none; position: relative;} /*Все пункты главного списка*/
    
#menu .nav li .anchor a{margin: 5px; height: 20px;}   /*Вложенные ссылки*/
 
#menu .nav li a {
    text-decoration: none;
    margin-left:20px;
    display: block;
    height: 26px;  
    padding-top: 4px;
    }
 
#menu ul li a:link { 
    color:#bad7fc;
    }
#menu ul li a:visited { 
    color:#bad7fc;
    }
#menu ul li a:hover {color:#84bbff;
    text-decoration: underline;
    }
serken вне форума Ответить с цитированием
Старый 08.07.2012, 17:25   #16
serken
Новичок
Джуниор
 
Регистрация: 08.07.2012
Сообщений: 12
По умолчанию

Анимацию добавить не сложно, если хотите, то я через часик могу предоставить вам то же самое, но с анимированным выпадом меню
serken вне форума Ответить с цитированием
Старый 08.07.2012, 17:50   #17
RelaX Inc.
Пользователь
 
Регистрация: 15.01.2012
Сообщений: 52
По умолчанию

serken, сейчас этот код опробую, и отпишусь
RelaX Inc. вне форума Ответить с цитированием
Старый 08.07.2012, 18:03   #18
RelaX Inc.
Пользователь
 
Регистрация: 15.01.2012
Сообщений: 52
По умолчанию

serken, вроде все работает, но почему то все элементы(главные, типа Новости, Изображения и т.д.) не по середине?

Последний раз редактировалось RelaX Inc.; 08.07.2012 в 18:06.
RelaX Inc. вне форума Ответить с цитированием
Старый 08.07.2012, 18:10   #19
serken
Новичок
Джуниор
 
Регистрация: 08.07.2012
Сообщений: 12
По умолчанию

а ваше меню вы хотите сделать резиновым? на всю страницу ?
serken вне форума Ответить с цитированием
Старый 08.07.2012, 18:19   #20
RelaX Inc.
Пользователь
 
Регистрация: 15.01.2012
Сообщений: 52
По умолчанию

Да
10 символов
RelaX Inc. вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающее меню CSS+HTML Mat-eria HTML и CSS 0 17.11.2011 17:29
Выпадающее горизонтальное меню на css st_sasha HTML и CSS 1 20.10.2011 16:26
Css-меню вертикальное выпадающее и раскрывающееся при выборе Landysh86 HTML и CSS 3 04.05.2011 13:25
горизонтальное меню s.talke.r Паскаль, Turbo Pascal, PascalABC.NET 1 18.12.2010 17:12
Горизонтальное меню на CSS. yermolenko HTML и CSS 2 27.05.2010 10:47