0 Пользователей и 1 Гость просматривают эту тему.
  • 14 Ответов
  • 1354 Просмотров
*

NAaTa

  • Осваиваюсь на форуме
  • 27
  • 0 / 0
Меню сайта  у меня модуль, который я настроила как могла.

Но визуально лучше он будет смотреться если пункты меню будут располагаться по центру.

Сайт http://santehnik67.club

Файлы  самого модуля меню: accordion.css

Код
/*
* Pixel Point Creative - Cinch Menu Module
* License: GNU General Public License version
* See: http://www.gnu.org/copyleft/gpl.html
* Copyright (c) Pixel Point Creative LLC.
* More info at http://www.pixelpointcreative.com
* Last Updated: 5/13/14
* Additional improvemnets by Paul @ Protopia.co.uk
*/


ul.accordion-menu li li {text-indent: 5px;}
ul.accordion-menu li li li {text-indent: 10px;}
ul.accordion-menu li li li li {text-indent: 15px;}

ul.accordion-menu {
border:1px solid #1a1a1a;
margin:0px;
padding:0px;
overflow:hidden;
line-height:16px;
list-style:none !important;
font-size:12px;
}
ul.accordion-menu-left {
text-align:left;
}
ul.accordion-menu-right {
text-align:right;
}
ul.accordion-menu li {
border-top:1px solid #1a1a1a;
}
ul.accordion-menu > li.first,
ul.accordion-menu > li:first-child {
border-top:0px;
}

ul.accordion-menu a,
ul.accordion-menu a:hover,
ul.accordion-menu a:visited,
ul.accordion-menu a:active,
ul.accordion-menu a:focus {
font-family:Arial;
background:none;
}
ul.accordion-menu.button-left li > .item-wrapper > .menu-button,
ul.accordion-menu.button-right li > .item-wrapper > .menu-button {
padding:12px 0px;
line-height:10px;
}
ul.accordion-menu.button-left li > .item-wrapper > .menu-button {
float:left;
}
ul.accordion-menu.button-right li > .item-wrapper > .menu-button {
float:right;
}
ul.accordion-menu.button-left li > .item-wrapper > .menu-button > img {
padding-left:10px;
}
ul.accordion-menu.button-right li > .item-wrapper > .menu-button > img {
padding-right:10px;
cursor:pointer;
}
ul.accordion-menu li  > .item-wrapper > .menu-link {
min-height:35px;
overflow-y:hidden;
}
ul.accordion-menu li > .item-wrapper > .menu-link > a {
display:inline-block;
text-decoration:none;
background:none;
padding:10px 10px 9px 10px;
vertical-align:middle;
}
ul.accordion-menu li > .item-wrapper > .menu-link > a > img {
vertical-align:middle;
border:0 none;
height:auto;
max-width:100%;
padding:0 5px 0 0;
}
ul.accordion-menu-left li > .item-wrapper > .menu-link > a {
float:left;
}
ul.accordion-menu-right li > .item-wrapper > .menu-link > a {
float:right;
}
ul.accordion-menu > li > .item-wrapper > .menu-link > a {
font-weight:bold;
}
/* ul.accordion-menu li > .item-wrapper:after {
content:".";
visibility: hidden;
display:block;
height: 0;
clear: both;
} */

ul.accordion-menu li > .ul-wrapper {
display:none;
}
ul.accordion-menu li ul {
margin:0px;
padding:0px;
}
ul.accordion-menu-left li li > .item-wrapper > .menu-link > a {
padding-left:20px;
}
ul.accordion-menu-right li li > .item-wrapper > .menu-link > a {
padding-right:20px;
}
ul.accordion-menu-left li li li > .item-wrapper > .menu-link > a {
padding-left:30px;
}
ul.accordion-menu-right li li li > .item-wrapper > .menu-link > a {
padding-right:30px;
}
ul.accordion-menu-left li li li li > .item-wrapper > .menu-link > a {
padding-left:40px;
}
ul.accordion-menu-right li li li li > .item-wrapper > .menu-link > a {
padding-right:40px;
}
ul.accordion-menu-left li li li li li > .item-wrapper > .menu-link > a {
padding-left:50px;
}
ul.accordion-menu-right li li li li li > .item-wrapper > .menu-link > a {
padding-right:50px;
}


и flyout.css

Код
/*
* Pixel Point Creative - Cinch Menu Module
* License: GNU General Public License version
* See: http://www.gnu.org/copyleft/gpl.html
* Copyright (c) Pixel Point Creative LLC.
* More info at http://www.pixelpointcreative.com
* Last Updated: 5/13/14
* Additional improvements by Paul @ Protopia.co.uk
*/

ul.flyout-menu {
border:1px solid #1a1a1a;
margin:0px;
padding:0px;
line-height:16px;
list-style:none;
}
ul.flyout-menu.text-right {
text-align:right;
}
ul.flyout-menu.text-left {
text-align:left;
}
ul.flyout-menu.horizontal {
width:100%;
float:left;
}
ul.flyout-menu li {
position:relative;
border-bottom:1px solid #1A1A1A;
vertical-align:middle;
}
ul.flyout-menu li.last,
ul.flyout-menu li:last-of-type {
border:none;
}
ul.flyout-menu.horizontal.msie6 > li,
ul.flyout-menu.horizontal.msie7 > li,
ul.flyout-menu.horizontal.msie8 > li {
margin-top:0px;
margin-bottom:0px;
}
ul.flyout-menu.horizontal.msie8 > li {
margin-left:-5px;
}
ul.flyout-menu.horizontal.msie6 > li,
ul.flyout-menu.horizontal.msie7 > li {
margin-left:-1px;
display:inline;
}
ul.flyout-menu.horizontal > li.first,
ul.flyout-menu.horizontal > li:first-child {
margin-left:0px;
}

ul.flyout-menu .item-wrapper {
min-height:35px;
overflow-y:hidden;
}
ul.flyout-menu.vertical .item-wrapper {
width:100%;
}
ul.flyout-menu .menu-button {
line-height:8px;
padding:12px 0;
min-height:11px;
cursor:pointer;
}
ul.flyout-menu.vertical.msie6 .menu-button,
ul.flyout-menu.vertical.msie7 .menu-button,
ul.flyout-menu.vertical.msie8 .menu-button {
padding:10px 0;
}
ul.flyout-menu.button-right .menu-button {
float:right;
}
ul.flyout-menu.button-left .menu-button {
float:left;
}
ul.flyout-menu.button-right .menu-button img {
padding-right:10px;
}
ul.flyout-menu.button-left .menu-button img {
padding-left:10px;
}
ul.flyout-menu > li > .item-wrapper > .menu-link > a {
font-weight:bold;
}
ul.flyout-menu.text-left .menu-link {
/* float:left; */
margin-right: 21px;
}
ul.flyout-menu.text-right .menu-link {
/* float:right; */
margin-left: 21px;
}

ul.flyout-menu.vertical.msie6 > li > .item-wrapper > .menu-link,
ul.flyout-menu.vertical.msie7 > li > .item-wrapper > .menu-link,
ul.flyout-menu.vertical.msie8 > li > .item-wrapper > .menu-link {
float:none;
}
ul.flyout-menu .menu-link a {
min-height:15px;
font-size:12px;
text-decoration:none;
display:block;
padding:9px;
box-sizing:border-box;
font-family:arial;
}
ul.flyout-menu .menu-link img {
vertical-align:middle;
border:0 none;
height:auto;
max-width:100%;
padding-right:5px;
}

ul.flyout-menu .ul-wrapper {
display:none;
z-index:1000;
}
ul.flyout-menu.horizontal.flyout-right.msie6 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-right.msie7 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-right.msie8 .ul-wrapper {
left:0;
}
ul.flyout-menu.horizontal.flyout-left.msie6 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-left.msie7 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-left.msie8 .ul-wrapper {
right:0;
}
ul.flyout-menu.horizontal.msie6 > li > .ul-wrapper,
ul.flyout-menu.horizontal.msie7 > li > .ul-wrapper,
ul.flyout-menu.horizontal.msie8 > li > .ul-wrapper {
left:0;
}

/* Responsive switch to accordion-like behaviour. */
@media screen and (max-width:767px) {
ul.flyout-menu.vertical li,
ul.flyout-menu.horizontal li {
display:block;
margin-left:0;
border-right:none;
border-bottom:1px solid #1A1A1A;
}
ul.flyout-menu.vertical li.last,
ul.flyout-menu.horizontal li.last,
ul.flyout-menu.vertical li:last-of-type,
ul.flyout-menu.horizontal li:last-of-type {
margin-bottom:1px;
border-bottom:none;
}
ul.flyout-menu.horizontal .item-wrapper {
width:100%;
}
ul.flyout-menu .ul-wrapper {
position:relative;
top:0;
}
ul.flyout-menu.horizontal > li > .ul-wrapper {
left:auto;
}
ul.flyout-menu.vertical ul,
ul.flyout-menu.horizontal ul {
border-left:0;
border-bottom:0;
border-right:0;
border-top:1px solid #1a1a1a;
}
/* Following needs direction classes so it has sufficient specificity to override non-responsive CSS */
ul.flyout-menu.flyout-right .ul-wrapper,
ul.flyout-menu.flyout-left .ul-wrapper {
left:auto;
right:auto;
}
/*
ul.flyout-menu.horizontal.flyout-right ul .ul-wrapper {
left:0;
}
ul.flyout-menu.horizontal.flyout-left ul .ul-wrapper {
right:0;
}
*/
ul.flyout-menu.text-left li li > .item-wrapper > .menu-link > a {
padding-left:20px;
}
ul.flyout-menu.text-left li li li > .item-wrapper > .menu-link > a {
padding-left:30px;
}
ul.flyout-menu.text-left li li li li > .item-wrapper > .menu-link > a {
padding-left:40px;
}
ul.flyout-menu.text-left li li li li li > .item-wrapper > .menu-link > a {
padding-left:50px;
}
}

/* IE8/FF3 and earlier do not understand @media and apply above regardless - so undo */
@media screen and (min-width:768px) {
ul.flyout-menu.horizontal > li {
display:inline-block;
border-right:1px solid #1A1A1A;
border-bottom:none;
float: left;
}
ul.flyout-menu .ul-wrapper {
position:absolute;
top:-1px;
}
ul.flyout-menu.horizontal > li > .ul-wrapper {
left:-1px;
top:auto;
}
ul.flyout-menu.vertical ul,
ul.flyout-menu.horizontal ul {
border:1px solid #1a1a1a;
margin: 0px;
                padding: 0px;
}
/* Following needs direction classes so it has sufficient specificity to override non-responsive CSS */
ul.flyout-menu.flyout-right .ul-wrapper {
left:100%;
}
ul.flyout-menu.flyout-left .ul-wrapper {
right:100%;
}
/*
ul.flyout-menu.horizontal.flyout-right ul .ul-wrapper {
left:0;
}
ul.flyout-menu.horizontal.flyout-left ul .ul-wrapper {
right:0;
}
*/
ul.flyout-menu.text-left li li > .item-wrapper > .menu-link > a,
ul.flyout-menu.text-left li li li > .item-wrapper > .menu-link > a,
ul.flyout-menu.text-left li li li li > .item-wrapper > .menu-link > a,
ul.flyout-menu.text-left li li li li li > .item-wrapper > .menu-link > a {
padding-left:9px;
}
}


Если нужно менять где то в других файлов ткните пожалуйста пальцем в правильном направлении.

Заранее спасибо)
*

Shustry

  • Moderator
  • 6436
  • 744 / 3
Re: Как сделать меню по центру?
« Ответ #1 : 30.07.2018, 11:07:37 »
У ul и li уберите float. ul допишите text-align:center;

*

draff

  • Гуру
  • 5463
  • 387 / 7
  • ищу работу
Re: Как сделать меню по центру?
« Ответ #2 : 30.07.2018, 11:11:59 »
В шаблоне левые ссылки "светят" в блоке
Код
<div style="position: absolute; top: -1000px;">
*

NAaTa

  • Осваиваюсь на форуме
  • 27
  • 0 / 0
Re: Как сделать меню по центру?
« Ответ #3 : 30.07.2018, 11:50:48 »
У ul и li уберите float. ul допишите text-align:center;


где именно?
*

Shustry

  • Moderator
  • 6436
  • 744 / 3
Re: Как сделать меню по центру?
« Ответ #4 : 30.07.2018, 12:01:26 »
Код
#flyout_menu_126 {text-align:center !important;}
#flyout_menu_126, #flyout_menu_126 li {float:none !important;}

В любом подключенном файле с окончанием на .css в любом понравившемся месте.
*

NAaTa

  • Осваиваюсь на форуме
  • 27
  • 0 / 0
Re: Как сделать меню по центру?
« Ответ #5 : 30.07.2018, 12:19:23 »
 :D Спасибо)

Код
/*
* Pixel Point Creative - Cinch Menu Module
* License: GNU General Public License version
* See: http://www.gnu.org/copyleft/gpl.html
* Copyright (c) Pixel Point Creative LLC.
* More info at http://www.pixelpointcreative.com
* Last Updated: 5/13/14
* Additional improvements by Paul @ Protopia.co.uk
*/

ul.flyout-menu {
border:1px solid #1a1a1a;
margin:0px;
padding:0px;
line-height:16px;
list-style:none;
text-align:center;
}
ul.flyout-menu.text-right {
text-align:center;
}
ul.flyout-menu.text-left {
text-align:center;
}
ul.flyout-menu.horizontal {
width:100%;
text-align:center;

}
ul.flyout-menu li {
position:relative;
border-bottom:1px solid #1A1A1A;
vertical-align:middle;
text-align:center;
}
ul.flyout-menu li.last,
ul.flyout-menu li:last-of-type {
border:none;
text-align:center;
}
ul.flyout-menu.horizontal.msie6 > li,
ul.flyout-menu.horizontal.msie7 > li,
ul.flyout-menu.horizontal.msie8 > li {
margin-top:0px;
margin-bottom:0px;
text-align:center;
}
ul.flyout-menu.horizontal.msie8 > li {
margin-left:-5px;
text-align:center;
}
ul.flyout-menu.horizontal.msie6 > li,
ul.flyout-menu.horizontal.msie7 > li {
margin-left:-1px;
display:inline;
text-align:center;
}
ul.flyout-menu.horizontal > li.first,
ul.flyout-menu.horizontal > li:first-child {
margin-left:0px;
text-align:center;
}

ul.flyout-menu .item-wrapper {
min-height:35px;
overflow-y:hidden;
text-align:center;
}
ul.flyout-menu.vertical .item-wrapper {
width:100%;
text-align:center;
}
ul.flyout-menu .menu-button {
line-height:8px;
padding:12px 0;
min-height:11px;
cursor:pointer;
text-align:center;
}
ul.flyout-menu.vertical.msie6 .menu-button,
ul.flyout-menu.vertical.msie7 .menu-button,
ul.flyout-menu.vertical.msie8 .menu-button {
padding:10px 0;
text-align:center;
}
ul.flyout-menu.button-right .menu-button {
text-align:center;

}
ul.flyout-menu.button-left .menu-button {
text-align:center;

}
ul.flyout-menu.button-right .menu-button img {
padding-right:10px;
text-align:center;
}
ul.flyout-menu.button-left .menu-button img {
padding-left:10px;
text-align:center;
}
ul.flyout-menu > li > .item-wrapper > .menu-link > a {
font-weight:bold;
text-align:center;
}
ul.flyout-menu.text-left .menu-link {
/* float:left; */
margin-right: 21px;
text-align:center;
}
ul.flyout-menu.text-right .menu-link {
/* float:right; */
margin-left: 21px;
text-align:center;
}

ul.flyout-menu.vertical.msie6 > li > .item-wrapper > .menu-link,
ul.flyout-menu.vertical.msie7 > li > .item-wrapper > .menu-link,
ul.flyout-menu.vertical.msie8 > li > .item-wrapper > .menu-link {

}
ul.flyout-menu .menu-link a {
min-height:15px;
font-size:12px;
text-decoration:none;
display:block;
padding:9px;
box-sizing:border-box;
font-family:arial;
text-align:center;
}
ul.flyout-menu .menu-link img {
vertical-align:middle;
border:0 none;
height:auto;
max-width:100%;
padding-right:5px;
text-align:center;
}

ul.flyout-menu .ul-wrapper {
display:none;
z-index:1000;
text-align:center;
}
ul.flyout-menu.horizontal.flyout-right.msie6 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-right.msie7 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-right.msie8 .ul-wrapper {
left:0;
}
ul.flyout-menu.horizontal.flyout-left.msie6 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-left.msie7 .ul-wrapper,
ul.flyout-menu.horizontal.flyout-left.msie8 .ul-wrapper {
right:0;
}
ul.flyout-menu.horizontal.msie6 > li > .ul-wrapper,
ul.flyout-menu.horizontal.msie7 > li > .ul-wrapper,
ul.flyout-menu.horizontal.msie8 > li > .ul-wrapper {
left:0;
}

/* Responsive switch to accordion-like behaviour. */
@media screen and (max-width:767px) {
ul.flyout-menu.vertical li,
ul.flyout-menu.horizontal li {
display:block;
margin-left:0;
border-right:none;
border-bottom:1px solid #1A1A1A;
text-align:center;
}
ul.flyout-menu.vertical li.last,
ul.flyout-menu.horizontal li.last,
ul.flyout-menu.vertical li:last-of-type,
ul.flyout-menu.horizontal li:last-of-type {
margin-bottom:1px;
border-bottom:none;
text-align:center;
}
ul.flyout-menu.horizontal .item-wrapper {
width:100%;
text-align:center;
}
ul.flyout-menu .ul-wrapper {
position:relative;
top:0;
text-align:center;
}
ul.flyout-menu.horizontal > li > .ul-wrapper {
left:auto;
text-align:center;
}
ul.flyout-menu.vertical ul,
ul.flyout-menu.horizontal ul {
border-left:0;
border-bottom:0;
border-right:0;
border-top:1px solid #1a1a1a;
text-align:center;
}
/* Following needs direction classes so it has sufficient specificity to override non-responsive CSS */
ul.flyout-menu.flyout-right .ul-wrapper,
ul.flyout-menu.flyout-left .ul-wrapper {
left:auto;
right:auto;
text-align:center;
}
/*
ul.flyout-menu.horizontal.flyout-right ul .ul-wrapper {
left:0;
}
ul.flyout-menu.horizontal.flyout-left ul .ul-wrapper {
right:0;
}
*/
ul.flyout-menu.text-left li li > .item-wrapper > .menu-link > a {
padding-left:20px;
}
ul.flyout-menu.text-left li li li > .item-wrapper > .menu-link > a {
padding-left:30px;
}
ul.flyout-menu.text-left li li li li > .item-wrapper > .menu-link > a {
padding-left:40px;
}
ul.flyout-menu.text-left li li li li li > .item-wrapper > .menu-link > a {
padding-left:50px;
}
}

/* IE8/FF3 and earlier do not understand @media and apply above regardless - so undo */
@media screen and (min-width:768px) {
ul.flyout-menu.horizontal > li {
display:inline-block;
border-right:1px solid #1A1A1A;
border-bottom:none;

}
ul.flyout-menu .ul-wrapper {
position:absolute;
top:-1px;
}
ul.flyout-menu.horizontal > li > .ul-wrapper {
left:-1px;
top:auto;
}
ul.flyout-menu.vertical ul,
ul.flyout-menu.horizontal ul {
border:1px solid #1a1a1a;
margin: 0px;
                padding: 0px;
}
/* Following needs direction classes so it has sufficient specificity to override non-responsive CSS */
ul.flyout-menu.flyout-right .ul-wrapper {
left:100%;
}
ul.flyout-menu.flyout-left .ul-wrapper {
right:100%;
}
/*
ul.flyout-menu.horizontal.flyout-right ul .ul-wrapper {
left:0;
}
ul.flyout-menu.horizontal.flyout-left ul .ul-wrapper {
right:0;
}
*/
ul.flyout-menu.text-left li li > .item-wrapper > .menu-link > a,
ul.flyout-menu.text-left li li li > .item-wrapper > .menu-link > a,
ul.flyout-menu.text-left li li li li > .item-wrapper > .menu-link > a,
ul.flyout-menu.text-left li li li li li > .item-wrapper > .menu-link > a {
padding-left:9px;
}
}

только я засунула это везде...

однако сработало  ^-^
*

NAaTa

  • Осваиваюсь на форуме
  • 27
  • 0 / 0
Re: Как сделать меню по центру?
« Ответ #6 : 02.08.2018, 12:26:27 »
Почистила кэш сайта в панели управлениЯ и все вернулось на свои места(
*

lexxbry

  • Живу я здесь
  • 2389
  • 67 / 8
Re: Как сделать меню по центру?
« Ответ #7 : 02.08.2018, 12:31:02 »
Почистила кэш сайта в панели управлениЯ и все вернулось на свои места(
значит включена компиляция less
или отключите или в custom.css запихните
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
*

NAaTa

  • Осваиваюсь на форуме
  • 27
  • 0 / 0
Re: Как сделать меню по центру?
« Ответ #8 : 02.08.2018, 14:29:07 »
Как отключить?
*

lexxbry

  • Живу я здесь
  • 2389
  • 67 / 8
Re: Как сделать меню по центру?
« Ответ #9 : 02.08.2018, 14:39:18 »
в настройках шаблона
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
*

Shustry

  • Moderator
  • 6436
  • 744 / 3
Re: Как сделать меню по центру?
« Ответ #10 : 02.08.2018, 15:18:02 »
Как отключить?

А не надо её отключать. Пишите в custom.css все изменения. Либо в исходный less/sass-файл, потом компилируйте.
*

NAaTa

  • Осваиваюсь на форуме
  • 27
  • 0 / 0
Re: Как сделать меню по центру?
« Ответ #11 : 10.08.2018, 10:31:35 »
у МЕНЯ таких файлов вообще нет :o
*

lexxbry

  • Живу я здесь
  • 2389
  • 67 / 8
Re: Как сделать меню по центру?
« Ответ #12 : 10.08.2018, 10:34:00 »
ну custom.css сами сделайте
главное потом его подключить если не подключен
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
*

NAaTa

  • Осваиваюсь на форуме
  • 27
  • 0 / 0
Re: Как сделать меню по центру?
« Ответ #13 : 10.08.2018, 10:56:03 »
Я создала файл, поместила его в  CSS шаблона, но ничего из этого не вышло(
*

lexxbry

  • Живу я здесь
  • 2389
  • 67 / 8
Re: Как сделать меню по центру?
« Ответ #14 : 10.08.2018, 11:09:11 »
где создали?
куда поместили?
подключен ли он в index.php шаблона?
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Выпадающее меню

Автор DrShepard

Ответов: 8
Просмотров: 358
Последний ответ 02.09.2021, 11:31:55
от DrShepard
Как сделать?

Автор Twins

Ответов: 3
Просмотров: 236
Последний ответ 01.07.2021, 13:11:51
от xpank
Как сделать кнопку формы аккаунта?

Автор Evgen Kulibin

Ответов: 0
Просмотров: 122
Последний ответ 22.04.2021, 22:15:06
от Evgen Kulibin
Как сделать плавающий модуль?

Автор THeCMeX

Ответов: 2
Просмотров: 269
Последний ответ 08.03.2021, 22:21:01
от Flexderection
Как закруглить края выпадающего меню?

Автор coliandra

Ответов: 1
Просмотров: 320
Последний ответ 11.12.2020, 21:15:57
от effrit