|
|
|
| Здравствуйте, надеюсь на помощь.
При наведении на меню открывается список подменю, а при наведении на конкретную иконку подменю иконка отображается в большем размере.
Так вот, как сделать что бы по умолчанию при открытии странички (без наведения на меню!) открывалось подменю и увеличенная иконка, а при наведении на другое подменю дефаултное подменю убиралось! (Ссылка на робочее меню http://www.edu.vn.ua , как его переделать?)
Вот 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;}
#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;}
|
Это хтмл код
<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"><? $LL ? print 'Официальный сайт ФМГ №17 г.Винница. История, традиции, структура, контакты' :print 'Офіційний сайт ФМГ №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"><? $LL ? print 'Официальный сайт управления образования и науки Винницкой облгосадминистрации' :print 'Офіційний сайт управління освіти і науки Вінницької облдержадміністрації' ?></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"><? $LL ? print 'Официальный сайт управления образования Винницкого городского совета' :print 'Офіційний сайт управління освіти Вінницької міської ради' ?></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"><? $LL ? print 'Система электронного документооборота управления образования Винницкого городского совета' :print 'Система електронного документообігу управління освіти Вінницької міської ради' ?></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"><? $LL ? print 'Официальный сайт Винницкого областного института последипломного образования педработников' :print 'Офіційний сайт Вінницького обласного інституту післядипломної освіти педпрацівників' ?></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"><? $LL ? print 'IOS. Сервер управления учебным процессом' :print '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"><? $LL ? print 'IOS. Система он-лайн поддержки учебного процесса' :print '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"><? $LL ? print 'Дистанционная проверка знаний' :print 'Дистанційна перевірка знань' ?></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"><? $LL ? print 'Винницкий городской центр дистанционного образования' :print 'Вінницький міський центр дистанційної освіти' ?></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"><? $LL ? print 'Сайт любителей астрономии' :print 'Сайт любителів астрономії' ?></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"><? $LL ? print 'Электронная версия газеты Гимназист' :print 'Електронна версія газети Гімназист' ?></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"><? $LL ? print 'Межшкольный образовательно производственный центр<br>г. Винницы' :print 'Міжшкільний освітньо-виробничий центр м. Вінниці' ?></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"><? $LL ? print 'Сайт детского клубу<br>"За здоровый образ жизни"' :print 'Сайт дитячого клубу<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"><? $LL ? print 'Сайт гимназистов ФМГ №17' :print 'Сайт гімназистів ФМГ №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"><? $LL ? print 'Сайт веб-студии ФМГ №17<br>г. Винницы' :print 'Сайт веб-студії ФМГ №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"><? $LL ? print 'Веб-доступ к почте пользователей портала' :print 'Веб-доступ до пошти користувачів порталу' ?></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"><? $LL ? print 'Сайт Всеукраинского центра проведения олимпиад учеников в Интернете' :print 'Сайт Всеукраїнського центру проведення олімпіад учнів в Інтернеті' ?></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"><? $LL ? print 'Сайт Всеукраинской комплексной олимпиады Турнир Чемпионов' :print 'Сайт Всеукраїнської комплексної олімпіади Турнір Чемпіонів' ?></div></b></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<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="sh1 shop1" href="http://likt.edu.vn.ua/" target="_blank"><b><img border=0 src="images/19_19.png"/><br><div class="text"><? $LL ? print 'ЛИКТ физико-математической гимназии №17 г. Винницы' :print 'ЛІКТ фізико-математичної гімназії №17 м. Вінниці' ?></div></b></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
|
Дальше 3 картинки:
1. без наведения на меню, http://your-photo.ucoz.ru/_ph/27/662212028.jpg
2. при наведении на подменю и http://your-photo.ucoz.ru/_ph/27/929889616.jpg
3. при наведении на иконку. http://your-photo.ucoz.ru/_ph/27/807774711.jpg
Последняя картинка это так как должно быть при входе на страничку! | |
|
|
|
|
|
|
|
для: yarik44
(16.09.2009 в 14:49)
| | тут css/html не поможет ... нужно к js обращаться | |
|
|
|
|
|
|
|
для: yarik44
(16.09.2009 в 14:49)
| | Да не, чисто реоретически можно все сделать средствами css, с минимальным добавлением js (естественно исключительно для ie6)
Но разбираться в таком количестве кода мне не очень интересно.
Сократити его до минимуим, что бы осталать только суть вопроса. | |
|
|
|