24/08/15 Открыта запись на обучение вёрстки для майбба - ссылка на тему

Избранные уроки Photoshop

Эпиграф в стиле tumblr (перевод windymind)

Вверх
Вниз

COLOR MATE

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » COLOR MATE » Каталог CSS|JS » CSS3 Выпадающее мега меню

CSS3 Выпадающее мега меню

Страница: 1

Сообщений 1 страница 5 из 5

1

  • Автор: morgan
  • главный по горшкам
  • morgan
  • Зарегистрирован: 27-07-2012
  • Приглашений: 0
  • Сообщений: 4222
  • Уважение: +1775
  • Позитив: +1413
  • Пол: Мужской
  • Провел на форуме:
    2 месяца 25 дней
  • Последний визит:
    12-03-2019 02:02:54

http://efimov.ws/assets/images/develop/script/2010/10/12/17-.jpg

Хтмл-низ:

Код:
<link rel="stylesheet" href="http://nettuts.s3.amazonaws.com/819_megamenu/demo/menu.css" type="text/css" media="screen" />

Код меню:

Код:
<ul id="menu">
    
    <li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
    
        <div class="dropdown_2columns"><!-- Begin 2 columns container -->
    
            <div class="col_2">
                <h2>Welcome !</h2>
            </div>
    
            <div class="col_2">
                <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>             
                <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>             
            </div>
    
            <div class="col_2">
                <h2>Cross Browser Support</h2>
            </div>
            
            <div class="col_1">
                <img src="img/browsers.png" width="125" height="48" alt="" />
            </div>
            
            <div class="col_1">
                <p>This mega menu has been tested in all major browsers.</p>
            </div>
          
        </div><!-- End 2 columns container -->
    
    </li><!-- End Home Item -->

    <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
    
        <div class="dropdown_5columns"><!-- Begin 5 columns container -->
        
            <div class="col_5">
                <h2>This is an example of a large container with 5 columns</h2>
            </div>
            
            <div class="col_1">
                <p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
            </div>
            
            <div class="col_1">
                <p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
            </div>
            
            <div class="col_1">
                <p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
            </div>
            
            <div class="col_1">
                <p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
            </div>
            
            <div class="col_1">
                <p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
            </div>
        
            <div class="col_5">
                <h2>Here is some content with side images</h2>
            </div>
           
            <div class="col_3">
            
                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
        
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
            
            </div>
            
            <div class="col_2">
            
                <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
            
            </div>
        
        </div><!-- End 5 columns container -->
    
    </li><!-- End 5 columns Item -->

    <li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
    
        <div class="dropdown_4columns"><!-- Begin 4 columns container -->
        
            <div class="col_4">
                <h2>This is a heading title</h2>
            </div>
            
            <div class="col_1">
            
                <h3>Some Links</h3>
                <ul>
                    <li><a href="#">ThemeForest</a></li>
                    <li><a href="#">GraphicRiver</a></li>
                    <li><a href="#">ActiveDen</a></li>
                    <li><a href="#">VideoHive</a></li>
                    <li><a href="#">3DOcean</a></li>
                </ul>   
                 
            </div>
    
            <div class="col_1">
            
                <h3>Useful Links</h3>
                <ul>
                    <li><a href="#">NetTuts</a></li>
                    <li><a href="#">VectorTuts</a></li>
                    <li><a href="#">PsdTuts</a></li>
                    <li><a href="#">PhotoTuts</a></li>
                    <li><a href="#">ActiveTuts</a></li>
                </ul>   
                 
            </div>
    
            <div class="col_1">
            
                <h3>Other Stuff</h3>
                <ul>
                    <li><a href="#">FreelanceSwitch</a></li>
                    <li><a href="#">Creattica</a></li>
                    <li><a href="#">WorkAwesome</a></li>
                    <li><a href="#">Mac Apps</a></li>
                    <li><a href="#">Web Apps</a></li>
                </ul>   
                 
            </div>
    
            <div class="col_1">
            
                <h3>Misc</h3>
                <ul>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Flash</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">More...</a></li>
                </ul>   
                 
            </div>
            
        </div><!-- End 4 columns container -->
    
    </li><!-- End 4 columns Item -->

	<li class="menu_right"><a href="#" class="drop">1 Column</a>
    
    <div class="dropdown_1column align_right">
        
                <div class="col_1">
                
                    <ul class="simple">
                        <li><a href="#">FreelanceSwitch</a></li>
                        <li><a href="#">Creattica</a></li>
                        <li><a href="#">WorkAwesome</a></li>
                        <li><a href="#">Mac Apps</a></li>
                        <li><a href="#">Web Apps</a></li>
                        <li><a href="#">NetTuts</a></li>
                        <li><a href="#">VectorTuts</a></li>
                        <li><a href="#">PsdTuts</a></li>
                        <li><a href="#">PhotoTuts</a></li>
                        <li><a href="#">ActiveTuts</a></li>
                        <li><a href="#">Design</a></li>
                        <li><a href="#">Logo</a></li>
                        <li><a href="#">Flash</a></li>
                        <li><a href="#">Illustration</a></li>
                        <li><a href="#">More...</a></li>
                    </ul>   
                     
                </div>
                
    </div>
        
	</li>

    <li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
    
        <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
            
            <div class="col_3">
                <h2>Lists in Boxes</h2>
            </div>
            
            <div class="col_1">
    
                <ul class="greybox">
                    <li><a href="#">FreelanceSwitch</a></li>
                    <li><a href="#">Creattica</a></li>
                    <li><a href="#">WorkAwesome</a></li>
                    <li><a href="#">Mac Apps</a></li>
                    <li><a href="#">Web Apps</a></li>
                </ul>   
    
            </div>
            
            <div class="col_1">
    
                <ul class="greybox">
                    <li><a href="#">ThemeForest</a></li>
                    <li><a href="#">GraphicRiver</a></li>
                    <li><a href="#">ActiveDen</a></li>
                    <li><a href="#">VideoHive</a></li>
                    <li><a href="#">3DOcean</a></li>
                </ul>   
    
            </div>
            
            <div class="col_1">
    
                <ul class="greybox">
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Flash</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">More...</a></li>
                </ul>   
    
            </div>
            
            <div class="col_3">
                <h2>Here are some image examples</h2>
            </div>
            
            <div class="col_3">
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>
    
                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>
            </div>
        
        </div><!-- End 3 columns container -->
        
    </li><!-- End 3 columns Item -->

</ul>

Собственно, размеры и оформление панели находятся в файле из хтмл-низ, который можно перенести в КСС и удалить строку.

0

2

  • Автор: Haylin
  • Experimentia est optima rerum magistra
  • Haylin
  • Зарегистрирован: 04-08-2012
  • Приглашений: 0
  • Сообщений: 40
  • Уважение: 0
  • Позитив: +3
  • Пол: Женский
  • Провел на форуме:
    18 часов 55 минут
  • Последний визит:
    27-05-2013 16:00:52

После установки тексты в навигации потеряли все параметры

ссылка

Должны быть жирненькими, 18 кеглем и стоять посередине. Плюс не действует скрипт псевдо флешанимации в новигации. Это можно как-то исправить

0

3

  • Автор: morgan
  • главный по горшкам
  • morgan
  • Зарегистрирован: 27-07-2012
  • Приглашений: 0
  • Сообщений: 4222
  • Уважение: +1775
  • Позитив: +1413
  • Пол: Мужской
  • Провел на форуме:
    2 месяца 25 дней
  • Последний визит:
    12-03-2019 02:02:54

Haylin
Дайте отредактированный код этой панели и флеш.

0

4

  • Автор: Haylin
  • Experimentia est optima rerum magistra
  • Haylin
  • Зарегистрирован: 04-08-2012
  • Приглашений: 0
  • Сообщений: 40
  • Уважение: 0
  • Позитив: +3
  • Пол: Женский
  • Провел на форуме:
    18 часов 55 минут
  • Последний визит:
    27-05-2013 16:00:52

Код панели (в объявлении)

Код:
<ul id="menu">
    
    <li><a href="#" class="drop">Приветствие</a><!-- Begin Home Item -->
    
        <div class="dropdown_2columns"><!-- Begin 2 columns container -->
    
            <div class="col_2">
                <h2>Добро пожаловать!</h2>
            </div>
    
            <div class="col_2">
                <p>Доброго Вам времени суток, уважаемый гость. Рады, что Вы забрели на наш форум, надеемся, что Вы найдете его интересным и захотите стать членом нашей дружной форумной семьи.</p>             
                <p></p>             
            </div>
    
            <div class="col_2">
                <h2>Об игре</h2>
            </div>
            
            <div class="col_1">
                <img src="http://s1.uploads.ru/ALgjz.jpg" width="100" height="100" alt="" />
            </div>
            
            <div class="col_1">
                <p>Эпизодическая ролевая игра в жанре фантастики, с активным типом мастеринга и рейтингом NC-17</p>
            </div>
          
        </div><!-- End 2 columns container -->
    
    </li><!-- End Home Item -->

    <li><a href="#" class="drop">Информация</a><!-- Begin 5 columns Item -->
    
        <div class="dropdown_5columns"><!-- Begin 5 columns container -->
        
            <div class="col_5">
                <h2>Администрация форума:</h2>
            </div>
            
            <div class="col_1">
<p class="black_box">   <img src="http://s1.uploads.ru/ALgjz.jpg" width="100" height="100" alt="" /></p>
                <p class="strong">Виктория Волкова. Главный администратор форума.</p>
            </div>
            
            <div class="col_1">
<p class="black_box"><img src="http://s1.uploads.ru/ALgjz.jpg" width="100" height="100" alt="" /></p>
                <p class="strong">Администратор форума.</p>
            </div>
            
            <div class="col_1">
<p class="black_box"><img src="http://s1.uploads.ru/ALgjz.jpg" width="100" height="100" alt="" /></p>
                <p class="strong">Главный модератор форума.</p>
            </div>
            
            <div class="col_1">
<p class="black_box"><img src="http://s1.uploads.ru/ALgjz.jpg" width="100" height="100" alt="" /></p>
                <p class="strong">Модератор форума.</p>
            </div>

<div class="col_1">
<p class="black_box"><img src="http://s1.uploads.ru/ALgjz.jpg" width="100" height="100" alt="" /></p>
                <p class="strong">Модератор форума.</p>
            </div>
        
            <div class="col_5">
                <h2>Последние новости</h2>
            </div>
           
            <div class="col_3">
            
                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Читать полностью...</a></p>
        
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Читать полностью...</a></p>
            
            </div>
            
            <div class="col_2">
            
                <p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
            
            </div>
        
        </div><!-- End 5 columns container -->
    
    </li><!-- End 5 columns Item -->

    <li><a href="#" class="drop">Ссылки</a><!-- Begin 4 columns Item -->
    
        <div class="dropdown_4columns"><!-- Begin 4 columns container -->
        
            <div class="col_4">
                <h2>Навигация по форуму</h2>
            </div>
            
            <div class="col_1">
            
                <h3>Гостям</h3>
                <ul>
                    <li><a href="#">Правила</a></li>
                    <li><a href="#">Сюжет</a></li>
                    <li><a href="#">Текущий квест</a></li>
                    <li><a href="#">Вид</a></li>
                    <li><a href="#">Группировки</a></li>
                    <li><a href="#">Способности</a></li>
                    <li><a href="#">Список персонажей</a></li>
                    <li><a href="#">Гостевая книга</a></li>
                </ul>   
                 
            </div>
    
            <div class="col_1">
            
                <h3>Написание анкеты</h3>
                <ul>
                    <li><a href="#">Шаблон</a></li>
                    <li><a href="#">В помощь</a></li>
                    <li><a href="#">Занятые внешности</a></li>
                    <li><a href="#">Мастерская</a></li>
                </ul>   
                 
            </div>
    
            <div class="col_1">
            
                <h3>Начало игры</h3>
                <ul>
                    <li><a href="#">Поля профиля</a></li>
                    <li><a href="#">Поиск партнера</a></li>
                    <li><a href="#">Открытие эпизода</a></li>
                    <li><a href="#">Закрытие эпизода</a></li>
                    <li><a href="#">Отсутствие/Уход</a></li>
                </ul>   
                 
            </div>
    
            <div class="col_1">
            
                <h3>О мире</h3>
                <ul>
                    <li><a href="#">Об Арии</a></li>
                    <li><a href="#">Политика</a></li>
                    <li><a href="#">Культура</a></li>
                    <li><a href="#">Техника</a></li>
                    <li><a href="#">Корпорации</a></li>
                    <li><a href="#">Оружие</a></li>
                    <li><a href="#">Зверинец</a></li>
                </ul>   
                 
            </div>
            
        </div><!-- End 4 columns container -->


<li><a href="#" class="drop">Сейчас в игре</a><!-- Begin Home Item -->
    
        <div class="dropdown_2columns"><!-- Begin 2 columns container -->
    
            <div class="col_2">
                <h2>Текущие события</h2>
            </div>
    
            <div class="col_2">
                <p>Народ Арии недоволен нововведениями правительства. Общество разделяется на желающих насильственным путем изменить политику города, и на отчаянно старающихся не быть накрученными на маховик репрессий.</p>             
                <p>Люди неожиданно решают указать всем другим видам, а особенно индиго на их "место у параши". Начинаются вооруженные столкновения</p>             
            </div>
    
            <div class="col_2">
                <h2>Даты и погода</h2>
            </div>
            
            <div class="col_1">
                <img src="http://s1.uploads.ru/ALgjz.jpg" width="100" height="100" alt="" />
            </div>
            
            <div class="col_1">
                <p>1 сентября 2312 года - 1 октября 2312 года</p>             
                <p>Климат изменился, потому в сентябре по-летнему тепло.</p> 
            </div>
          
        </div><!-- End 2 columns container -->
    
    </li><!-- End 4 columns Item -->


<li><a href="#" class="drop">Партнеры</a><!-- Begin Home Item -->
    
        <div class="dropdown_2columns"><!-- Begin 2 columns container -->
    
            <div class="col_2">
                <h2>Дружественные форумы</h2>
            </div>
    
            <div class="col_2">
                <p><a href="http://gotham.f-rpg.ru/" target="_blank"><img src="http://i45.tinypic.com/2uzv50l.png" border="0" alt="DC: Gotham City"></a><a href="http://theavengersassemble.rolka.su" title="Avengers: This is War" target='_blank'><img src="http://s1.uploads.ru/i/tlDSr.gif"></img></a></p>             
            </div>

          
        </div><!-- End 2 columns container -->
    
    </li><!-- End Home Item -->

    <li class="menu_right"><a href="#" class="drop">Конкурсы</a><!-- Begin 3 columns Item -->
    
        <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
            
            <div class="col_3">
                <h2>Lists in Boxes</h2>
            </div>
            
            <div class="col_1">
    
                <ul class="greybox">
                    <li><a href="#">Голосование: лучший пост</a></li>
                </ul>   
    
            </div>
            
            <div class="col_1">
    
                <ul class="greybox">
                    <li><a href="#">Голосование: лучший игрок</a></li>
                </ul>   
    
            </div>
            
            <div class="col_3">
                <h2>Наши победители</h2>
            </div>
            
            <div class="col_3">
                <img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>Лучший пост<a href="#">Read more...</a></p>
    
                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>лучший игрок. <a href="#">Read more...</a></p>

                <img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>лучший эпизод (по версии администрации)<a href="#">Read more...</a></p>
            </div>
        
        </div><!-- End 3 columns container -->
        
    </li><!-- End 3 columns Item -->

<li class="menu_right"><a href="#" class="drop">Эпизоды</a>
    
    <div class="dropdown_1column align_right">
        
                <div class="col_1">
                
                    <ul class="simple">
                        <li><a href="#">Эпизод 1</a></li>
                        <li><a href="#">Эпизод 2</a></li>
                        <li><a href="#">Эпизод 3</a></li>
                        <li><a href="#">Эпизод 4</a></li>
                        <li><a href="#">Эпизод 5</a></li>
                    </ul>   
                     
                </div>
                
    </div>
        
	</li>

</ul>

а код флеш-меню уже удалила и найти не могу. На самом деле мне просто нужно, чтобы навигация была обычной, то есть прописанной в самом дизайне цвет и жирный шрифт, а после установки этой панели у меня не жирность не отображается, ни размер шрифта не меняется

0

5

  • Автор: morgan
  • главный по горшкам
  • morgan
  • Зарегистрирован: 27-07-2012
  • Приглашений: 0
  • Сообщений: 4222
  • Уважение: +1775
  • Позитив: +1413
  • Пол: Мужской
  • Провел на форуме:
    2 месяца 25 дней
  • Последний визит:
    12-03-2019 02:02:54

Haylin
Я запутался. Текстовые эффекты какой навигации? Стандартной, то бишь "форум, участники и т.д." или самой панели? Если стандартной - проблема может быть в том, что скрипт использует кодировку menu, а форум может применять заданные значения для этой панели и своей навигации. Попробуйте сменить кодировку на любую другую, не забывая изменять её как в ксс, так и в хтмл. Если речь идёт о самой панели - эти параметры задаются в ксс, так-что мне нужно посмотреть на них)

0

Страница: 1

Вы здесь » COLOR MATE » Каталог CSS|JS » CSS3 Выпадающее мега меню