Публикации

Форумы

Как реализовать раскрывающееся (выпадающее) меню
 

Как реализовать раскрывающееся (выпадающее) меню

1 2 3  
Модераторы: Патрик, net1313, Predator, Perfecthus, Kapman
Автор Добавил
Offline Real
02.12.13 - 17:48
Real

Сообщений: 1236
– Цитата: 
А как прилепить к e107 Делаем мега меню. я так и не разобрался. Ну не знаю я что куда влепить.
я это меню наверное раза с третьего раскурил, там всё построено на CSS свойствах псевдокласса :hover

Predator: в твоём уроке в п.7 в коде используются тире(минусы) для комментариев в коде... wtf? Может быть всётаки два слеша или # (решетко) ?
А в CSS вообще только так: /* камент */
Вот тут: + Показать
Учите матчасть, говоришь?

p.s. п.6 прям порадовал


Всё, что существует на свете, когда-то было мечтой.
Вернуться наверх
Популярность сообщения: 1
 
Рекламный блок
VPS
Наверх

Offline magician
02.12.13 - 18:07
magician

Сообщений: 21
// - текст не правился, а брался с урока. Забрал // ошибка осталась

Коментарии убрал - ошибка осталась
Вернуться наверх
Популярность сообщения: 0
 
Offline Predator
02.12.13 - 18:31
Predator


Сообщений: 4039
– Цитата: 
Коментарии убрал - ошибка осталась

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


Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 1
 
Offline magician
02.12.13 - 18:46
magician

Сообщений: 21
Сообщение от Predator... 
– Цитата: 
Коментарии убрал - ошибка осталась

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


Кавычки посмотрю

Я русский в школе учил около 1 года (учился в то время когда школьную программу меняли 2 раза на год)
Вернуться наверх
Популярность сообщения: 1
 
Offline Predator
02.12.13 - 19:01
Predator


Сообщений: 4039
– Цитата: 
Я русский в школе учил около 1 года
Причём тут «русский»? Я про синтаксис кода говорю


Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 1
 
Offline magician
03.12.13 - 02:24
magician

Сообщений: 21
2 часа издевательств и мучений и нулевой результат.
Как прилепить "Делаем мега меню" к e107 ч-з "шорткоды".
Видно я баран, и ничего не понимаю за стандартной схемой описаной здесь и в других местах у меня ничего нормального не вышло.
Вернуться наверх
Популярность сообщения: 0
 
Offline Predator
03.12.13 - 12:17
Predator


Сообщений: 4039
Сообщение от magician... 
Как прилепить "Делаем мега меню" к e107 ч-з "шорткоды"
Я же тебе писал уже. Скачай с сайта исходники, в них есть все файлы.


1. Создай в каталоге со своей темой, каталог css
2. Закачай в него файл стилей из исходников menu.css
3. Создай в каталоге с твоей темой шорткод, например: ohuennoemenu.sc
4. В этот файл ohuennoemenu.sc добавь следующий код:
  1. return '<ul id="menu">    <li><a href="#" class="drop">Главная</a><!-- Начало пункта Главная -->        <div class="dropdown_2columns"><!-- Начало контейнера на 2 колонки -->            <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="img/browsers.png" width="125" height="48" alt="" />            </div>            <div class="col_1">                <p>Данное меню было проверено во всех основных браузерах.</p>            </div>        </div><!-- Конец контейнера на 2 колонки -->    </li><!-- Конец пунтка Главная -->    <li><a href="#" class="drop">5 колонок</a><!-- Начало пунтка 5 колонок -->        <div class="dropdown_5columns"><!-- Начало контейнера на 5 колонок -->            <div class="col_5">                <h2>Это пример большого контейнера с 5 колонками</h2>            </div>            <div class="col_1">                <p class="black_box">Это текст в темно сером прямоугольнике. 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">Пример текста, написанного курсивом. 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">Пример текста, написанного жирным шрифтом. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</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="#">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">Пример темного прямоугольника. Вы можете использовать его для выделения контента. 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><!-- Конец контейнера на 5 колонок -->    </li><!-- Конец пункта 5 колонок -->    <li><a href="#" class="drop">4 колонки</a><!-- Начало пунтка 4 колонки -->        <div class="dropdown_4columns"><!-- Начало контейнера на 4 колонки -->            <div class="col_4">                <h2>Пример заголовка</h2>            </div>            <div class="col_1">                <h3>Пример ссылок</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>Еще один пример ссылок</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>И еще один пример ссылок</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>Последний пример ссылок</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="#">Еще...</a></li>                </ul>            </div>        </div><!-- Конец контейнера на 4 колонки -->    </li><!-- Конец пункта на 4 колонки -->  <li class="menu_right"><a href="#" class="drop">1 колонка</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="#">Еще...</a></li>                    </ul>                </div>            </div>  </li>    <li class="menu_right"><a href="#" class="drop">3 колонки</a><!-- Начало пункта 3 колонки -->        <div class="dropdown_3columns align_right"><!-- Начало контейнера 3 колонки -->            <div class="col_3">                <h2>Список в прямоугольнике</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="#">Еще...</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>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><!-- Конец контейнера на 3 колонки -->    </li><!-- Конец пункта меню 3 колонки --></ul>';


5. Открой файл theme.php своей темы и зарегистрируй этот шорткод, после этой строки:
  1. if (!defined('e107_INIT')) { exit; }

Добавь такую:
  1. $register_sc[] = 'OHUENNOEMENU'; # {OHUENNOEMENU}


6. Открой главный файл стилей своей темы style.css и добавь в него самой первой строчкой, следующий код:
  1. @import url("css/menu.css");


7. Вставляй в переменную $HEADER созданный шорткод, в нужном месте, можешь обернуть его в блок:
  1. <div>{OHUENNOEMENU}</div>


Вроде ничего не забыл, должно работать, в общем тренируйся и как я писал выше, учи «Матчасть»



Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 1
 
Offline magician
03.12.13 - 17:01
magician

Сообщений: 21
Разобрался.
Predator спасибо за последний пост.
Рекомендую с него сделать урок.
И ещё - стосовно "синтаксиса", в конце п4 нужно добавить - ;
Вернуться наверх
Популярность сообщения: 2
 
Offline Predator
03.12.13 - 17:09
Predator


Сообщений: 4039
Сообщение от magician... 
Разобрался
Ну наконец-то

Сообщение от magician... 
Рекомендую с него сделать урок
Да не до уроков мне сейчас

Сообщение от magician... И ещё - стосовно "синтаксиса", в конце п4 нужно добавить - ;
Этот урок писался еще в пору e107.org.ru возможно при обновлении движка и переноса сайта на новый домен/хостинг парсер что-то накосячил



Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 2
 
Offline Predator
10.03.14 - 09:15
Predator


Сообщений: 4039
Сообщение от magician... 
И ещё - стосовно "синтаксиса", в конце п4 нужно добавить - ;
Опечатка



Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 1
 
1 2 3  
Как реализовать раскрывающееся (выпадающее) меню

Перейти:  Вернуться наверх