как сделать чтобы меню было на каждой странице
Как сделать чтобы меню было на каждой странице
Создание простейшего меню на все страницы — дело нехитрое. Нужно просто заключить его html-текст в document.write(), поместить в файл.js и вызывать этот файл в определённом месте каждой страницы.
Предположим, у нас есть такое меню:
Пишем на пустой странице (либо в простом блокноте, либо создав в редакторе HTML чистый, без тэгов, лист):
Учтите, что всё это пишется в одну строку, без перевоода каретки!
Обратите также внимание, что вся строка заключена в двойные кавычки, а внутри тэгов используются одиночные. Можно и наоборот. Но кавычки должны быть разные!
Точка с запятой в конце в данном случае не обязательна, просто я стараюсь соблюдать «правила хорошего тона», чтобы поставить это «на автомат» и не «лохануться» в большом и запутанном скрипте, где подобная «иголка в стоге сена» (вернее, её отсутствие) может всё испортить.
Теперь сохраняем эту страницу, допустим, как menu.js, а на страницах сайта — там, где должно быть меню — вставляем:
Простейший скрипт меню готов!
Но у такого меню есть особенность, лично для меня, человека довольно рассеянного, весьма неприятная. Когда, находясь на главной странице, в задумчивости, или же просто промахнувшись, щёлкнешь по ссылке «Главная», она начнёт занудно перезагружаться. Когда я делаю меню «руками», то всегда убираю тэг со ссылки на текущую страницу и даже выделяю её другим цветом.
(Для этого достаточно просто задать один стиль CSS для div’а, в котором находится текст ссылки — в нашем примере это mymenu, а другой — для самой ссылки, в примере — mylink. При изъятии тэга ссылки вместо mylink будет отображаться mymenu. Из дизайнерских соображений я бы посоветовал сделать стиль mymenu таким же, как mylink:hover.)
Но однажды мне надоело делать меню руками, и я попробовал создать такой скрипт, в котором были бы учтены мои «эстетские» требования.
Давайте помыслим логически: что для этого нужно?
Во-первых, чтобы было два варианта каждого пункта меню: со ссылкой и без неё.
Во-вторых, чтобы скрипт понимал, где какой пункт выводить, и по инструкции if вставлял нужный вариант.
Предположим, заголовки у нас такие:
Тогда скрипт может выглядеть примерно так:
Примечание: Именно такие, двойные знаки равенства.
В принципе, и этот скрипт готов. Но если Васин приятель Шурик Пушкинг тоже сделал свой сайт и попросил у Васи скрипт, то ему придётся до-о-олго в нём ковыряться. А если он вдобавок рассеян и ленив, вроде меня?
Тогда можно обеспечить «скриптоносцам» чуть более красивую жизнь, а скрипту — чуть более шустрый бег.
Не поленимся сделать два файла.js. Один будет содержать переменные для настройки содержания, и вставлять его нужно между и ; а другой — собственно меню, и вставляться он будет «на месте происшествия».
Сначала самое простое: запихнём в переменные все повторяющиеся тэги:
Теперь мы можем записать:
Это чуть короче, а главное — можно единожды отредактировать стили CSS, записав их имена в переменные, а не делать этого в каждом пункте. Можно и ещё чуть укоротить код, добавив дополнительные переменные:
А теперь самое главное: обработаем заголовки страниц, названия пунктов меню и адреса ссылок. Для этого воспользуемся массивами. Их можно наращивать, не запутывая ситуацию изобретением новых имён переменных.
Но для таких заголовков, как у Васи Пупкинда, с гордо повторяющейся заставкой, я вставил бы (люблю, грешник, оптимизировать до беспредела) ещё одну переменную:
Переходим к объявлению массивов.
То есть, как Вы понимаете, если такого повтора нет, переменную tit можно выкинуть и из объявления, и из массива. Или оставить на всякий пожарный, но присвоить ей значение var tit=»».
Теперь — аналогично — массив пунктов меню:
Если заголовки страниц абсолютно точно (до последнего препинака и регистра букв) совпадают с пунктами меню, то можно второй массив не объявлять, а использовать вместо него первый. Хотя. всё течёт, всё изменяется. Если использовать скрипт всерьёз и надолго, и не на одном сайте, то, пожалуй, в любом случае лучше оставить оба.
Наконец, массив адресов ссылок:
Распределяем по файлам.
1. mymenudef.js (ссылка на него вставляется в )
Как видите, здесь очень легко отредактировать все значения, а также добавить в массивы новые элементы с соответсствующими порядковыми номерами.
2. mymenuwrite.js (ссылка на него вставляется вместо меню)
Вот это, собственно, и есть меню. Ни одного слова по-русски. Зато не надо ничего редактировать. Только, если понадобится, добавить блоки if-else для новых пунктов, заменив порядковые номера элементов массивов.
Однако это можно сделать меньше и проще. Кроме того, не будет нужды в редактировании кода вывода при добавлении в меню новых пунктов. Для этого нужно использовать цикл for:
Послесловие, возникшее после посещения форума ТвойWeb
И даже легче, чем для текстового.
Вот схематический пример:
Естественно, если кнопки будут не прямоугольные, а какой-нибудь причудливой формы, то задача несколько усложнится (для web-дизайнера, но не для скрипта).
Создаем выпадающее меню CSS
Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:
Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:
После применения стилей у нас должно получиться нечто вроде этого:
Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):
Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :
Если все сделано правильно, у вас должно получиться нечто вроде этого:
Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.
Добавляем индикатор выпадающего списка
Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):
Значит, вы все сделали правильно.
В завершение
Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.
Как оставить главное меню на всех страницах сайта?
Подскажите, как можно сделать, чтобы на всех страницах сайта шапка («Контакты», «Пункт меню 2» и пр.) оставалась, но при этом не писать в каждом файле, н-р, contacts.htm код этого самого меню? Конечно, если это возможно реализовать.
Картинка внешнего вида
| Комментарий модератора | ||
| ||
Скрыть главное меню в акаунте и оставить только пользовательское
Здравствуйте,у меня такая проблема Есть сайт,на сайте Главное меню и меню пользователя,и у меня.
Как сделать, чтобы главное меню сайта вытянулось в одну линию?
Не получается растянуть меню на странице сайта. Оно идет в две линии, а надо в одну.
Как убрать Название сайта на всех страницах
Такая ситуация что название страницы генерируется на всех страницах так же на главной. Вот только.
Как сделать шапку и меню постоянными на всех страницах html?
Есть страницы в html, также есть меню, стиль которого написан в css. Как сделать это меню.
CSS меню
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
Как сделать меню сайта
Укажите абсолютную ссылку на страницу, например:
http://mysite.com/about
Либо относительную:
/about
Адреса отдельных страниц задаются в настройках каждой страницы:
Не указывайте внутренний адрес страницы в редакторе Тильды, например:
По этому адресу открыть страницу можете только вы. В меню она работать не будет.
Чтобы сделать меню сразу для всех страниц проекта (сайта), создайте пустую страницу, добавьте на нее блок меню и настройте его. Затем перейдите в настройки сайта, на вкладку «Шапка и подвал» и назначьте эту страницу как Header. Нажмите «Опубликовать все страницы».
Чтобы сделать меню для навигации внутри страницы, пропишите в ссылках номера блоков (ссылка будет выглядеть как #rec2081259), на которые должны переходить пользователи по нажатию на пункт меню. Номер каждого блока указан в настройках блока.
Если вы хотите, чтобы в ссылке был не номер блока, а название раздела, используйте якорные ссылки.
Чтобы сделать двуязычный сайт, создайте два проекта. Обычно удобно сделать сначала версию на одном языке, а потом скопировать проект и перевести на другой язык.
Настройте «шапку» в обоих проектах, добавив в нее блок меню, в котором есть настройка языков: ME204, МЕ301, ME302, ME303, ME304, ME401, МЕ402, МЕ403. В содержании блока укажите языки и ссылки на проекты.
Добавьте на страницу блок меню.
Чтобы добавить второй уровень, нажмите на «+», укажите заголовок подпункта и его ссылку. Нажмите на «+» несколько раз, чтобы добавить необходимое количество подпунктов.
Добавьте на страницу любой блок меню — это будет меню первого уровня. Затем добавьте блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке МЕ601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus