Tomsk Sysadmins Forum
Windows => Программирование => Topic started by: Martin on May 20, 2006, 12:04:48
-
1. Как сделать разворачивающеся меню? (по типу как вот здесь http://www.darim.ru/ (http://www.darim.ru/) или http://www.rss.tomsk.ru/ (http://www.rss.tomsk.ru/) ) Нужно использовать JS или CSS?
2. Квак сделать кнопки, чтобы при наведение мушки в них менялась картинка?
3. Есть ли теги подобные этому   ?
4. Как заменить стиль срола сбоку (т.с. вставить свою картинку)?
-
1. Как сделать разворачивающеся меню? (по типу как вот здесь http://www.darim.ru/ (http://www.darim.ru/) или http://www.rss.tomsk.ru/ (http://www.rss.tomsk.ru/) ) Нужно использовать JS или CSS?
В большинстве случаев нужно использовать и то и другое..
2. Квак сделать кнопки, чтобы при наведение мушки в них менялась картинка?
Смотри в css на предмет cursor.
3. Есть ли теги подобные этому ?
Есть - смотри спецификацию HTML 4
4. Как заменить стиль срола сбоку (т.с. вставить свою картинку)?
А оно надобно? Я вообще сомневаюсь, что это возможно (просто не пытался такое сделать). Даже если это возможно - сомневаюсь, что будет работать во все браузерах. Кроме того, многие люди в браузерах ставят свои темы и в них весь вид конпок и скрола может выглядеть по разному и им может не понравиться такое изменение...
-
Спасибо!
Не думал, что так быстро получу ответ в JS как делать разворачивающиеся меню (сверху вниз) хотябы примерно.
Вот заготовка сайта с кучей програмного кода. Я готовый через XaraWebStyle создал. Фигня, конечно, но мне нужно примерно такое меню сдела.
-
Спасибо!
Не думал, что так быстро получу ответ в JS как делать разворачивающиеся меню (сверху вниз) хотябы примерно.
Вот заготовка сайта с кучей програмного кода. Я готовый через XaraWebStyle создал. Фигня, конечно, но мне нужно примерно такое меню сдела.
А просмотреть исходный код страниц приведенных тобою серверов не судьба?
Вкатце - делаешь лаер (см. в сторону div)в котором прописываешь подменю, который по умолчанию невидим и расположен по определенным координатам (в зависимасти от страницы, координаты могут задаваться жестко или вычисляться на ходу), а на элемент основного меню на OnMouseOver и OnMouseOut поля вешаешь код который показывает и прячет его...
-
Расскажи пожалуйсто подробнее. Не могу разобраться. На странице ничего путнего нет, а в скриплах (*.js) как-то коряво все написано без отступа строки и непонятным шрифтом.
Копирни текст, плиз. Буду очень благодарен!
-
Расскажи пожалуйсто подробнее. Не могу разобраться. На странице ничего путнего нет, а в скриплах (*.js) как-то коряво все написано без отступа строки и непонятным шрифтом.
Копирни текст, плиз. Буду очень благодарен!
Странно у меня js файлы нормально отображаются...
Вобщем посмотрел я в томском адресе - написано там достаточно мощьно - новичку трудно разобраться...
Писать заново мне лень так, что привожу один из первых вариантов простеньких шаблонов, который делал для рассылки жены в Macromedia Dreamweaver несколько лет назад...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как получить Российское гражданство в Томске? Выпуск 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
.hT {
color: #0000FF;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
}
.menu {
background-color: #FFFFFF;
}
body {
background-image: url(fon.jpg);
margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.head {
font-size: 24px;
font-weight: bold;
color: #0000FF;
font-family: Arial, Helvetica, sans-serif;
}
a:link, a:visited {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #FF0000;
text-decoration: none;
cursor: hand;
}
a:hover {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #FF0000;
text-decoration: underline;
cursor: hand;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #333399;
text-align: left;
white-space: normal;
float: none;
margin: 1px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FF0099;
text-decoration: none;
text-align: center;
margin-top: 2px;
margin-bottom: 6px;
}
.mhead {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #0000FF;
text-decoration: none;
}
.mtext {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
.mtextb {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<!-- всплывающая таблица (начало)-->
<div id="listpvs" style="position:absolute; top:125px; width:386px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden; left: 0;">
<table width="100%" cellspacing="1" cellpadding="1">
<tr>
<td bgcolor="#000000"><table width="100%" cellspacing="1" cellpadding="1">
<tr bgcolor="#FFFFFF">
<td colspan="2"><div align="center" class="mhead">Адреса ПВС г. Томска </div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td class="mtextb"> Кировского РОВД </td>
<td class="mtext"> Учебная 10 </td>
</tr>
<tr bgcolor="#FFFFFF">
<td class="mtextb"> Советского РОВД </td>
<td class="mtext"> Фрунзе 119 </td>
</tr>
<tr bgcolor="#FFFFFF">
<td class="mtextb">Октябрьского РОВД </td>
<td class="mtext"> И.Черных 38 </td>
</tr>
<tr bgcolor="#FFFFFF">
<td class="mtextb">Ленинского РОВД </td>
<td class="mtext"> Вокзальная 4 </td>
</tr>
<tr bgcolor="#FFFFFF">
<td class="mtextb"> Томского РОВД </td>
<td class="mtext"> Ленина 90 </td>
</tr>
</table></td>
</tr>
</table>
</div>
<!-- всплывающая таблица (конец)-->
<table width=701>
<tr>
<td>
<table width=700>
<tr>
<td colspan="2"><p><span class="head">Как получить Российское гражданство в Томске?</span></p>
</td>
</tr>
<tr>
<th width="577"><div align="left" class="hT">Выпуск 1 </div></th>
<th width="111"><div align="right" class="hT">Дата </div></th>
</tr>
</table>
<hr width="100%" size="1" color="#00FF00" noshade>
<table width=700>
<tr>
<th width="575"><div align="left"> </div></th>
<th width="113" ><div align="right"><span class="menu"><a href="#" name="layer" onClick="return false;" onMouseOver="MM_showHideLayers('listpvs','','show')" onMouseOut="MM_showHideLayers('listpvs','','hide')"> ПВС г. Томска</a></span></div></th>
</tr>
</table>
<hr width="100%" size="1" color="#00FF00" noshade>
<table width=700>
<tr>
<td colspan="2" ><h1>тест заголовка</h1>
<p>прошвапрвдимдвывды ывагпыадгшпыавпыгшв </p>
<p>nkjhjhkjhkjhkhjkhk jghhjg hjg jhg jhg jhg hg hg hjghgjhghjghj hgjhghjghj hgjhghjg jhghjgjh jhghjguygygy ygygygyu uyiyuyuyu uyiuy uyuy uy uy u uy uiuy uiy yuiy uy uy uy uy uy uy uy y uyiuy u y </p></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Тут внимательней смотри функцию MM_showHideLayers() - она отвечает за скрытие и показываения лаера... Лаер определен в начале страницы... Размер и положение там заданы жестко, но чаще всего в меню его вычисляют динамически и подставляют через функции js...
Функции я сам не писал - они просто взяты из библиотеки дримвейвера...
Для начала я думаю хватит... Потом можно усложнять
-
Спасибо большо! Я очень рад! Щас разбираться буду.
Ещё раз спасибо!
-
Кстати, выпадающее меню можно сделать и без js используя только css...
См, например, http://nix.ru/price/price.html (http://nix.ru/price/price.html)
В кратце создаем, например, такие стили (взято с приведенного адреса)
#container {width: 100%;float: left;margin-right: -205px;margin-top:5px;}
#nav, #nav ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #5a77a1;
border-bottom: 1px solid #5a77a1;
background: #F2F7FE;
float: left;
width: 100%;
}
#nav li {
float: left;
position: relative;
background: #F2F7FE;
back\ground: none;
}
#nav a {
color: #5a77a1;
font-weight: bold;
text-decoration: none;
display: block;
width: 100px;
padding: 4px 10px;
background: url(/art/dot.png) repeat-y right;
}
#nav a:hover {
color: #000;
background: #ccc;
}
#nav li:hover,
#nav li.jshover {
background: #F2F7FE;
}
#nav li ul {
display: none;
position: absolute;
background: url(/art/tr.png);
padding: 8px 0;
width: 138px;
}
#nav li li a {
width: 118px;
background: none;
}
#nav li:hover ul,
#nav li.jshover ul {
display: block;
}
#nav li:hover li ul,
#nav li.jshover li ul {
display: none;
width: 138px;
top: -9px;
left: 118px;
lef\t: 133px;
}
#nav li:hover li:hover ul,
#nav li.jshover li.jshover ul {
display: block;
}
И прописываем на странице, например, следующее
<table width='100%'>
<tr><td>
<div id='container'>
<ul id='nav'>
<li><a href='/'>Главная</a>
<ul>
<li><a href='/about.html'>О фирме</a></li>
<li><a href='/links.html'>Контакты</a></li>
</ul>
</li>
<li><a href='/documents/how_to_buy_right.html'>Как купить?</a>
<ul>
<li><a href='/dealers/howtofindus.html'>Где купить?</a></li>
<li><a href='/autocatalog/news/news.html'>Новинки</a></li>
</ul>
</li>
<li><a href='/price/price.html'>Прайс-лист</a>
<ul>
<li><a href='/price/virtualshop.html'>общий</a></li>
<li><a href='/include/get_price.php?file=Nix3.ZIP'>общий в ZIP-архиве</a></li>
<li><a href='/price/nix276.html'>на компьютеры</a></li>
<li><a href='ftp://ftp2.nix.ru/download/price/NixSH.ZIP'>уцененный товар</a></li>
<li><a href='ftp://ftp2.nix.ru/download/price/COMP_SH.ZIP'>компьютеры б.у.</a></li>
</ul>
</li>
<li><a href='/home_delivery.html'>Доставка</a>
<ul>
<li><a href='/home_delivery.html'>по Москве</a></li>
<li><a href='/region_delivery.html'>по России</a></li>
</ul>
</li>
<li><a href='/autocatalog/cc/main.html'>Каталог</a>
<ul>
<li><a href='/documents/dealers_check.php'>Обновления</a></li>
<li><a href='/rights.html'>Правила использования</a></li>
</ul>
</li>
<li><a href='/support/'>Техподдержка</a></li>
</div></td></tr></table>
Тут то же будет выпадающее сверху меню... Положение на странице я не менял, так что в оторваном виде может отображаться некорректно...