Каталог сайта лестницей

Тема в разделе "Другие языки", создана пользователем Bel.site, 3 апр 2017.

XEvil 4.0 Релиз Состоялся!
  1. Bel.site

    Bel.site Создатель

    Регистр.:
    23 апр 2015
    Сообщения:
    42
    Симпатии:
    5
    Добрый вечер друзья, подскажите пожалуйста, как сделать меню лестницей сейчас оно вот такое:
    Screenshot (2).png

    Но хочу сделать вот такое:
    Screenshot (3).png

    Не могу сделать голова уже болит....
     
  2. Provokator86

    Provokator86

    Регистр.:
    27 май 2012
    Сообщения:
    364
    Симпатии:
    219
    Css: margin-left: 10px; к <li> каждого пункта
    Вообще не плохо было бы показать пример кода
     
  3. diex

    diex

    Регистр.:
    21 апр 2013
    Сообщения:
    192
    Симпатии:
    141
    все довольно просто, допишите CSS стиль для вашего меню:

    ul li:nth-child(1) {
    margin-left: 0px!important;
    }
    ul li:nth-child(2) {
    margin-left: 10px!important;
    }
    ul li:nth-child(3) {
    margin-left: 25px!important;
    }
    и т.д.
     
  4. Bel.site

    Bel.site Создатель

    Регистр.:
    23 апр 2015
    Сообщения:
    42
    Симпатии:
    5
    А как сделать что 1 урл был красным как на скрине?
     
  5. diex

    diex

    Регистр.:
    21 апр 2013
    Сообщения:
    192
    Симпатии:
    141
    Как бы в этом же стиле, подставляйте вместо тега свой класс:

    Код:
    li:nth-child(5n + 1) {
        margin-left: 0px;
    }
    li p:nth-child(5n + 1) {
        margin-left: 5px;
    }
    li:nth-child(5n + 2) {
        margin-left: 10px;
    }
    li p:nth-child(5n + 2) {
        margin-left: 15px;
    }
     
  6. Bel.site

    Bel.site Создатель

    Регистр.:
    23 апр 2015
    Сообщения:
    42
    Симпатии:
    5
    Да тоже помогло, только вот ещё вопрос
    Screenshot (2).png
    Чёрточку по меж их <hr> как влепить?
     
  7. diex

    diex

    Регистр.:
    21 апр 2013
    Сообщения:
    192
    Симпатии:
    141
    Чтобы ссылка была красного цвета статически, то нужно прописать для этого элемента:
    li a:nth-child(5n + 3) {
    color: #ff0000;
    }

    Это уже нужно смотреть в шаблоне вывода материалов, через CSS это не могу сделать, можно попробовать с помощью JavaScript, но лучше всего поправьте шаблон вывода новостей.
     
    Последнее редактирование модератором: 4 июл 2017
  8. Bel.site

    Bel.site Создатель

    Регистр.:
    23 апр 2015
    Сообщения:
    42
    Симпатии:
    5
    Screenshot (3).png Не выходит чтоб урл 1 был красным
     
  9. diex

    diex

    Регистр.:
    21 апр 2013
    Сообщения:
    192
    Симпатии:
    141
    Вот так попробуйте:
    ul li:nth-child(3) a {
    color: #f00!important;
    }
     
    Bel.site нравится это.
  10. Bel.site

    Bel.site Создатель

    Регистр.:
    23 апр 2015
    Сообщения:
    42
    Симпатии:
    5
    А можете подсказать, как до этого элемента дойти?? Череп сломал уже
    Без имени-8.png