Меню из картинки, активный пункт

@Lord_Voodoo · Регистрация: 07.03.2007

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

Подскажите, как научить это дикое меню помнить пункт меню выбранный?
css:

CSS

#mainpage
{
background:   URL(/images/menu/menu_02.jpg) no-repeat;
width:97px;
height:53px;  
float:left;  
}
#mainpage:hover
{
  background: URL(/images/menu/active_01.jpg) no-repeat;
}
#mainpage:active{
  background: URL(/images/menu/clicked_01.jpg) no-repeat;
}
#portfoliopage
{
background:   URL(/images/menu/menu_03.jpg) no-repeat;
width:124px;
height:53px;  
float:left;  
}
#portfoliopage:hover
{
  background: URL(/images/menu/active_02.jpg) no-repeat;
}
#portfoliopage:active
{
  background: URL(/images/menu/clicked_02.jpg) no-repeat;
}
#reviewpage
{
background:   URL(/images/menu/menu_04.jpg) no-repeat;
width:90px;
height:53px;  
float:left;  
}
#reviewpage:hover
{
  background: URL(/images/menu/active_03.jpg) no-repeat;
}
#reviewpage:active
{
  background: URL(/images/menu/clicked_03.jpg) no-repeat;
}
#pricepage
{
background:   URL(/images/menu/menu_05.jpg) no-repeat;
width:74px;
height:53px;  
float:left;  
}
#pricepage:hover
{
  background: URL(/images/menu/active_04.jpg) no-repeat;
}
#pricepage:active
{
  background: URL(/images/menu/clicked_04.jpg) no-repeat;
}
#orderpage
{
background:   URL(/images/menu/menu_06.jpg) no-repeat;
width:162px;
height:53px;  
float:left;  
}
#orderpage:hover
{
  background: URL(/images/menu/active_05.jpg) no-repeat;
}
#orderpage:active
{
  background: URL(/images/menu/clicked_05.jpg) no-repeat;
}
#contactpage
{
background:   URL(/images/menu/menu_07.jpg) no-repeat;
width:109px;
height:53px;  
float:left;  
}
#contactpage:hover
{
  background: URL(/images/menu/active_06.jpg) no-repeat;
}
#contactpage:active
{
  background: URL(/images/menu/clicked_06.jpg) no-repeat;
}
#blogpage
{
background:   URL(/images/menu/menu_08.jpg) no-repeat;
width:95px;
height:53px;  
float:left;  
}
#blogpage:hover
{
  background: URL(/images/menu/active_07.jpg) no-repeat;
}
#blogpage:active
{
  background: URL(/images/menu/clicked_07.jpg) no-repeat;
}

html:

HTML5

  <a href="index.php?option=com_content&amp;view=article&amp;id=1&amp;catid=8"><div id="mainpage"></div></a>
   <a href="#"><div id="portfoliopage"></div></a>
   <a href="#"><div id="reviewpage"></div></a>
   <a href="#"><div id="pricepage"></div></a>
   <a href="#"><div id="orderpage"></div></a>
   <a href="#"><div id="contactpage"></div></a>
   <a href="#"><div id="blogpage"></div></a>

zhibirc · 13.04.2013, 14:52

:visited ?

@Lord_Voodoo · 13.04.2013, 15:04 **[ТС]**

!i, нет, на это никак не реагирует вообще...

А еще вопрос, как сделать подложку для блока текста, с изменяющимся размером по высоте...

@Taatshi · 13.04.2013, 17:24

Lord_Voodoo, а шаблон уже на Joomla или еще только в процессе блочной верстки? Если только верстка - все эти вопросы снимаем и сначала сажаем шаблон на Joomla.

@Lord_Voodoo · 13.04.2013, 21:02 **[ТС]**

Taatshi, я взял стандартный шаблон и div-ами расположил нарезку картинки шаблона... т.е. первичиную верстку провел - у сайта стандартная страница уже есть... начал пытаться заполнить ее контентом...

template: Beez_20

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мастерская Лены</title>
  <link rel="stylesheet" href="/templates/beez_20/css/personal.css" type="text/css" />
</head>
<body>
<div id="maket">
   <div id="header"></div>
   <div id="leftborder"></div>
  <a href="index.php?option=com_content&amp;view=article&amp;id=1&amp;catid=8"><div id="mainpage"></div></a>
   <a href="#"><div id="portfoliopage"></div></a>
   <a href="#"><div id="reviewpage"></div></a>
   <a href="#"><div id="pricepage"></div></a>
   <a href="#"><div id="orderpage"></div></a>
   <a href="#"><div id="contactpage"></div></a>
   <a href="#"><div id="blogpage"></div></a>
   <div id="rightborder"></div>
   <div id="left"></div>
   <div id="main">
     <div id="main-head"></div>
     <div id="main-left"></div>
     <div id="main-center">
       <div id="main-post"><h1>Привет от ламера!!!</h1></div>
       <div id="main-post"><h1>Привет от ламера!!!</h1></div>
     </div>
     <div id="main-right"></div>
     <div id="main-foot"></div>
   </div>
   <div id="rigth"></div>
   <div id="footer"></div>  
</div>
</body>
</html>

CSS

body, html
{
margin:0px;
padding:0px;
}
 
#maket
{
width:1280px;
margin:0 auto;
}
 
#header
{
background:  URL(/images/sampledata/main_01.jpg) no-repeat;
width:1280px;
height:276px;  
}
 
#main
{
width:820px;
height:1270px;  
float:left;  
}
 
#main-head
{
background:  URL(/images/center/center01.jpg) no-repeat;
width:820px;
height:263px;  
float:left;  
}
 
#main-left
{
background:  URL(/images/center/center05.jpg) no-repeat;
width:87px;
height:909px;  
float:left;  
}
 
#main-center
{
width:653px;
height:909px;  
float:left;  
}
 
#main-post
{
background:  URL(/images/center/layout.jpg) no-repeat;
width:648px;
height:439px;  
float:center;
padding:20px 10px 10px 20px;  
}
#main-right
{
background:  URL(/images/center/center04.jpg) no-repeat;
width:80px;
height:909px;  
float:left;  
}
 
#main-foot
{
background:  URL(/images/center/center03.jpg) no-repeat;
width:820px;
height:98px;  
float:left;  
}
 
#left
{
background:  URL(/images/sampledata/main_03.jpg) no-repeat;
width:236px;
height:1270px;  
float:left;
}
 
#rigth
{
background:  URL(/images/sampledata/main_05.jpg) no-repeat;
width:224px;
height:1270px;  
float:left;
}
 
#footer
{
background:  URL(/images/sampledata/main_06.jpg) no-repeat;
width:1280px;
height:80px;  
float:left;  
}
 
#leftborder
{
background:  URL(/images/menu/menu_01.jpg) no-repeat;
width:303px;
height:53px;  
float:left;  
}
 
#rightborder
{
background:   URL(/images/menu/menu_09.jpg) no-repeat;
width:226px;
height:53px;  
float:left;  
}
 
#mainpage
{
background:   URL(/images/menu/menu_02.jpg) no-repeat;
width:97px;
height:53px;  
float:left;  
}
#mainpage:hover
{
  background: URL(/images/menu/active_01.jpg) no-repeat;
}
#mainpage:active{
  background: URL(/images/menu/clicked_01.jpg) no-repeat;
}
#portfoliopage
{
background:   URL(/images/menu/menu_03.jpg) no-repeat;
width:124px;
height:53px;  
float:left;  
}
#portfoliopage:hover
{
  background: URL(/images/menu/active_02.jpg) no-repeat;
}
#portfoliopage:active
{
  background: URL(/images/menu/clicked_02.jpg) no-repeat;
}
#reviewpage
{
background:   URL(/images/menu/menu_04.jpg) no-repeat;
width:90px;
height:53px;  
float:left;  
}
#reviewpage:hover
{
  background: URL(/images/menu/active_03.jpg) no-repeat;
}
#reviewpage:active
{
  background: URL(/images/menu/clicked_03.jpg) no-repeat;
}
#pricepage
{
background:   URL(/images/menu/menu_05.jpg) no-repeat;
width:74px;
height:53px;  
float:left;  
}
#pricepage:hover
{
  background: URL(/images/menu/active_04.jpg) no-repeat;
}
#pricepage:active
{
  background: URL(/images/menu/clicked_04.jpg) no-repeat;
}
#orderpage
{
background:   URL(/images/menu/menu_06.jpg) no-repeat;
width:162px;
height:53px;  
float:left;  
}
#orderpage:hover
{
  background: URL(/images/menu/active_05.jpg) no-repeat;
}
#orderpage:active
{
  background: URL(/images/menu/clicked_05.jpg) no-repeat;
}
#contactpage
{
background:   URL(/images/menu/menu_07.jpg) no-repeat;
width:109px;
height:53px;  
float:left;  
}
#contactpage:hover
{
  background: URL(/images/menu/active_06.jpg) no-repeat;
}
#contactpage:active
{
  background: URL(/images/menu/clicked_06.jpg) no-repeat;
}
#blogpage
{
background:   URL(/images/menu/menu_08.jpg) no-repeat;
width:95px;
height:53px;  
float:left;  
}
#blogpage:hover
{
  background: URL(/images/menu/active_07.jpg) no-repeat;
}
#blogpage:active
{
  background: URL(/images/menu/clicked_07.jpg) no-repeat;
}

@Taatshi · 13.04.2013, 23:50

Lord_Voodoo, а сайт в сети? Давайте выложим на хостинг - разговаривать будет на порядок проще.

Пример выбранного пункта меню - для цвета ссылки

CSS

1	ul.menu li.active a {color: blue}

Для бэкграунда

CSS

1	ul.menu li.active {background-color: #ccc;}

чтобы точно привязать к конкретному меню - привязываем к нужному родительскому селектору, к примеру

CSS

1	#top ul.menu li.active {background-color: #ccc;}

Если нужно точнее - скажите в какую позицию меню расположили

@maximus2011 · 14.04.2013, 07:40

ну если вам нужно, чтобы подсвечивался выбраный пункт меню, то это на jquery, а если нужно, чтобы выделял другим цветом посещенную ссылку, тогда в начале css пишите так

CSS

a:link{
color:#ff0000; //Это первоначальный цвет всех ссылок.
}
a:visited{
color:#000000;// Это цвет посещенных ссылок
}
a:hover{
text-decoration:none; // Ну а это уже на ваше усмотрение, убирать подчеркивание при наведении или нет.
}

@Lord_Voodoo · 14.04.2013, 09:34 **[ТС]**

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

а как сделать именно меню, но с разными подложками под каждый пункт меню? Ни один из примеров в нете мне не помог

@maximus2011 · 14.04.2013, 09:44

Ну если вам нужны разные подложки, то тогда делайте так. Если пункты заключены в

HTML5

<li></li>

в стилях пишите

CSS

li{
display:block;
background: //тут указывайте фон каждого пункта
}
li:hover{
background: //тут указывайте фон который должен быть после наведения
}

ну и все, а потом jquery, тут полно примеров на форуме в соответствующем разделе

@Taatshi · 14.04.2013, 10:49

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

div, обернутый ссылкой

Это как такое получилось? Так быть не должно, да и не надо.

Добавлено через 58 минут
Надо подключить модуль в нужном месте в файле index.php шаблона - вот так

PHP

1
2
3

<div id="topmenu">          
<jdoc:include type="modules" name="topmenu" style="xhtml" />            
</div><!--end-topmenu-->

в файле templateDetails.xml прописать новую позицию

XML

<positions>
        <position>topmlenu</position>
        еще позиции....
</positions>

Потом в админке создать меню, в менеджере модулей создать модуль под меню и вывести его в позицию topmenu

и потом уже прописывать стили для меню - выравнивать его по горизонтали, оформлять

@and_y87 · 15.04.2013, 09:28

Lord_Voodoo,
1. Работать с уками - запоминать в них последнюю нажатую ссылку из меню и при загрузке страницы проверять куку что вней и работать с id в куках...
2. Get запрос в адресной строке... каждой ссылке сделай её уникальный id и передавать его в адресной строке...
далее так же, загрузке страницы проверять GET переменную - что вней и работать с полученным id ...

Добавлено через 32 секунды
Если на php то в сессии можно хранить...

@Taatshi · 15.04.2013, 09:37

and_y87, все это движок уже делает.

@and_y87 · 15.04.2013, 09:40

Taatshi, тогда не вижу сложности в том что бы :

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

научить это дикое меню помнить пункт меню выбранный

Либо это у меня утренняя тупка...

@Taatshi · 15.04.2013, 09:42

Не по теме:

and_y87, человек впервые взялся за веб. Он и так движется семимильными шагами. Дайте ему сообразить)

@Lord_Voodoo · 15.04.2013, 09:42 **[ТС]**

значит будем переделывать... переходить от дикого кодинга к осмысленного, всем спасибо за помощь

@and_y87 · 15.04.2013, 09:43

Не по теме:

Taatshi,
Lord_Voodoo, Ну практика это самое лучшее средство что бы : понять и научиться...

zhibirc 650 / 235 / 77 Регистрация: 18.02.2013 Сообщений: 784
	13.04.2013, 14:52	2
	:visited ? 0

@Lord_Voodoo Супер-модератор 8783 / 2536 / 144 Регистрация: 07.03.2007 Сообщений: 11,873
	13.04.2013, 15:04 [ТС]	3
	!i, нет, на это никак не реагирует вообще... А еще вопрос, как сделать подложку для блока текста, с изменяющимся размером по высоте... Миниатюры 0

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	13.04.2013, 17:24	4
	Lord_Voodoo, а шаблон уже на Joomla или еще только в процессе блочной верстки? Если только верстка - все эти вопросы снимаем и сначала сажаем шаблон на Joomla. 0

@Lord_Voodoo Супер-модератор 8783 / 2536 / 144 Регистрация: 07.03.2007 Сообщений: 11,873
	14.04.2013, 09:34 [ТС]	8
	Taatshi, проблема в том, что у меня это div, обернутый ссылкой... и мне надо как-то выбранный пункт запоминать... потому что и переход, и под мышкой и клик у меня уже работают... а до хостинга еще далеко, совсем сайт пустой а как сделать именно меню, но с разными подложками под каждый пункт меню? Ни один из примеров в нете мне не помог 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 94
	15.04.2013, 09:28	11
	Lord_Voodoo, 1. Работать с уками - запоминать в них последнюю нажатую ссылку из меню и при загрузке страницы проверять куку что вней и работать с id в куках... 2. Get запрос в адресной строке... каждой ссылке сделай её уникальный id и передавать его в адресной строке... далее так же, загрузке страницы проверять GET переменную - что вней и работать с полученным id ... Добавлено через 32 секунды Если на php то в сессии можно хранить... 1

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	15.04.2013, 09:37	12
	and_y87, все это движок уже делает. 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 94
	15.04.2013, 09:40	13
	Taatshi, тогда не вижу сложности в том что бы : Сообщение от Lord_Voodoo научить это дикое меню помнить пункт меню выбранный Либо это у меня утренняя тупка... 0

@Taatshi
	15.04.2013, 09:42 #14
	Не по теме: and_y87, человек впервые взялся за веб. Он и так движется семимильными шагами. Дайте ему сообразить) 0

@Lord_Voodoo Супер-модератор 8783 / 2536 / 144 Регистрация: 07.03.2007 Сообщений: 11,873
	15.04.2013, 09:42 [ТС]	15
	значит будем переделывать... переходить от дикого кодинга к осмысленного, всем спасибо за помощь 0

@and_y87
	15.04.2013, 09:43 Меню из картинки, активный пункт #16
	Не по теме: Taatshi, Lord_Voodoo, Ну практика это самое лучшее средство что бы : понять и научиться... 0