Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.71/17: Рейтинг темы: голосов - 17, средняя оценка - 4.71
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
1

jQuery меню и Joomla

27.01.2013, 07:23. Просмотров 3193. Ответов 18
Метки нет (Все метки)

Доброго всем времени суток!

Как я понимаю, меню jQuery, а именно создание его пунктов и подпунктов создаётся с помощью тэгов "ul" и "li".
Как сделать, чтобы это меню отображалось на сайте под управлением CMS Joomla 2.5 - я разобрался.
Через "Менеджер меню", в админ панели, создано меню, со всеми пунктами (подпунктами, и т.д.).
Возможно ли "привязать" уже готовое меню (созданное через "Менеджер меню") к jQuery?
Или его необходимо заново верстать в jQuery?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
27.01.2013, 07:23
Ответы с готовыми решениями:

Код JQuery работает стабильно вне Joomla, при include в joomla - ошибка
Код JQuery работает стабильно вне Joomla, при include в joomla - ошибка. И эта ошибка происходит...

jQuery слайдер и Joomla
Мужики, помогите, весь мозг себе вынес уже! Есть слайдер на jQuery, безымянный, не помню уже от...

Не работает Jquery на Joomla 2.5
Перелопатил кучу форумов, потратил много часов, ничего не работает! Хочу сделать фиксированую...

Подключение Jquery к шаблону Joomla
На этом сайте {ссылка удалена} установлен шаблон, в котором уже встроен jquery. Я хочу на сайт...

Меню на jquery 1.3.2
Нашёл симпотичное меню...

18
ask66
53 / 53 / 8
Регистрация: 20.11.2012
Сообщений: 114
27.01.2013, 11:46 2
В джумле, в админке модуля ( дополнительные параметры) есть поле ввода "Суффикс класса модуля". Вносите свой суффикс, например "1". Теперь у нового меню класс не "menu", a "menu1" т.е. уникальный. Возникает задача привязать скрипт к меню. Покажите код скрипта.
1
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
27.01.2013, 14:24  [ТС] 3
Ну, пока временно нашел "слабенькое" меню (без всякой анимации, потому как не получается пока никак с более "красочным (анимированным" - в плане настроить его под дизайн своего сайта).
Вот:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
    <title>Simply Styled jQuery Dropdown</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"/>            
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>   
    <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
</head>
<body>
    <div id="page-wrap">           
        <ul class="dropdown">
            <li><a href="#">Главная</a>
                <ul class="sub_menu">
                    <li><a href="#">Карта сайта</a></li>
                </ul>
            </li>
            <li><a href="#">Строительство домов и коттеджей</a>
                <ul class="sub_menu">
                    <li><a href="#">Как построить дом, и что для этого нужно</a>
                        <ul>
                            <li><a href="#">Поиск участка</a></li>
                            <li><a href="#">Проектирование</a></li>
                            <li><a href="#">Составление сметы</a></li>
                            <li><a href="#">Подписание договора</a></li>
                            <li><a href="#">Подготовительные работы</a></li>
                            <li><a href="#">Фундамент и цокольный этаж</a></li>
                            <li><a href="#">Коробка</a></li>
                            <li><a href="#">Кровля</a></li>
                            <li><a href="#">Монтаж инженерных сетей</a></li>
                            <li><a href="#">Отделочные работы</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Технологии строительства</a>
                        <ul>
                            <li><a href="#">Канадская технология строительства каркасных домов</a></li>
                            <li><a href="#">Несъемная опалубка из пенополистирола</a></li>
                            <li><a href="#">Технология строительства домов из соломенных блоков</a></li>
                            <li><a href="#">Технология монолитного домостроения</a></li>
                            <li><a href="#">Строительство кирпичных домов</a></li>
                            <li><a href="#">Строительство домов из газоблока</a></li>
                            <li><a href="#">Деревянные дома</a></li>
                            <li><a href="#">Строительство по технологии ЛСТК</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Рассчитать стоимость строительства дома</a></li>
                    <li><a href="#">Оформление документации</a></li>
                    <li><a href="#">Наши объекты</a></li>
                    <li><a href="#">Проекты домов</a></li>
                </ul>
            </li>
            <li><a href="#">Коммерческое строительство</a>
                <ul class="sub_menu">
                    <li><a href="#">Строительство авиадоков для малой и средней авиации</a></li>
                    <li><a href="#">Строительство ангаров и складов</a></li>
                    <li><a href="#">Строительство сельскохозяйственных сооружений</a></li>
                    <li><a href="#">Строительство быстровозводимых арочных сооружений</a></li>
                    <li><a href="#">Строительство малозатратных спортивных комплексов</a></li>
                    <li><a href="#">Строительство офисных зданий</a></li>
                    <li><a href="#">Строительство торговых центров</a></li>
                    <li><a href="#">Строительство магазинов</a></li>
                </ul>
            </li>
            <li><a href="#">Инвесторам</a></li>
            <li><a href="#">Ремонт и отделка</a>
                <ul class="sub_menu">
                    <li><a href="#">Демонтажные и подготовительные работы</a></li>
                    <li><a href="#">Декоративные штукатурки</a></li>
                    <li><a href="#">Стены ремонт и отделка</a></li>
                    <li><a href="#">Потолки ремонт и отделка</a></li>
                    <li><a href="#">Полы ремонт и отделка</a></li>
                    <li><a href="#">Окна и двери</a></li>
                    <li><a href="#">Электрика</a></li>
                    <li><a href="#">Сантехника</a></li>
                    <li><a href="#">Рассчитать стоимость ремонта и отделки</a></li>
                    <li><a href="#">Услуги дизайнеров</a></li>
                    <li><a href="#">Фото</a></li>
                    <li><a href="#">3D полы</a></li>
                </ul>
            </li>
            <li><a href="#">Вакансии</a></li>
            <li><a href="#">О Компании</a>
                <ul class="sub_menu">
                    <li><a href="#">Контакты</a></li>
                    <li><a href="#">Реквизиты</a></li>
                    <li><a href="#">Обратная связь</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

А какой именно модуль в админке джумлы создать? Поле ввода "Суффикс класса модуля" - видел во многих модулях.
0
ask66
53 / 53 / 8
Регистрация: 20.11.2012
Сообщений: 114
27.01.2013, 14:53 4
Заходите в администратор джумла. Наверху в "Панели управления" выбираете пункт "Меню" -"Менеджер меню"-"Создать меню". Создаете меню. Затем там же "Меню"-"Ваше созданное меню"-"Создать пункт меню". Создаете все пункты меню.
Если какой-то пункт содержит подпункты, то для подпункта выбираете "родительский элемент". Меню будет создано в типовом модуле джумлы. Все ul u li будут заполнены автоматически. А затем подключите скрипт для управления меню(выпадающее или раскрывающееся или др.)
1
27.01.2013, 14:53
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
27.01.2013, 17:23  [ТС] 5
Что-то не пойму. Есть 3 файла меню:
nav.html (создал модуль вставки html-кода, и разместил в нужной позиции сайта + прописал в него содержимое этого файла)
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html  lang="ru">
 
<head>
<meta charset="utf-8">
 
<link rel="stylesheet" href="http://www.rost-sk.com/templates/rt_juxta/css/nav.css" type="text/css" media="screen" title="no title" charset="utf-8">
 
</head>
<body>
    
<nav class="ph-lift">
        <ul>
            <li class="active"><a href="http://www.rost-sk.com/" data-title="Главная">Главная</a></li>
            <li><a href="http://rost-sk.com/index.php/stroitelstvo-domov-i-kottedzhej" data-title="домов и коттеджей">Строительство</a></li>
            <li><a href="http://rost-sk.com/index.php/kommercheskoe-stroitelstvo" data-title="строительство">Коммерческое</a></li>
            <li><a href="http://rost-sk.com/index.php/investoram" data-title="Инвесторам">Инвесторам</a></li>
            <li><a href="http://rost-sk.com/index.php/remont-i-otdelka" data-title="и отделка">Ремонт</a></li>
            <li><a href="http://rost-sk.com/index.php/vakansii" data-title="Ищите работу?">Вакансии</a></li>
            <li><a href="http://rost-sk.com/index.php/about" data-title="Всё о нас">О Компании</a></li>
        <ul>
</nav>  
 
</body>
</html>

nav.css (положил в http://www.rost-sk.com/templates/rt_juxta/css/nav.css)
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 95%;
  vertical-align: baseline; }
 
 
ol, ul {
  list-style: none; }
 
 
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }
 
 
 
body {
  color: #3e3831;
  background: #f2f2f2 url("http://www.rost-sk.com/templates/rt_juxta/images/nav.jpg") repeat;
  font-family: Numans, sans-serif;
  line-height: 1.5em; }
 
nav {
  min-width: 900px;}
 
nav ul {
  position: relative; }
 
nav > ul:after {
  content: "";
  position: absolute;
  width: 50%;
  border-radius: 40%;
  height: 40px;
  bottom: 0;
  left: 20%;
  box-shadow: 0 0 10px rgba(28, 110, 126, 0.5);
  z-index: -1; }
 
nav > ul:hover:after {
  bottom: 5px; }
 
h2 {
  font-size: 1.5em;
  text-align: center;
  margin-top: 3em;
  margin-bottom: 1em;
  text-shadow: 0 1px 0 white;
  color: #404040;
  color: #4682b4; }
  h2:first-child {
    color: #4682b4; }
 
nav.ph-lift {
  text-align: center; }
  nav.ph-lift > ul {
    display: inline-block;
    position: relative; }
    nav.ph-lift > ul:after {
      box-shadow: 0 0 10px rgba(0, 128, 128, 0.5); }
  nav.ph-lift ul li {
    float: left;
    height: 45px;
    line-height: 70px;
    background: #f0ede2;
    overflow: hidden;
    -webkit-transition: all.6s ease;
    -moz-transition: all.6s ease;
    -o-transition: all.6s ease;
    -ms-transition: all.6s ease;
    transition: all.6s ease; }
    nav.ph-lift ul li:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
      background: #4682b4; }
    nav.ph-lift ul li a {
      display: block;
      text-decoration: none;
      color: #3366bb;
      padding: 0 15px;
      margin-top: 0;
      -webkit-transition: all.6s ease;
      -moz-transition: all.6s ease;
      -o-transition: all.6s ease;
      -ms-transition: all.6s ease;
      transition: all.6s ease; }
    nav.ph-lift ul li:hover a {
      margin-top: -90px;
      color: white;
      text-shadow: 0 1px 2px  black; }
      nav.ph-lift ul li a:after {
        content: attr(data-title);
        display: block; }
 
 
 
nav.ph-lift1 {
  text-align: center; }
  nav.ph-lift1 ul {
    display: inline-block; }
    nav.ph-lift1 ul:after {
      box-shadow: 0 0 10px rgba(85, 107, 47, 0.5); }
  nav.ph-lift1 > ul > li {
    float: left; }
  nav.ph-lift1 ul li {
    height: 80px;
    line-height: 80px;
    background: white;
    -webkit-transition: all.6s ease;
    -moz-transition: all.6s ease;
    -o-transition: all.6s ease;
    -ms-transition: all.6s ease;
    transition: all.6s ease; }
    nav.ph-lift1 ul li ul {
      max-height: 0;
      -webkit-transition: all.6s ease;
      -moz-transition: all.6s ease;
      overflow: hidden;
      display: block; }
    nav.ph-lift1 ul li:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
      background: darkolivegreen; }
    nav.ph-lift1 ul li:hover ul {
      max-height: 300px; }
    nav.ph-lift1 ul li a {
      display: block;
      overflow: hidden;
      text-decoration: none;
      color: #546a2f;
      height: 80px; }
    nav.ph-lift1 ul li ul li a {
      color: #7e7e00; }
    nav.ph-lift1 ul li ul li:hover {
      background: olive; }
    nav.ph-lift1 ul li a span {
        -webkit-transition: all.6s ease;
        -moz-transition: all.6s ease;
        -o-transition: all.6s ease;
        -ms-transition: all.6s ease;
        transition: all.6s ease;
        display: block;
        padding: 0 40px; }
    nav.ph-lift1 ul li:hover > a span {
      margin-top: -80px;
      color: white;
      text-shadow: 0 1px 2px  black; }
    
      
      nav.ph-lift1 ul li a span:after {
        content: attr(data-title);
        display: block; }

nav.jpg (положил в http://www.rost-sk.com/templates/rt_juxta/images/nav.jpg)

и в файле "index.php" шаблона между тэгами <head></head> прописал строку
HTML5
1
<link rel="stylesheet" href="http://www.rost-sk.com/templates/rt_juxta/css/nav.css" type="text/css" media="screen" title="no title" charset="utf-8">
Теперь стиль всего сайта (шрифт, и видимо не только) изменились. Что делаю не так?
0
ask66
53 / 53 / 8
Регистрация: 20.11.2012
Сообщений: 114
27.01.2013, 18:16 6
Вы не устанавливайте пока эти файлы. HTML точно не нужен будет. Весь смысл CMS в том числе и джумла, в том, чтобы как можно меньше лазить в код, а управлять сайтом из админки.
HTML5
1
2
3
4
<div id="header"></br>
<div id="menu">
     <jdoc:include type="modules" name="topmenu1" />
    </div>
Вот участок index.php. В див с идентификатором menu подключаем модуль. topmenu1 это имя позиции.
В администраторе сайта на эту позицию можно привинтить любой модуль. В свою очередь создав меню в менеджере меню, можно к каждому пункту привязать материал, при этом новая страница генирируется автоматически. Также можно менять способ отображения меню, подключая его к разным модулям.
А если просто добавлять хтмл к индексу весь смысл создания сайта на готовом движке теряется.
Наверное надо попросить модераторов перенести тему в "обсуждение Joomla".
1
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
29.01.2013, 18:56  [ТС] 7
Выполнил следующие действия:

Админка Joomla 2.5 --> "Панель управления" --> "Меню" --> "Менеджер меню" --> "Создать меню".

Создал меню. Затем там же "Меню" --> "Main Menu (моё созданное меню)" --> "Создать пункты меню".

Создал все пункты меню, подпункты и т. д., указав соответствующий каждому подпункту "Родительский элемент".

Привязал к каждому пункту и подпункту меню - соответствующий материал.

Далее в "Менеджере меню" в разделе "Модули, связанные с данным меню" --> "Добавить модуль для данного типа меню".
Настроил следующим образом:
  • В левой части "Модуля меню", указал "Заголовок" и "Позицию (существующую в шаблоне, а именно: showcase-a)", "Привязал модуль" на всех страницах, и "Опубликовал".
  • В правой части "Модуля меню", в "Основных параметрах" - выбрал соответствующее меню (Main Menu), "Показывать подпункты меню" - "Да". В "Дополнительных параметрах" "ID Меню" указал - mainmenu, а в "Суффикс CSS-класса модуля" указал - 1.

Нашёл подходящее меню (которое состоит всего из одного файла - index.html).
Вот его содержимое:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html>
<head>
    <title>Навигация по сайту</title>
    <meta charset="utf-8">
    <style>
    body{
        background: #f0ede2;
        /* font: 13px 'trebuchet MS', Arial, Helvetica; */
    }
    
    #menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #menu {
        width: 960px;                                                                                      /* Длина полосы меню */
        margin: 0px auto;
        border: 0px solid #000000;                                                                         /* Бордюр вокруг меню */
        background-color: #b0ab95;                                                                         /* Цвет меню - для IE */
        background-image: -moz-linear-gradient(#444, #111);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));    
        background-image: -webkit-linear-gradient(#ffffff, #b0ab95);                                       /* Цвета меню - градиент - для Chrome */
        background-image: -o-linear-gradient(#444, #111);
        background-image: -ms-linear-gradient(#444, #111);
        background-image: linear-gradient(#ffffff, #b0ab95);                                               /* Цвета меню - градиент - для Opera */
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 0px;                                                                                /* Скруглить углы меню */
        -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        box-shadow: 0px 0px 0px #999999, 1px 1px 0px #999999 inset;                                        /* Тень бордюра вокруг меню */
    }
    
    #menu:before,
    #menu:after {
        content: "";
        display: table;
    }
    
    #menu:after {
        clear: both;
    }
    
    #menu {
        zoom:1;
    }
    
    #menu li {
        float: left;
        border-right: 1px solid #999999;                                                                    /* Цвет бордюра меню 1 */
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #ffffff;                                                                        /* Цвет бордюра меню 2 */
        position: relative;
    }
    
    #menu a {
        float: left;
        padding: 15px 21px;
        color: #000000;                                                                                     /* Цвет текста меню */
        text-transform: uppercase;
        font: bold 9px Arial, Helvetica;                                                                    /* Шрифт меню */
        text-decoration: none;
        text-shadow: 0px 0px 3px #ffffff;                                                                   /* Цвет тени текста меню */
    }
    
    #menu li:hover > a {
        color: #fafafa;                                                                                     /* Цвет текста при наведении курсора */
    }
    
    *html #menu li a:hover { /* Только для IE6 */
        color: #fafafa;                                                                                     /* Цвет текста при наведении курсора */
    }
    
    #menu ul {
        margin: 200px 0 0 0;
        _margin: 0; /*Только для IE6*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 9999;    
        background: #b0ab95;                                                                                /* Цвет подменю - для IE */    
        background: -moz-linear-gradient(#444, #111);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
        background: -webkit-linear-gradient(#b0ab95, #ffffff);                                              /* Цвета подменю - градиент - для Chrome */
        background: -o-linear-gradient(#444, #111); 
        background: -ms-linear-gradient(#444, #111);    
        background: linear-gradient(#b0ab95, #ffffff);                                                      /* Цвета подменю - градиент - для Opera */
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;                                                                                 /* Скруглить углы подменю */
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
 
    #menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }
    
    #menu ul ul {
        top: 0;
        left: 260px;
        margin: 0 0 0 200px;
        _margin: 0; /*Только для IE6*/
        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box-shadow: -1px 0 10px rgba(255,255,255,.3);                                                       /* Тень подменю */
    }
    
    #menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*Только для IE6*/
        -moz-box-shadow: 0px 1px 0px #111, 0px 2px 0px #666;
        -webkit-box-shadow: 0px 1px 0px #111, 0px 2px 0px #666;
        box-shadow: 0 1px 0 #ffffff, 0 2px 0 #999999;                                                       /* Цвета бордюра подменю */
    }
    
    #menu ul li:last-child {   
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;    
    }
    
    #menu ul a {                                                                                            /* Подменю */
        padding: 10px;
        width: auto;                                                                                        /* Ширина подменю */
        _height: 10px; /*Только для IE6*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
        font: 12px Arial, Helvetica;                                                                        /* Шрифт подменю */
        color: #000000;                                                                                     /* Цвет текста подменю */
        text-align: center;                                                                                 /* Выравнивание текста подменю */
        text-shadow: 0px 0px 10px #ffffff;                                                                  /* Цвет тени текста подменю */
    }
    
    #menu ul a:hover {                                                                       
        background-color: #0186ba;                                                                          /* Цвет подменю при наведении курсора - для IE* /
        background-image: -moz-linear-gradient(#04acec,  #0186ba);  
        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background-image: -webkit-linear-gradient(#04acec, #0186ba);
        background-image: -o-linear-gradient(#04acec, #0186ba);
        background-image: -ms-linear-gradient(#04acec, #0186ba);
        background-image: linear-gradient(#04acec, #0186ba);                                                /* Цвета подменю при наведении курсора - градиент - для Opera* /
    }
    
    #menu ul li:first-child > a {
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
    }
    
    #menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444444;
    }
    
    #menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0; 
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-right: 6px solid #3b3b3b;                                                                    /* Цвет стрелки подменю */
    }
    
    #menu ul li:first-child a:hover:after {
        border-bottom-color: #04acec;                                                                       /* Цвет стрелки меню при наведении курсора */
    }
    
    #menu ul ul li:first-child a:hover:after {
        border-right-color: #04acec;                                                                        /* Цвет стрелки подменю при наведении курсора */
        border-bottom-color: transparent;   
    }
    
    #menu ul li:last-child > a {
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
    }
    </style>
 
</head>
<body>
    
        <ul class="mainmenu1" id="mainmenu">
            <li></li>
        </ul>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function() {
      if ($.browser.msie && $.browser.version.substr(0,1)<7)
      {
        $('li').has('ul').mouseover(function(){
            $(this).children('ul').css('visibility','visible');
            }).mouseout(function(){
            $(this).children('ul').css('visibility','hidden');
            })
      }
    });        
</script>
 
</body>
</html>

В шаблон главной страницы, в файл "index.php", между тэгами <body></body> вписал:
HTML5
1
2
3
<div id="mainmenu">
     <jdoc:include type="modules" name="showcase-a" />
    </div>
Результат - меню появляется, в нужной позиции, но в виде списка (как карта сайта).
Уважаемые знатоки, что делать дальше?
0
ask66
53 / 53 / 8
Регистрация: 20.11.2012
Сообщений: 114
29.01.2013, 20:06 8
Найдите в корневой папке Вашего шаблона папку templates/"Имя Вашего шаблона"/css/style.css. Откройте ее в каком нибудь редактор. Рекомендую нотапед(Notaped++). Теперь можно его редактировать. Поместите то, что находится между тегами <style></style> в Вашем index.html из последнего поста. Уберите только body{...}. И вместо "#menu "везде
вставте ".menu1". Просто броузер не видит стилей, потому что они относятся к элементам с идентификаторм "menu", а так получится, что прописываем стили для элементов с классом "menu1".
1
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
29.01.2013, 21:20  [ТС] 9
ask66, выполнил все действия, но результата нет. Всё тот же список пунктов/подпунктов меню. Причём повторяется 2 раза.
0
ask66
53 / 53 / 8
Регистрация: 20.11.2012
Сообщений: 114
29.01.2013, 21:38 10
А стили не поменялись? Дайте ссылку на сайт.

Добавлено через 7 минут
Да еще. Надо не суффикс СSS класса модуля, суффикс класса меню. Там поставте 1.
1
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
29.01.2013, 21:47  [ТС] 11
Нет, стили не поменялись. http://www.rost-sk.com/
0
ask66
53 / 53 / 8
Регистрация: 20.11.2012
Сообщений: 114
29.01.2013, 22:09 12
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
 $(document).ready(function(){
     $('.menu1 ul li').find('ul').prev().addClass('x'); 
     
    $('.menu1 ul li').hover(
        function() {
            $(this).addClass("active");
            $(this).find('ul:first').stop(true, true); // останавливаем всю текущую анимацию
            $(this).find('ul:first').slideDown();
        },
        function() {
            $(this).removeClass("active");        
            $(this).find('ul:first').slideUp('fast');
        });
   });</script>
Вставте этот скрипт в index.php между тегами <head></head>. Понимаете, почему-то суффикс не присвоился. Пропишите "1" в админке меню и там где суффикс CSS-класса, и суффикс класса меню. Если это не поможет в скрипте уберите отсюда $('menu1 ul li') "1" в двух местах. Да, не забывайте сохранять изменения.
1
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
29.01.2013, 22:19  [ТС] 13
ask66, последний Ваш пост пока не выполнял.
В index.php в боди вставил:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="mainmenu">
     <jdoc:include type="modules" name="showcase-a" />
    </div>
<script type="text/javascript">
    $(function() {
      if ($.browser.msie && $.browser.version.substr(0,1)<7)
      {
        $('li').has('ul').mouseover(function(){
            $(this).children('ul').css('visibility','visible');
            }).mouseout(function(){
            $(this).children('ul').css('visibility','hidden');
            })
      }
    });        
</script>

Из "Суффикса CSS-класса модуля" переместил значение "1" в "Суффикс класса меню".
И появилось ожидаемое меню! Но, 2 раза. В чём ошибка?
0
ask66
53 / 53 / 8
Регистрация: 20.11.2012
Сообщений: 114
29.01.2013, 22:22 14
У вас два раза модуль подключен. Посмотрите в админке "Менеджер модулей", там наверное два одинаковых на одной позиции. Удалите один.
1
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
29.01.2013, 22:32  [ТС] 15
Нет, в "Менеджере модулей" всего один модуль опубликован. Может в index.php не так, что-то сделал?

Добавлено через 5 минут
Разве прописывая в index.php:
HTML5
1
2
3
<div id="mainmenu">
     <jdoc:include type="modules" name="showcase-a" />
    </div>
я не дублирую вывод меню?
0
ask66
53 / 53 / 8
Регистрация: 20.11.2012
Сообщений: 114
29.01.2013, 22:36 16
У вас одно меню в <div class="rt-grid-12 rt-alpha rt-omega"> другое в<div id="mainmenu">. Посмотрите в менеджере модулей, там где-то на другой позиции есть меню. Смотрите позиции по своему шаблону, а то может их там много. Отключайте по одной, там есть такая галочка зеленая на красный кружок заменяется.
1
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
29.01.2013, 23:17  [ТС] 17
В этой позиции (showcase-a) было всего 2 модуля - прежнее меню (которое было отключено, а сейчас и вовсе удалено), и собственно нынешнее меню (которое сейчас в процессе установки).

Добавлено через 6 минут
Да, в исходном коде вижу это, но не могу понять, в чём причина...

Добавлено через 4 минуты
Если удаляю из index.php строчки:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="mainmenu">
     <jdoc:include type="modules" name="showcase-a" />
    </div>
<script type="text/javascript">
    $(function() {
      if ($.browser.msie && $.browser.version.substr(0,1)<7)
      {
        $('li').has('ul').mouseover(function(){
            $(this).children('ul').css('visibility','visible');
            }).mouseout(function(){
            $(this).children('ul').css('visibility','hidden');
            })
      }
    });        
</script>
то, остаётся одно меню.

Добавлено через 1 минуту
В принципе, такой вариант устраивает, но как тогда разместить меню по центру?

Добавлено через 15 минут
Решил проблему следующим образом:
в файле index.php шаблона (rt_juxta) между тэгов <body> заменил строки:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
            <?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?>
            <div id="rt-showcase"><div id="rt-showcase2"><div id="rt-showcase3">
              <?php echo $gantry->displayModules('showcase','standard','standard'); ?>
              <div class="clear"></div>
            </div></div></div>
            <?php /** End Showcase **/ endif; ?>

на:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?>
            
              
              <div class="clear"></div>
            
            <div id="mainmenu">
     <jdoc:include type="modules" name="showcase-a" />
    </div>
            <script type="text/javascript">
    $(function() {
      if ($.browser.msie && $.browser.version.substr(0,1)<7)
      {
        $('li').has('ul').mouseover(function(){
            $(this).children('ul').css('visibility','visible');
            }).mouseout(function(){
            $(this).children('ul').css('visibility','hidden');
            })
      }
    });        
</script>
            <?php /** End Showcase **/ endif; ?>
1
ask66
53 / 53 / 8
Регистрация: 20.11.2012
Сообщений: 114
29.01.2013, 23:19 18
Ну, вроде разобрались
1
zudoshika
3 / 3 / 0
Регистрация: 28.12.2012
Сообщений: 54
29.01.2013, 23:21  [ТС] 19
ask66, ОГРОМНОЕ спасибо за помощь!
0
29.01.2013, 23:21
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
29.01.2013, 23:21

Меню jquery
Добрый, Задача: - при загрузке старницы меню должно свернуться через 10с. - Если на меню фокус...

Универсальное меню JQuery
Добрый день. Не давно, написал JQuery меню, задумывалось что оно будет универсальным и как мне...

Меню со слайдером на jQuery
Здравствуйте! Подскажите, пожалуйста, как можно сделать меню со слайдером как на сайте...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru