Офіційна українська підтримка форуму phpBB3

Просте меню, що випадає для стилю Prosilver

Якщо ви хочете зробити меню з безліччю пунктів, але при цьому компактне і акуратне - значить, це має бути меню.

Загальний випадок

Відкриваємо файл styles/prosilver/template/overall_header.html та знаходимо код панелі навігації. Її посилання виконані як елементи списку:

  • ,
  • і т. п. Додаємо до цього списку новий елемент:
  • Замість icon-ucp можемо використовувати будь-який стандартний клас, що визначає фонову картинку: icon-faq, icon-members, icon-home, icon-ucp, icon-register, icon-logout, icon-bookmark, icon-bump, icon-subscribe, icon-unsubscribe, icon-pages, icon-search.

    Далі відкриваємо файл styles/prosilver/theme/links.css і додаємо до нього наступні рядки:

    Окремий випадок

    Робимо нове меню зліва від посилання «Особистий розділ» (див. рисунок 2).

    Замінюємо цей код наступним: Далі додаємо кілька рядків у файл links.css, як описано вище у «Загальному випадку».

    Меню з картинками

    Робимо меню з фоновими картинками у кожному пункті (див. рисунок 3).

    Замість таких рядків:

    Пишемо такі: Використовуємо тут одне із класів, визначальних фонову картинку: icon-faq, icon-home тощо. буд. Усі ці класи перераховані вище. А якщо хочемо поставити свою картинку, то кладемо її в папку styles/prosilver/theme/images і пишемо так: Добавка в links.css трохи змінюється і набуває такого вигляду:

    Меню, злите з навігаційною панеллю

    І як остання вправа спробуємо зробити меню, зображене на рис. 4.

    Для цього перепишемо нашу вставку в links.css:

    Майте на увазі, що куточки меню не заокруглюються в IE версії нижче 9 і в Опері нижче 10.50.

    Після внесення будь-яких правок у файли не забувайте оновлювати шаблон татему Prosilver на вкладці «Стилі» адміністрації розділу. Іноді також потрібно натиснути Ctrl+F5 у браузері, щоб змінити CSS.