Якщо ви хочете зробити меню з безліччю пунктів , але при цьому компактний і акуратне - значить , це має бути меню, що випадає .
Наприклад , таке , як на цих сайтах :
http://phpBB.com
Тут я опишу створення найпростішого випадаючого меню для стилю Prosilver . Для прикладу зробимо меню, що складається з п'яти пошукових посилань: «Активні теми » , «Нові повідомлення» , « Непрочитані повідомлення» , «Ваші повідомлення» і « Теми без відповідей ». У чому сенс такого меню ? У стилі Prosilver чотири з п'яти цих посилань доступні тільки з головної сторінки , а я хочу , щоб були доступні з будь-який; але при цьому я не збираюся захаращувати шапку сайту купою посилань , адже вона і так вже перегружена.Image
- меню, що випадає
Відкриваємо файл 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 >Далі відкриваємо файл 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 ->
Готово !
Далі при бажанні ми можемо видалити ( а можемо і не видаляти ) з головної сторінки ряд посилань Теми без відповідей • Непрочитані повідомлення • Нові повідомлення • Активні теми , оскільки вони тепер продубльовані в нашому новому меню. Для цього відкриваємо файл 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 >Код: Виділити все
<a href="http://site.ru/1" style="background-image: url('/{T_THEME_PATH}/images/картинка.gif')"> Перший пункт меню </ a >Код: Виділити все
. 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 ;
}Примітка . Наше меню прекрасно працює у всіх браузерах ... крім 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 .
За таким же принципом у вигляді випадаючого меню можна оформити , наприклад , список посилань на дружні сайти. Або швидку навігацію по сайту ( наводимо курсор на значок карти сайту - виникає міні - карта ; наводимо курсор на «Список форумів » - виникає список форумів ) . Або зробити компактне меню користувача з посиланнями на вхід / вихід , реєстрацію , пошук своїх повідомлень і особистий розділ: одне посилання замінить відразу чотири стандартні .