Верхнее навигационное меню

airness · 17 дек 2013

Подскажите, у меня в верхнем навигационном меню имеются ссылки на категории и несколько ссылок на статические страницы. Как то можно изменить фон у некоторых ?

Globe-Star · 17 дек 2013

в каком плане сменить фон у некоторых?
в стилях css можно это всё реализовать.

airness · 18 дек 2013

Скажем в меню следующие пункты
Каталог | Оплата | Доставка | Новости |
стиль этого меню прописывается в css и он единый для всего меню
Мне надо чтобы Новости были на другом фоне. это можно как то сделать ?

SmileOk · 18 дек 2013

Для ссылки на статическую страницу можно прописать другой класс и в файле css. прописать для него стиль, в Вашем случае цвет фона.А вообще скиньте адрес сайта или хотя бы код навигационного меню.

airness · 18 дек 2013

Вот код

Спойлер

#menu {
height: 37px;
margin-bottom: 10px;
border-top: 0px solid #000001;
border-bottom: 0px solid #000000;
background: #69A0DD;
background: -moz-linear-gradient(top, #666666 50%, #777777 100%);
background: -webkit-gradient(linear, center top, center bottom, color-stop(50%, #666666), color-stop(100%, #777777));
-webkit-box-shadow: 0 8px 10px -8px #33506F,
inset 0 2px 0 -1px #BBBBBB;
-moz-box-shadow: 0 8px 10px -8px #33506F,
inset 0 2px 0 -1px #BBBBBB;
box-shadow: 0 8px 10px -8px #33506F,
inset 0 2px 0 -1px #BBBBBB;

}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 0 0;
border-right: 1px solid #000001;
-webkit-box-shadow: 2px 0 0 -1px #BBBBBB;
-moz-box-shadow: 2px 0 0 -1px #BBBBBB;
box-shadow: 2px 0 0 -1px #BBBBBB;
-webkit-transition: background .2s;
-moz-transition: background .2s;
transition: background .2s;
}
#menu > ul > li:hover {
background: #F6D046;
-webkit-box-shadow: 0 0 0 0 #BBBBBB;
-moz-box-shadow: 0 0 0 0 #BBBBBB;
box-shadow: 0 0 0 0 #BBBBBB;
}
#menu > ul > li > a {
font-size: 12px;
font-weight: bold;
font-family: Arial,sans-serif;
color: #F6D046;
line-height: 14px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
margin-bottom: 5px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a {
color: #000000;
}
#menu > ul > li > div {
display: none;
background: #F6D046;
position: absolute;
z-index: 5;
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
font-size: 10px;
font-weight: bold;
color: #fff;
display: block;
white-space: nowrap;
min-width: 120px;
-webkit-transition: background .1s;
-moz-transition: background .1s;
transition: background .1s;

}
#menu > ul > li ul > li > a:hover {
background: #000000;
color: #fff;
}
#menu > ul > li > div > ul > li > a {
color: #000000;
}

SmileOk · 18 дек 2013

Код меню из header.tpl

airness · 19 дек 2013

Спойлер

<!DOCTYPE html>
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<head>
<meta charset="UTF-8" />
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php } ?>
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/palioxis/stylesheet/stylesheet.css" />
<?php foreach ($styles as $style) { ?>
<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<script type="text/javascript" src="catalog/view/theme/palioxis/js/custom.js"></script>
<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?>


<?php if ($stores) { ?>
<script type="text/javascript"></script>
<?php } ?>
<?php echo $google_analytics; ?>
</head>
<body>
<div id="tlc">
<div id="tlc-wrapper">
<div class="lks"><img src="catalog/view/theme/palioxis/image/home.png" alt="Home" /><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>
</div>
</div>
<div id="container">
<div id="header">
<?php if ($logo) { ?>
<div id="logo"><a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>
<?php } ?>

<?php echo $cart; ?>
<div id="search">
<div class="button-search"><span class="bst"><?php echo $text_search; ?></span></div>
<input type="text" name="search" value="<?php echo $search; ?>" />
</div>
</div>
<div class="ribbon">
<div class="ribbon-content">
<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
<li><a href="/shipping">Доставка</a></li>
<li><a href="/payment">Оплата</a></li>
<li><a href="/contact-us">Связаться с нами</a></li>
<li><a href="/pre_order">Не нашли модель ?</a></li>
</ul>
</div>
<?php } ?>
</div>
</div>

Спасибо что помогаете

SmileOk · 19 дек 2013

В header.tpl для пункта которому нужно изменить фон присваиваем свой id, например для пункта "Доставка"
изменить
Код:
<li><a href="/shipping">Доставка</a></li>
на
Код:
 <li id="menu1"><a href="/shipping">Доставка</a></li>
Теперь в stylesheet.css прописываем стиль для id menu1, вставляем код
Код:
#menu1 > a {
   
    background-color:#38B0E3; /* Цвет нужного фона*/
    -webkit-border-radius: 5px; /* Закругление углов фона*/
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

airness · 19 дек 2013

Спасибо большое, получилось

Войти или зарегистрироваться

Верхнее навигационное меню

airness

Globe-Star ...

airness

SmileOk

airness

SmileOk

airness

SmileOk

airness