Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 15.09.2009, 20:34   #1
gothic1305
Новичок
Джуниор
 
Регистрация: 15.09.2009
Сообщений: 4
Вопрос Как сделать что бы по умолчанию открывалось подменю??????

Здравствуйте, надеюсь на помощь.

При наведении на меню открывается список подменю, а при наведении на конкретную иконку подменю иконка отображается в большем размере.
Так вот, как сделать что бы по умолчанию при открытии странички (без наведения на меню!) открывалось подменю и увеличенная иконка, а при наведении на другое подменю дефаултное подменю убиралось! (Ссылка на робочее меню, как его переделать?)

Вот CSS код:

Код:

#info {padding-bottom:100px;}

#menu {left: -105px; padding: 0px 0 0 0; margin: 0px 0 0 0; list-style:none; position:relative; width:270px; height:0px; border: 0px double black;}
#menu ul {background:#000000; position:absolute; padding:15px 0 0 0px; margin: 0px 0 0 100px; list-style:none; left:-9999px; width:0px; height:140px; background:url(trans.gif); border: 0px double black;}
#menu li {display:block; width80px; height:70px; position:absolute; text-decoration:none; color:#000; left:0px; margin:-315px 0px 0px 0px;}

#menu li a {display:block; width:80px; height:70px; text-decoration:none; color:#000; margin:0px 0 0 0px;}
#menu li a b {position:absolute; left:-9999px; display:block; width:250px; height:0px; text-align:center; font-family:arial, sans-serif; font-size:12px;}

#menu li.home {background:url(images/no.png); 	left:-50px; top:0;}
#menu li.pmg {background:url(images/no.png); 	left:-38px; top:75px;}
#menu li.pmgo {background:url(images/no.png); 	left:-36px; top:150px;}
#menu li.image {background:url(images/no.png); 	left:-35px; top:228px;}
#menu li.shop {background:url(images/no.png); 	left:443px; top:6px;}
#menu li.cash {background:url(images/money.gif); 	left:440px; top:70px;}
#menu li.music {background:url(images/sound.gif); 	left:440px; top:140px;}
#menu li.mail {background:url(images/mail.gif); 	left:440px; top:210px;}

#menu li a:hover {border:0; z-index:500;}

#menu li.home a:hover ul, #menu li.home:hover ul 		{left:-110px; top:65px;}
#menu li.pmg a:hover ul, #menu li.pmg:hover ul			{left:-110px; top:65px;}
#menu li.pmgo a:hover ul, #menu li.pmgo:hover ul		{left:-110px; top:65px;}
#menu li.image a:hover ul, #menu li.image:hover ul 		{left:-110px; top:65px;}
#menu li.shop a:hover ul, #menu li.shop:hover ul 		{left:-110px; top:65px;}
#menu li.cash a:hover ul, #menu li.cash:hover ul 		{left:-195px; top:-105px;}
#menu li.music a:hover ul, #menu li.music:hover ul 		{left:-195px; top:-65px;}
#menu li.mail a:hover ul, #menu li.mail:hover ul 		{left:-195px; top:0px;}

#menu :hover ul li {width:40px; height:40px; margin:0px 0 0 0px;}

#menu :hover ul li a {position:absolute; display:block; width:40px; height:40px;}

#menu li ul li a.h1 {left:90px; top:-45px;}
#menu li ul li a.h2 {left:95px; top:-5px;}
#menu li ul li a.h3 {left:99px; top:35px;}
#menu li ul li a.h4 {left:102px; top:75px;}
#menu li ul li a.h5 {left:104px; top:115px;}

#menu li ul li a.pe1 {left:86px; top:-50px;}
#menu li ul li a.pe2 {left:89px; top:-10px;}
#menu li ul li a.pe3 {left:92px; top:30px;}
#menu li ul li a.pe4 {left:93px; top:70px;}
#menu li ul li a.pe5 {left:94px; top:110px;}

#menu li ul li a.po1 {left:84px; top:-140px;}
#menu li ul li a.po2 {left:87px; top:-100px;}
#menu li ul li a.po3 {left:89px; top:-60px;}
#menu li ul li a.po4 {left:90px; top:-20px;}
#menu li ul li a.po5 {left:91px; top:20px;}
#menu li ul li a.po6 {left:92px; top:60px;}

#menu li ul li a.p1 {left:90px; top:-58px;}
#menu li ul li a.p2 {left:91px; top:-18px;}

#menu li ul li a.sh1 {left:-30px; top:-47px;}
#menu li ul li a.sh2 {left:-30px; top:-10px;}
#menu li ul li a.sh3 {left:-30px; top:30px;}


#menu li ul li a.mo1 {left:60px; top:120px;}
#menu li ul li a.mo2 {left:60px; top:160px;}
#menu li ul li a.mo3 {left:60px; top:200px;}

#menu li ul li a.s1 {left:60px; top:72px;}
#menu li ul li a.s2 {left:60px; top:112px;}
#menu li ul li a.s3 {left:60px; top:152px;}

#menu li ul li a.m1 {left:60px; top:-102px;}
#menu li ul li a.m2 {left:60px; top:-62px;}
#menu li ul li a.m3 {left:60px; top:-22px;}
#menu li ul li a.m4 {left:60px; top:18px;}


#menu li.home a:hover b, #menu li.home:hover b 		{left:150px; top:90px;}
#menu li.pmg a:hover b, #menu li.pmg:hover b 		{left:150px; top:70px;}
#menu li.pmgo a:hover b, #menu li.pmgo:hover b		{left:150px; top:0px;}
#menu li.image a:hover b, #menu li.image:hover b 	{left:150px; top:-70px;}
#menu li.shop a:hover b, #menu li.shop:hover b 		{left:-150px; top:140px;}
#menu li.cash a:hover b, #menu li.cash:hover b 		{left:-150px; top:70px;}
#menu li.music a:hover b, #menu li.music:hover b 	{left:-150px; top:0px;}
#menu li.mail a:hover b, #menu li.mail:hover b 		{left:-150px; top:-70px;}

Последний раз редактировалось gothic1305; 16.09.2009 в 13:16.
gothic1305 вне форума Ответить с цитированием
Старый 15.09.2009, 20:35   #2
gothic1305
Новичок
Джуниор
 
Регистрация: 15.09.2009
Сообщений: 4
По умолчанию

продолжение CSS

Код:
#menu li.home a:hover ul li a b,
#menu li.pmg a:hover ul li a b,
#menu li.pmgo a:hover ul li a b,
#menu li.image a:hover ul li a b,
#menu li.shop a:hover ul li a b,
#menu li.cash a:hover ul li a b,
#menu li.music a:hover ul li a b,
#menu li.mail a:hover ul li a b,
#menu li.home:hover ul li a b,
#menu li.pmg:hover ul li a b,
#menu li.pmgo:hover ul li a b,
#menu li.image:hover ul li a b,
#menu li.shop:hover ul li a b,
#menu li.cash:hover ul li a b,
#menu li.music:hover ul li a b,
#menu li.mail:hover ul li a b {left:-9999px; background:#fff;}

#menu li ul li a.home1 {background:url(images/01.png);}
#menu li ul li a.home2 {background:url(images/02.png);}
#menu li ul li a.home3 {background:url(images/03.png);}
#menu li ul li a.home4 {background:url(images/04.png);}
#menu li ul li a.home5 {background:url(images/05.png);}

#menu li ul li a.pmg1 {background:url(images/06.png);}
#menu li ul li a.pmg2 {background:url(images/07.png);}
#menu li ul li a.pmg3 {background:url(images/08.png);}
#menu li ul li a.pmg4 {background:url(images/09.png);}
#menu li ul li a.pmg5 {background:url(images/10.png);}

#menu li ul li a.pmgo1 {background:url(images/11.png);}
#menu li ul li a.pmgo2 {background:url(images/12.png);}
#menu li ul li a.pmgo3 {background:url(images/13.png);}
#menu li ul li a.pmgo4 {background:url(images/14.png);}
#menu li ul li a.pmgo5 {background:url(images/15.png);}
#menu li ul li a.pmgo6 {background:url(images/16.png);}

#menu li ul li a.image1 {background:url(images/17.png);}
#menu li ul li a.image2 {background:url(images/18.png);}

#menu li ul li a.shop1 {background:url(images/19.png);}
#menu li ul li a.shop2 {background:url(images/likt2.png);}
#menu li ul li a.shop3 {background:url(images/likt3.png);}


#menu li ul li a.money1 {background:url(images/money1.gif);}
#menu li ul li a.money2 {background:url(images/money2.gif);}
#menu li ul li a.money3 {background:url(images/money3.gif);}

#menu li ul li a.sound1 {background:url(images/sound1.gif);}
#menu li ul li a.sound2 {background:url(images/sound2.gif);}
#menu li ul li a.sound3 {background:url(images/sound3.gif);}

#menu li ul li a.mail1 {background:url(images/mail1.gif);}
#menu li ul li a.mail2 {background:url(images/mail2.gif);}
#menu li ul li a.mail3 {background:url(images/mail3.gif);}
#menu li ul li a.mail4 {background:url(images/mail4.gif);}


#menu :hover ul li a.h1:hover b {left:85px; top:75px;}
#menu :hover ul li a.h2:hover b {left:80px; top:35px;}
#menu :hover ul li a.h3:hover b {left:76px; top:-5px;}
#menu :hover ul li a.h4:hover b {left:73px; top:-45px;}
#menu :hover ul li a.h5:hover b {left:71px; top:-85px;}

#menu :hover ul li a.pe1:hover b {left:77px; top:5px;}
#menu :hover ul li a.pe2:hover b {left:74px; top:-35px;}
#menu :hover ul li a.pe3:hover b {left:71px; top:-75px;}
#menu :hover ul li a.pe4:hover b {left:70px; top:-115px;}
#menu :hover ul li a.pe5:hover b {left:69px; top:-155px;}

#menu :hover ul li a.po1:hover b {left:77px; top:20px;}
#menu :hover ul li a.po2:hover b {left:74px; top:-20px;}
#menu :hover ul li a.po3:hover b {left:72px; top:-60px;}
#menu :hover ul li a.po4:hover b {left:71px; top:-100px;}
#menu :hover ul li a.po5:hover b {left:70px; top:-140px;}
#menu :hover ul li a.po6:hover b {left:69px; top:-180px;}

#menu :hover ul li a.p1:hover b {left:70px; top:-140px;}
#menu :hover ul li a.p2:hover b {left:69px; top:-180px;}

#menu :hover ul li a.sh1:hover b {left:-299px; top:71px;}
#menu :hover ul li a.sh2:hover b {left:60px; top:190px;}
#menu :hover ul li a.sh3:hover b {left:60px; top:230px;}

#menu :hover ul li a.mo1:hover b {left:60px; top:120px;}
#menu :hover ul li a.mo2:hover b {left:60px; top:160px;}
#menu :hover ul li a.mo3:hover b {left:60px; top:200px;}

#menu :hover ul li a.s1:hover b {left:60px; top:72px;}
#menu :hover ul li a.s2:hover b {left:60px; top:112px;}
#menu :hover ul li a.s3:hover b {left:60px; top:152px;}

#menu :hover ul li a.m1:hover b {left:60px; top:-102px;}
#menu :hover ul li a.m2:hover b {left:60px; top:-62px;}
#menu :hover ul li a.m3:hover b {left:60px; top:-22px;}
#menu :hover ul li a.m4:hover b {left:60px; top:18px;}

Последний раз редактировалось gothic1305; 15.09.2009 в 20:46.
gothic1305 вне форума Ответить с цитированием
Старый 15.09.2009, 20:37   #3
gothic1305
Новичок
Джуниор
 
Регистрация: 15.09.2009
Сообщений: 4
По умолчанию

а вот его HTML код:

Код HTML:
<ul id="menu" style="position:relative; margin: 0px 0px 0px 00px; padding: 0px 0px 0px 0px; 0px double black;">
	<li class="home"><a href="#url"><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a class="h1 home1" href="http://www.pmg17.vn.ua/" target="_blank"><b><img border=0 src="images/01_1.png"/><br><div class="text">Офіційний сайт ФМГ №17 м. Вінниці.<br>Історія, традиції, структура, контакти</div></b></a></li>
			<li><a class="h2 home2" href="http://ouo.edu.vn.ua/" target="_blank"><b><img border=0 src="images/02_2.png"/><br><div class="text">Офіційний сайт управління освіти і науки Вінницької облдержадміністрації</div></b></a></li>
			<li><a class="h3 home3" href="http://vmuo.edu.vn.ua/index" target="_blank"><b><img border=0 src="images/03_3.png"/><br><div class="text">Офіційний сайт управління  освіти Вінницької міської ради</div></b></a></li>
			<li><a class="h4 home4" href="http://vmuodoc.edu.vn.ua/" target="_blank"><b><img border=0 src="images/04_4.png"/><br><div class="text">Система електронного документообігу управління освіти Вінницької міської ради</div></b></a></li>
			<li><a class="h5 home5" href="http://www.voipopp.vn.ua/" target="_blank"><b><img border=0 src="images/05_5.png"/><br><div class="text">Офіційний сайт  Вінницького обласного інституту післядипломної освіти педпрацівників</div></b></a></li>

		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="pmg"><a href="#url"><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a class="pe1 pmg1" href="http://ios.edu.vn.ua/" target="_blank"><b><img border=0 src="images/06_6.png"/><br><div class="text">IOS. Сервер управління навчальним процесом</div></b></a></li>
			<li><a class="pe2 pmg2" href="http://disted.edu.vn.ua/" target="_blank"><b><img border=0 src="images/07_7.png"/><br><div class="text">IOS. Система он-лайн підтримки навчального процесу</div></b></a></li>
			<li><a class="pe3 pmg3" href="http://test.edu.vn.ua/" target="_blank"><b><img border=0 src="images/08_8.png"/><br><div class="text">Дистанційна перевірка знань</div></b></a></li>
			<li><a class="pe4 pmg4" href="http://distance.edu.vn.ua/" target="_blank"><b><img border=0 src="images/09_9.png"/><br><div class="text">Вінницький міський центр дистанційної освіти</div></b></a></li>
			<li><a class="pe5 pmg5" href="http://www.galaxy.vinnica.ua/" target="_blank"><b><img border=0 src="images/10_10.png"/><br><div class="text">Сайт любителів астрономії</div></b></a></li>

		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="pmgo"><a href="#url"><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a class="po1 pmgo1" href="http://www.pmg17.vn.ua/newspaper/" target="_blank"><b><img border=0 src="images/11_11.png"/><br><div class="text">Електронна версія газети Гімназист</div></b></a></li>
			<li><a class="po2 pmgo2" href="http://mnvc.edu.vn.ua/" target="_blank"><b><img border=0 src="images/12_12.png"/><br><div class="text">Міжшкільний освітньо-виробничий центр м. Вінниці</div></b></a></li>
			<li><a class="po3 pmgo3" href="http://aids.edu.vn.ua/" target="_blank"><b><img border=0 src="images/13_13.png"/><br><div class="text">Сайт дитячого клубу<br>"За здоровий спосіб життя"</div></b></a></li>
			<li><a class="po4 pmgo4" href="http://student.pmg17.vn.ua/" target="_blank"><b><img border=0 src="images/14_14.png"/><br><div class="text">Сайт гімназистів ФМГ №17</div></b></a></li>
			<li><a class="po5 pmgo5" href="http://web.edu.vn.ua/" target="_blank"><b><img border=0 src="images/15_15.png"/><br><div class="text">Сайт веб-студії ФМГ №17 м. Вінниці</div></b></a></li>
			<li><a class="po6 pmgo6" href="http://www.edu.vn.ua/webmail/src/" target="_blank"><b><img border=0 src="images/16_16.png"/><br><div class="text">Веб-доступ до пошти користувачів порталу</div></b></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="image"><a href="#url"><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul>
			<li><a class="p1 image1" href="http://www.olymp.vinnica.ua/" target="_blank"><b><img border=0 src="images/17_17.png"/><br><div class="text">Сайт Всеукраїнського центру проведення олімпіад учнів в Інтернеті</div></b></a></li>
			<li><a class="p2 image2" href="http://complex.edu.vn.ua/" target="_blank"><b><img border=0 src="images/18_18.png"/><br><div class="text">Сайт Всеукраїнської комплексної олімпіади Турнір Чемпіонів</div></b></a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
gothic1305 вне форума Ответить с цитированием
Старый 15.09.2009, 20:39   #4
gothic1305
Новичок
Джуниор
 
Регистрация: 15.09.2009
Сообщений: 4
По умолчанию

Продолжение Html

Код HTML:
	<li class="shop"><a href="#url"><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a class="sh0 shop0" href="http://likt.edu.vn.ua/" target="_blank"><b><img border=0 src="images/19_19.png"/><br><div class="text">ЛІКТ фізико-математичної гімназії №17 м. Вінниці</div></b></a></li>
			
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

</ul>
Дальше 3 картинки: без наведения на меню, при наведении на подменю и при наведении на иконку. Последняя картинка это так как должно быть при входе на страничку!




Последний раз редактировалось gothic1305; 16.09.2009 в 09:30.
gothic1305 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как динамически создать процедуры для подменю компонента TMainMenu Dimitriys Общие вопросы Delphi 9 13.01.2011 18:02
Что и как надо сделать?? Кириллович Помощь студентам 3 25.05.2009 12:43
Структуры. Как сделать, что-бы код заработал? Иллидан Общие вопросы C/C++ 1 19.05.2008 13:19
Как добавить подменю в системное контекстное меню Lucky13 Win Api 5 19.03.2007 20:17
Как сделать, что бы распечатать??? slim-vm Microsoft Office Excel 2 19.03.2007 06:01