Меню, що випадає

Відповісти
Аватар користувача

Topic author
Vpoltave
Адміністратор
Адміністратор
Повідомлень: 706
З нами з: 16 серпня 2013 23:18
Звідки: Полтава
Контактна інформація:

Меню, що випадає

#1

Повідомлення Vpoltave » 11 вересня 2013 11:22

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

Наприклад , таке , як на цих сайтах :
http://phpBB.com


Тут я опишу створення найпростішого випадаючого меню для стилю Prosilver . Для прикладу зробимо меню, що складається з п'яти пошукових посилань: «Активні теми » , «Нові повідомлення» , « Непрочитані повідомлення» , «Ваші повідомлення» і « Теми без відповідей ». У чому сенс такого меню ? У стилі Prosilver чотири з п'яти цих посилань доступні тільки з головної сторінки , а я хочу , щоб були доступні з будь-який; але при цьому я не збираюся захаращувати шапку сайту купою посилань , адже вона і так вже перегружена.Image
 
menu_vipadaet.png
меню, що випадає
ЗАГАЛЬНИЙ ВИПАДОК
 
Відкриваємо файл styles/prosilver/template/overall_header.html і знаходимо код панелі навігації. Її посилання виконані у вигляді елементів списку: <li class="icon-faq"> , <li class="icon-members"> і т. п. Додаємо до цього списку новий елемент:
 

Код: Виділити все

<li class="icon-ucp">
    <a href="http://site.ru/0" style="display: block"> Нове меню </ a >
    <div>
        <a href="http://site.ru/1"> Перший пункт меню </ a >
        <a href="http://site.ru/2"> Другий пункт меню </ a >
        <a href="http://site.ru/3"> Третій пункт меню </ a >
    </ div >
</ li >
Замість 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 і додаємо в нього наступні рядки:

Код: Виділити все

. linklist li div {
    position : absolute ;
    display : none ;
    background - color : # ECF3F7 ;
    border : 1px outset # 333333 ;
    z - index : 2 ;
    margin - left : - 11px ;
    width : 182px ;
}
 
. linklist li : hover div {
    display : block ;
}
 
. linklist li div a {
    display : block ;
    text - align : left ;
    padding : 0 10px ;
}
 
. linklist li div a : hover {
    background - color : # E1EBF2 ;
}
 
ПРИВАТНИЙ ВИПАДОК

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

Відкриваємо файл styles / prosilver / template / overall_header.html і шукаємо частина коду , в якій міститься посилання « Особистий розділ » :

Код: Виділити все

<! - IF not S_IS_BOT and S_USER_LOGGED_IN ->
<ul class="linklist leftside">
    <li class="icon-ucp">
        <a href="/{U_PROFILE}" title="{L_PROFILE}" accesskey="e"> { L_PROFILE } </ a >
            <! - IF S_DISPLAY_PM -> ( <a href="/{U_PRIVATEMSGS}"> { PRIVATE_MESSAGE_INFO } </ a > ) <! - ENDIF ->
        <! - IF S_DISPLAY_SEARCH -> •
        <a href="/{U_SEARCH_SELF}"> { L_SEARCH_SELF } </ a >
        <! - ENDIF ->
        <! - IF U_RESTORE_PERMISSIONS -> •
        <a href="/{U_RESTORE_PERMISSIONS}"> { L_RESTORE_PERMISSIONS } </ a >
        <! - ENDIF ->
    </ li >
</ ul >
<! - ENDIF ->
Замінюємо цей код наступним:
 

Код: Виділити все

<! - IF S_DISPLAY_SEARCH or ( S_USER_LOGGED_IN and not S_IS_BOT ) ->
<ul class="linklist leftside">
    <! - IF S_DISPLAY_SEARCH ->
    <li class="icon-search">
        <a href="/{U_SEARCH_ACTIVE_TOPICS}" style="display: block"> { L_SEARCH_ACTIVE_TOPICS } </ a >
        <div id="menu-1">
            <! - IF S_USER_LOGGED_IN ->
            <a href="/{U_SEARCH_NEW}"> { L_SEARCH_NEW } </ a >
            <a href="/{U_SEARCH_UNREAD}"> { L_SEARCH_UNREAD } </ a >
            <a href="/{U_SEARCH_SELF}"> { L_SEARCH_SELF } </ a >
            <! - ENDIF ->
            <a href="/{U_SEARCH_UNANSWERED}"> { L_SEARCH_UNANSWERED } </ a >
        </ div >
    </ li >
    <! - ENDIF ->
    <! - IF not S_IS_BOT and S_USER_LOGGED_IN ->
    <li class="icon-ucp">
        <a href="/{U_PROFILE}" title="{L_PROFILE}" accesskey="e"> { L_PROFILE } </ a >
            <! - IF S_DISPLAY_PM -> ( <a href="/{U_PRIVATEMSGS}"> { PRIVATE_MESSAGE_INFO } </ a > ) <! - ENDIF ->
        <! - IF U_RESTORE_PERMISSIONS -> •
        <a href="/{U_RESTORE_PERMISSIONS}"> { L_RESTORE_PERMISSIONS } </ a >
        <! - ENDIF ->
    </ li >
    <! - ENDIF ->
</ ul >
<! - ENDIF ->
Далі додаємо кілька рядків у файл links.css , як описано вище у «Загальному випадку ».

Готово !

Далі при бажанні ми можемо видалити ( а можемо і не видаляти ) з головної сторінки ряд посилань Теми без відповідей • Непрочитані повідомлення • Нові повідомлення • Активні теми , оскільки вони тепер продубльовані в нашому новому меню. Для цього відкриваємо файл styles / prosilver / template / index_body.html і прибираємо наступні рядки:
 

Код: Виділити все

<! - IF S_DISPLAY_SEARCH ->
    <li> <a href="/{U_SEARCH_UNANSWERED}"> { L_SEARCH_UNANSWERED } </ a > <! - IF S_USER_LOGGED_IN -> • <a href="/{U_SEARCH_UNREAD}"> { L_SEARCH_UNREAD } </ a > • <a href="/{U_SEARCH_NEW}"> { L_SEARCH_NEW } </ a > <! - ENDIF -> • <a href="/{U_SEARCH_ACTIVE_TOPICS}"> { L_SEARCH_ACTIVE_TOPICS } </ a > < / li >
<! - ENDIF ->
  
МЕНЮ з малюнками
Робимо меню з фоновими картинками в кожному пункті (див. малюнок 3).

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

Код: Виділити все

<a href="http://site.ru/1"> Перший пункт меню </ a >
Пишемо такі :

Код: Виділити все

 <a href="http://site.ru/1" class="icon-members"> Перший пункт меню </ a >
Використовуємо тут один з класів , що визначають фонову картинку : icon - faq , icon - home і т. д. Всі ці класи перераховані вище. А якщо хочемо поставити свою картинку , то кладемо її в папку styles / prosilver / theme / images і пишемо так:
 

Код: Виділити все

<a href="http://site.ru/1" style="background-image: url('/{T_THEME_PATH}/images/картинка.gif')"> Перший пункт меню </ a >
Добавка в links.css злегка змінюється і приймає такий вигляд:
 

Код: Виділити все

. linklist li div {
    position : absolute ;
    display : none ;
    background - color : # ECF3F7 ;
    border : 1px outset # 333333 ;
    z - index : 2 ;
    margin - left : - 21px ;
    width : 187px ;
}
 
. linklist li : hover div {
    display : block ;
}
 
. linklist li div a {
    display : block ;
    text - align : left ;
    padding : 0 0 0 20px ;
    background - position : 3px 50%;
    background - repeat : no - repeat ;
}
 
. linklist li div a : hover {
    background - color : # E1EBF2 ;
}
 
 
МЕНЮ , злите з ПАНЕЛЛЮ НАВІГАЦІЇ

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

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

Код: Виділити все

. linklist li div {
    position : absolute ;
    display : none ;
    background - color : # CADCEB ;
    z - index : 2 ;
    margin - left : - 21px ;
    width : 187px ;
    border - radius : 5px ;
    - moz - border - radius : 5px ;
    - webkit - border - radius : 5px ;
    - khtml - border - radius : 5px ;
}
 
. linklist li : hover div {
    display : block ;
}
 
. linklist li div a {
    display : block ;
    text - align : left ;
    padding : 0 0 0 20px ;
    background - position : 3px 50%;
    background - repeat : no - repeat ;
}
Майте на увазі , що куточки меню не будуть скругляются в IE версії нижче 9 і в Опері нижче 10.50 .
  
Примітка . Наше меню прекрасно працює у всіх браузерах ... крім IE6 . Так , знову цей IE6 ! Справа в тому , що для розкриття меню ми використовуємо CSS- властивість hover , яке IE6 не вміє застосовувати до елементів , які не є посиланням . Особисто мені важка доля користувачів IE6 байдужа , але ви , якщо бажаєте , можете зробити милицю для дідка : меню буде розкриватися за допомогою JavaScript . Додайте наступні рядки в файл links.css :
 

Код: Виділити все

* Html . Icon - search {
    scrollbar - face - color : expression ( runtimeStyle.scrollbarFaceColor = '# fff ' , onmouseover = function () { document.getElementById (' menu -1 ') . style.display = ' block '; } , onmouseout = function () { document.getElementById (' menu -1 ') . style.display = ' none '; } ) ;
}
 
 
 
Після внесення будь-яких правок у файли не забувайте оновлювати шаблон і тему Prosilver на вкладці "Стилі" адмніістраторского розділу. Іноді також потрібно натиснути Ctrl + F5 в браузері , щоб стало видно зміни в CSS .
За таким же принципом у вигляді випадаючого меню можна оформити , наприклад , список посилань на дружні сайти. Або швидку навігацію по сайту ( наводимо курсор на значок карти сайту - виникає міні - карта ; наводимо курсор на «Список форумів » - виникає список форумів ) . Або зробити компактне меню користувача з посиланнями на вхід / вихід , реєстрацію , пошук своїх повідомлень і особистий розділ: одне посилання замінить відразу чотири стандартні .




МастерВЕБА
Новачок
Новачок
Повідомлень: 4
З нами з: 09 грудня 2014 17:27

Re: меню, що випадає

#2

Повідомлення МастерВЕБА » 09 грудня 2014 17:54

дуже дякую за інструкцію, тепер і в мене форум з гарним меню.

Відповісти

Хто зараз онлайн

Зараз переглядають цей форум: Немає зареєстрованих користувачів і 0 гостей