Разные классы для фиксированного jquery menu

@nookie · Регистрация: 03.07.2013

Студворк — интернет-сервис помощи студентам

Подскажите пожалуйста, как сделать два класса для меню. Столкнулся с непонятной для меня задачей.

Подключил Java скрипт для фиксированного меню на Jquery. Прописал для него классы - .default и .fixed.
Всё работает, но но появилась необходимость выровнять фиксированное меню (.fixed) по центру, но при этом основное меню (.default) оставить по левому краю.

За выравнивание отвечает дополнительный класс .icemegamenu. Структура такая:

Code
1
2
3
4
5
6
<div id="mainmenu" class="clearfix fixed/или default">
<div class="icemegamenu">
<div class="nav-collapse icemegamenu collapse">
</div>
</div>
</div>

А вот сами стили:

mainmenu:

CSS
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
#mainmenu {
/*  position: relative;*/
  background-color: #3d3d3d;
  background: -moz-linear-gradient(top, #484848, #2e2e2e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#484848), to(#2e2e2e));
  background: -webkit-linear-gradient(top, #484848, #2e2e2e);
  background: -o-linear-gradient(top, #484848, #2e2e2e);
  background: linear-gradient(to bottom, #484848, #2e2e2e);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484848', endColorstr='#ff2e2e2e', GradientType=0);
  clear: both;
  margin: 0 0 30px;
  border-radius: 7px 8px 8px 7px;
  /* Search */
 
}
 
.default {
position: relative;
top: 0;
  left: 0;
  height: 55px;
  width: 100%;
  border-radius: 7px;
}
.fixed {
position: fixed;
/*overflow: auto;*/
/*max-height:50%;*/
z-index:15000;
width:100%;
top:0;
right:0;
left:0;
background: linear-gradient(to top, rgba(69, 72, 77, 0.89) 0%,rgba(0, 0, 0, 0.77) 100%)!important;
border-radius: 0!important;
 
@media screen and (max-height: 600px) {
     .fixed { 
     overflow: auto!important;
     max-height: 50%!important;
 }
   }
 
#mainmenu:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 55px;
  background: url(../images/mainmenu.png) no-repeat;
  width: 100%;
  border-radius: 7px;
}
 
}

icemegamenu:

CSS
1
2
3
.icemegamenu {
  float: left;
}

Вопрос: можно ли в сделать так, чтобы в режиме .default всё оставалось как есть (float: left), а в режиме .fixed меню отображалось по центру?

Добавлено через 8 минут
Как выровнять меню по центру я разобрался: в .icemegamenu убрал float: left; и дописал text-aling: center, и в nav-collapse установил display: inline-block;. Но тогда центруются оба меню - и фиксированное и дефолтное. А нужно только фиксированное. Подскажите, какие несложные варианты есть для решения этой задачи.

@fol · 08.06.2015, 21:03

добавить класс так:

JavaScript
1
$('.default').addClass('ololo');

а дальше:

CSS
1
2
3
.default.ololo{
нужные стили /*они применятся только для элемента,у которого есть оба класса*/
}

@nookie · 08.06.2015, 21:20 **[ТС]**

Это нужно добавлять в java script jquery или в css?
окей, вижу ваше сообщение дополненное, попробую, спасибо

Добавлено через 13 минут
Хм, не совсем понял, может подскажете как конкретно нужно прописать эти классы, вот скрипт для фиксированного меню:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
jQuery(document).ready(function(){
 
 
 
        var jQuerymenu = jQuery("#mainmenu");
 
 
 
        jQuery(window).scroll(function(){
 
            if ( jQuery(this).scrollTop() > 100 && jQuerymenu.hasClass("default") ){
 
                jQuerymenu.removeClass("default").addClass("fixed");
 
            } else if(jQuery(this).scrollTop() <= 100 && jQuerymenu.hasClass("fixed")) {
 
                jQuerymenu.removeClass("fixed").addClass("default");
 
            }
 
        });//scroll
 
    });

@fol · 09.06.2015, 08:43

после этой строчки

Сообщение от nookie

});//scroll

вставить эту

JavaScript
1
$('.default').addClass('ololo');

@nookie · 09.06.2015, 11:02 **[ТС]**

Спасибо, но так почему то не работает, сделал вот как

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
jQuery(document).ready(function(){
 
 
 
        var jQuerymenu = jQuery("#mainmenu");
 
 
 
        jQuery(window).scroll(function(){
 
            if ( jQuery(this).scrollTop() > 100 && jQuerymenu.hasClass("default") ){
 
                jQuerymenu.removeClass("default").addClass("fixed ololo");
 
            } else if(jQuery(this).scrollTop() <= 100 && jQuerymenu.hasClass("fixed ololo")) {
 
                jQuerymenu.removeClass("fixed ololo").addClass("default");
 
            }
 
        });//scroll
 
    });

CSS
1
2
3
.ololo {
    text-align:center;
}

С этим всё понятно, стиль ololo заработал отдельно для позиции fixed, НО!, по центру стало не само меню, только выравнивание пунктов и подпунктов , потому что за выравнивание отвечает отдельный класс - icemegamenu:

CSS
1
2
3
.icemegamenu {
float: left;
}

Вообщем расклад такой:

Code
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
<div id="mainmenu" class="clearfix fixed ololo">
:before
<div class="icemegamenu"> 
<div class="ice-megamenu-toggle"></div>
<div class="nav-collapse icemegamenu collapse"></div>
</div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
        var browser_width1 = jQuery(window).width();
        jQuery("#icemegamenu").find(".icesubMenu").each(function(index){
            var offset1 = jQuery(this).offset();
            var xwidth1 = offset1.left + jQuery(this).width();
            if(xwidth1 >= browser_width1){
                jQuery(this).addClass("ice_righttoleft");
            }
        });
        
    })
    jQuery(window).resize(function() {
        var browser_width = jQuery(window).width();
        jQuery("#icemegamenu").find(".icesubMenu").removeClass("ice_righttoleft");
        jQuery("#icemegamenu").find(".icesubMenu").each(function(index){
            var offset = jQuery(this).offset();
            var xwidth = offset.left + jQuery(this).width();
            
            if(xwidth >= browser_width){
                jQuery(this).addClass("ice_righttoleft");
            }
        });
    });
</script>

А в самом template.css это выглядит так:
mainmenu + fixed + ololo + before (строки 2227-2285)
icemegamenu + ice-megamenu-toggle + nav-collapse icemegamenu collapse (2757-2764)

И вот я не пойму, как применить отдельный icemegamenu, например с float: right; для .fixed, и с float: left; для .default. И вот в коде выше есть еще яваскрипт, может еще и в нём дело?

Добавлено через 19 минут
На всякий случай, вот template.css

Добавлено через 1 час 15 минут
И вообще, какой смысл в добавлении класса ololo, если всё это можно прописать в .fixed и оно будет работать

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .