Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

горизонтальное меню


chaica12

Recommended Posts

Всем привет! столкнулся с такой проблемкой. когда в ходишь на сайт по урлу http://photodesign.ru то кнопки горизонтального меню все одинакового цвета, хотя должна кнопка под названием "Главная" быть выделена другим цветом, а если на нее нажать, то цвет меняется. Причину я выяснил:

На сайт я захожу по урлу http://photodesign.ru

А если нажать кнопку Главная, то урл изменяется на такой http://photodesign.ru/index.php?route=common/home

т.е.

<ul class="tmenu">

<li><a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><?php echo $text_home; ?></a></li>

изменяет цвет тольк при условии

$(document).ready(function() {

route = getURLVar('route');

if (!route) {

//$('#tab_home').addClass('selected');

} else {

part = route.split('/');

if (route == 'common/home') {

$('#tab_home').addClass('selected');

помогите пожалуста поправить код, чтоб при заходе на сайт по урлу http://photodesign.ru кнопка Главная сразу была другого цвета

Надіслати
Поділитися на інших сайтах


всем спасибо, задача решена)))

надо было изменить код след оброзом

<ul class="tmenu">

<li><a href="<?php echo str_replace('&'); ?>" id="tab_home"><?php echo $text_home; ?></a></li>

и тут

$(document).ready(function() {

route = getURLVar('route');

if (!route) {

$('#tab_home').addClass('selected');

} else {

part = route.split('&');

if (route == '&') {

$('#tab_home').addClass('selected');

Надіслати
Поділитися на інших сайтах


  • 2 weeks later...
  • 3 weeks later...

Есть сайт, есть простое горизонтальное меню, есть два примера (первый / второй) как бы мне хотелось это видеть у себя, но нет того решения как всё это победить. Может, есть среди форумчан тот человек, у которого это, уже позади или для которого это, два пальца… Изображение

Буду признателен любой помощи.

Надіслати
Поділитися на інших сайтах


Есть сайт, есть простое горизонтальное меню, есть два примера (первый / второй) как бы мне хотелось это видеть у себя, но нет того решения как всё это победить. Может, есть среди форумчан тот человек, у которого это, уже позади или для которого это, два пальца… Изображение

Буду признателен любой помощи.

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

поидее в стилях это должно решаться просто.Только нужно дописать в стиле который за это меню отвечает,чтобы выводилась картинка ,когда ссылка активна ,ну или нажата как Вы хотите я не знаю))

попробуйте в css покапайтесь,это не должно быть сложно,только заранее подберите картинку

Надіслати
Поділитися на інших сайтах


как по мне, так у них это сделано ужасно...

#navbar { height: 21px; float: left; width: 680px; margin: 20px 0px 0px 24px; }
#navbar #nav { background: url(../images/nav.png) no-repeat; height: 21px; width: 591px; position: relative; border: 0px solid red; }
#navbar #nav span { text-indent: -9999px; display: block; }
#navbar #nav li, #nav a { display: block; height: 36px; outline: none; }
#navbar #nav li { float: left; list-style: none; outline: none; }
#navbar #nav-1 { width: 63px; }
#navbar #nav-2 { width: 108px; }
#navbar #nav-3 { width: 132px; }
#navbar #nav-4 { width: 152px; }
#navbar #nav-5 { width: 136px; }
#navbar #nav-1 #nav-1-line, #nav-1-noline a:hover { background: url(../images/nav.png) -0px -21px no-repeat; }
#navbar #nav-2 #nav-2-line, #nav-2-noline a:hover { background: url(../images/nav.png) -63px -21px no-repeat; }
#navbar #nav-3 #nav-3-line, #nav-3-noline a:hover { background: url(../images/nav.png) -171px -21px no-repeat; }
#navbar #nav-4 #nav-4-line, #nav-4-noline a:hover { background: url(../images/nav.png) -303px -21px no-repeat; }
#navbar #nav-5 #nav-5-line, #nav-5-noline a:hover { background: url(../images/nav.png) -455px -21px no-repeat; }

_ttp://www.gamesforherbyyou.com/images/nav.png
Изображение
Надіслати
Поділитися на інших сайтах

  • 2 weeks later...

как по мне, так у них это сделано ужасно...

#navbar { height: 21px; float: left; width: 680px; margin: 20px 0px 0px 24px; }
#navbar #nav { background: url(../images/nav.png) no-repeat; height: 21px; width: 591px; position: relative; border: 0px solid red; }
#navbar #nav span { text-indent: -9999px; display: block; }
#navbar #nav li, #nav a { display: block; height: 36px; outline: none; }
#navbar #nav li { float: left; list-style: none; outline: none; }
#navbar #nav-1 { width: 63px; }
#navbar #nav-2 { width: 108px; }
#navbar #nav-3 { width: 132px; }
#navbar #nav-4 { width: 152px; }
#navbar #nav-5 { width: 136px; }
#navbar #nav-1 #nav-1-line, #nav-1-noline a:hover { background: url(../images/nav.png) -0px -21px no-repeat; }
#navbar #nav-2 #nav-2-line, #nav-2-noline a:hover { background: url(../images/nav.png) -63px -21px no-repeat; }
#navbar #nav-3 #nav-3-line, #nav-3-noline a:hover { background: url(../images/nav.png) -171px -21px no-repeat; }
#navbar #nav-4 #nav-4-line, #nav-4-noline a:hover { background: url(../images/nav.png) -303px -21px no-repeat; }
#navbar #nav-5 #nav-5-line, #nav-5-noline a:hover { background: url(../images/nav.png) -455px -21px no-repeat; }

_ttp://www.gamesforherbyyou.com/images/nav.png
Изображение

Не очень понятно, верней не совсем ясно, то есть совсем не понятно...

Это ответ на мой вопрос, или информация к размышлению?

Надіслати
Поділитися на інших сайтах


Есть такое горизонтальное меню, но к этому меню есть вопрос: как это меню можно абсолютно выровнять по вертикали и горизонтали?

День делов, но выровнять абсолютно так и не смог. (если даделаю попробую выложить)

Надіслати
Поділитися на інших сайтах


Есть такое горизонтальное меню, но к этому меню есть вопрос: как это меню можно абсолютно выровнять по вертикали и горизонтали?

День делов, но выровнять абсолютно так и не смог. (если даделаю попробую выложить)

а что это значит?должно расстягиваться под окно браузера?

Надіслати
Поділитися на інших сайтах


а что это значит?должно расстягиваться под окно браузера?

1-й ? - не понятно, 2-й ? - тем более.

Общение просто супер!

Я на закадированном не понимаю, мне если ложка, значить естьИзображение,

если водка значить питьИзображение,

про окно браузера недавно узнал, так что извините «Моя твоя не понимать».

Надіслати
Поділитися на інших сайтах


Зделать такое проблем нет. Все делается с помощью hover. Могу помочь, только вот непонимаю как оно должно выглядеть.

Сейчас всё выглядит вот так:

Изображение

Хочу привести к такому виду:

Изображение

Красным выделен - header_1_center.png.

Синим выделено - моё меню.

Надіслати
Поділитися на інших сайтах


попробуйте в div4 в css (div4 поидее отвечает за горизонтальное меню,но т.к. Вы могли что менять,возможно у Вас другой стиль за него отвечает) дописать padding-top: 14px; или margin-top: 14px; вместо 14 подставьте что Вам нужно.

Но Ваши кнопки соцсетей сьедут вниз

Надіслати
Поділитися на інших сайтах


попробуйте в div4 в css (div4 поидее отвечает за горизонтальное меню,но т.к. Вы могли что менять,возможно у Вас другой стиль за него отвечает) дописать padding-top: 14px; или margin-top: 14px; вместо 14 подставьте что Вам нужно.

Но Ваши кнопки соцсетей сьедут вниз

Спасибо за совет, вот только у меня такие ДИВЫ не водятся!

Зато обитает маленькой ОТРЫВОК, над которым произвожу эксперимент методом ТЫКА, по горизонтали вроде научился рулить, а вот повертикали пока в процессе . . .

Место где провожу маневры:

#MainMenu

{

background:#626262;

border:0;

margin:0;

}

#tab

{

top:0;

height:0;

background:repeat-x top;

margin:0 auto;

width:785px;

}

#tab ul

{

list-style:none;

float:left;

margin:0;

padding:0;

}

#tab li

{

display:inline;

float:left;

margin:0 2px;

padding:0;

}

#tab a

{

background:#626262 url(../image/bright_099.png) no-repeat right top;

text-decoration:none;

border:0;

display:block;

float:left;

margin:0;

padding:0;

}

#tab a span

{

display:block;

background:url(../image/bleft_099.png) no-repeat left top;

font-family:Tahoma, Arial, Helvetica, sans-serif;

font-size:14px;

color:#ffffff;

font-weight:700;

line-height:31px;

padding:0 13px;

}

#tab a:hover,#tab li.item_active a

{

background-position:right bottom;

border-color:#626262;

}

#tab a:hover span,#tab li.item_active a span

{

background-position:left bottom;

color:#ffffff;

font-weight:700;

font-style:normal;

text-decoration:none;

}

.dropmenudiv,.dropmenudiv ul,.dropmenudiv li ul

{

position:absolute;

top:0;

float:left;

display:block;

visibility:hidden;

border:0 #626262;

background:#626262;

color:#ffffff;

z-index:100;

text-decoration:none;

margin:0;

padding:0;

}

.dropmenudiv ul

{

list-style:none;

margin:0;

padding:0;

}

.dropmenudiv li

{

list-style:none;

margin:0;

padding:0;

}

.dropmenudiv a:link,.dropmenudiv a:visited

{

width:180px;

display:block;

border:0 #626262;

color:#ffffff;

background:url(../image/bleft_099.png) no-repeat left top;

font-weight:700;

font-style:normal;

text-decoration:none;

margin:0 2px;

padding:0;

}

.dropmenudiv a span

{

display:block;

line-height:31px;

background:url(../image/bright_099.png) no-repeat right top;

font-family:Tahoma, Arial, Helvetica, sans-serif;

font-size:14px;

color:#ffffff;

float:none;

padding:0 13px;

}

.dropmenudiv a:hover

{

border:0 #626262;

background-position:left bottom;

font-weight:700;

font-style:normal;

text-decoration:none;

color:#ffffff;

}

.dropmenudiv a:hover span

{

background-position:right bottom;

color:#ffffff;

font-weight:700;

}

Одна надежда на АССА, который всё разрулит. Изображение

Надіслати
Поділитися на інших сайтах


Смотри:

В файле css находиш #header_panel {. Там висоту всех рисунков (header_1.png - header_6.png) редактируеш з 32 на 40. Тоисть, если было:

#header_panel .panel_top .left {
background : url(header_1.png) no-repeat;
width : 5px;
height : 32px;
float : left;

Меняеш на:

#header_panel .panel_top .left {
background : url(header_1.png) no-repeat;
width : 5px;
height : 40px;
float : left;

И так все шесть. Картинки у тебя итак висотой 40, если нужно чтоб было выше, нужно перерисовать картинки.

Потом находиш

#tab ul 
{
list-style:none;
float:left;
margin:0;
padding:0;
 }

меняеш на:

#tab ul 
{
list-style:none;
float:left;
margin:0;
margin-top:7px;
padding:0;
}

Вроде у меня все так получилось как ты хотел)

  • +1 1
Надіслати
Поділитися на інших сайтах


В посте №10 обещал, как доделаю, выложу, но тут подумал и решил, что изобретать велосипед, если он уже есть.

Берите и катайтесь! Изображение

P.S. Я потратил два дня с большими перекурами, чтобы обкатать, этот велик.

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.