Перейти к содержимому



Переделать горизонтальное меню в вертикальное

#1 badman
badman
  • Неактивные
  • 110 сообщений
  • Репутация: 5
0

Обновлено 04 мая 2013 - 17:10  Отправлено 03 мая 2013 - 08:27

Сайт http://ctpoika22.ru/ в верхнем меню нужно сделать горизонтальное меню, а не вертикальное как сейчас. Плюс увеличить шрифт и убрать слово "Страницы". Правильно я понимаю, что все эти действия нужно проделывать в style.css? И если да, то какой блок там нужно отыскивать?

Изображение

 

 

  • 0

#2 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 03 мая 2013 - 10:55

Нет. Не правильно.

  • Для начала. У вас тема WP, хитро-скроенная в стиле а ля Франкенштейн. Т.е. кто-то над ней долго и со знанием дела издевался, накладывая слои один на другой, в результате страница сайта рисует массу всякой информации, которую посетитель не увидит, потому что она перекрыта другой информацией.

    Т.е. к примеру, на страницу выводятся блок с поиском, блок с меню, еще куча блоков с классом "site-description". Большую часть из них не видно.

    Один из блоков "site-description" (из тех что видны, т.е. не перекрыты другими) содержит тот самый список:
    <div class="site-description"><h2 class="widgettitle">Страницы</h2>
    <ul>
    <li class="page_item page-item-167"><a href="http://ctpoika22.ru/kontakty/">Контакты</a></li>
    <li class="page_item page-item-156"><a href="http://ctpoika22.ru/price/">Прайс</a></li>
    </ul>
    </div>
  • Отсюда вывод: чтобы сделать меню на сайте можно
    1) Либо воспользоваться этим списком, стилизовав его. Т.е. дать ему id или class (это делается в html-файле, в случае с WP не уверен, где оно там точно живет ибо не влезал туда) и описать их в стилях (это делается в css-файле).
    2) Либо воспользоваться уже существующим блоком меню:
    <div class="menu">
    <ul id="menu-top-menu" class="">
    <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-19"><a title="ctpoika22" href="http://ctpoika22.ru/">Главная</a></li>
    <li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-170"><a href="http://ctpoika22.ru/kontakty/">Контакты</a></li>
    <li id="menu-item-171" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-171"><a href="http://ctpoika22.ru/price/">Прайс</a></li>
    </ul>
    </div>
    , как-то вытащив его из под наслоений других блоков, а затем и уже править его стили в вашем http://ctpoika22.ru/...sight/style.css Благо там какие-то стили для этого блока уже есть (хотя они для вертикального варианта меню и под горизонтальный их переделывать надо будет):
    .menu {width: 100px; padding-right: 30px; float: right;}
    .menu ul {margin-top: 35px;}
    .menu li {font-size: 11px; text-transform: uppercase; margin: 6px 0;}
    .menu a {color: #000; text-decoration: none;}
    .menu a:hover {text-decoration: underline;}

  • 0

#3 isvetlichniy
isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 03 мая 2013 - 14:37

Отсюда вывод: чтобы сделать меню на сайте можно


чего то ты намудрил и уже хочешь изобретать велосипед.
можно ничего не меняя, в файле style.css в самом низу дописать

1. чтобы убрать строчку "Страницы"
.site-description .widgettitle {
display: none;
}

ну а для меню сделать вот что
.site-description ul li{
float: left;
padding: 0 10px;
display: block;
}
.site-description ul li a{
font-size: 14px;
}

этого должно хватить
P.S. Мой способ позволит избежать редактирования структуры шаблона, я не думаю что ТС это будет под силу
P.P.S. Шаблон действительно через одно место сделан, рекомендую автору поудалять неиспользуемые виджеты, типа поиск, архивы и т.д.
  • 0

#4 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 03 мая 2013 - 14:56

чего то ты намудрил и уже хочешь изобретать велосипед.

Где вы увидели мудрость и велосипед?

То что вы написали — тоже самое, что у меня в первом пункте ("воспользоваться этим списком, стилизовав его"). Только с готовым решением, которое учитывает тот факт, что все прочие блоки "site-description" перекрыты другой инфой. Потому и можно этот класс использовать для оформления меню. Проблемы могут возникнуть лишь, если потом таки возникнет желание этими виджетами воспользоваться.

А второй пункт я привел, как более правильный с точки зрения семантики и здравого смысла: там под меню отряжается не виджет, а уже существующий на сайте блок под названием "menu".
  • 1

#5 isvetlichniy
isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 03 мая 2013 - 15:03

там под меню отряжается не виджет, а уже существующий на сайте блок под названием "menu"

это однозначно будет правильней, но...

кстати, я так и не понял почему автор меню делает с помощью виджета
  • 1

#6 badman
badman
    Topic Starter
  • Неактивные
  • 110 сообщений
  • Репутация: 5

Отправлено 04 мая 2013 - 07:17

Спасибо, помогло)

isvetlichniy, Это чем-то чревато?


  • 0

#7 isvetlichniy
isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 04 мая 2013 - 17:10

нет, просто смысл какой? ворпресс обладает хорошим функционалом для создания меню.
почитай вот


  • 0



Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 22.5 3 темы, 6 сообщений, 1 балл репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 18 Вне конкурса за определение пользователя месяца

  • Фотография SergiuS85
    #3

    SergiuS85
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография kuztoday
    #4

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография Megoydagi
    #5

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография mkreine
    #6

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография kolver
    #7

    kolver
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография Totti
    #8

    Totti
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Фотография fedornabilkin
    #10

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru