Общее Расширения Картинки Мультимедиа Коды Дизайн ЧаВо Поиск

meinhart

NaviOnTop

Навигация вверху

Использованы материалы из http://homepage-baukasten.de/forum/viewtopic.php?t=5678 (Автор: Wolle)
Если вдруг кто нибудь захочет разместить навигацию сверху, то:
1. Нужно вставить код для "прозрачного" дизайна.
Это делает страницу невидимой, и кое что ещё.
<style type="text/css">
<!--
/*Форматирование текста и ссылок */
p, div, b{color: #000000;}
td.nav a{color: #XXXXXX;font-size: 13px;text-decoration: none;}
a:hover {color: #XXXXXX;font-size: 13px;text-decoration: none;}
a: link {color: #XXXXXX;font-size: 13px;text-decoration: none;}
a:active {color: #XXXXXX;font-size: 13px;text-decoration: none;}
a:visited {color: #XXXXXX;font-size: 13px;text-decoration: none;}

/* Header невидимый*/
td.edit_header_full{visibility: hidden;}

/*Заголовок в Header невидимый */
td.nav_heading{visibility:hidden;}

/*Навигация (собственные кнопки)*/
td.nav{
text-decoration: none;
color:#000000;
width: 185px;
height: 40px;

background-image:url(URL);}

td.nav:hover{
text-decoration: none;
color: #000000;
width: 185px;
height: 40px;

background-image:url(URL);}

td.nav_heading{background-image:url(URL);}
td.edit_below_nav{visibility:hidden;}
td.edit_navi_headbg{background-image:url(URL);}

/*Фиксированный фон*/
body{
background-image:url(http://здесь адрес фона.jpg);
background-repeat:no-repeat;
background-attachment: fixed;}

td.edit_content a{
color:#XXXXXX;
font-size: 13px;
text-decoration: none;}

td.edit_content a:hover {
color: #XXXXXX;
font-size: 13px;
text-decoration: none;}

/*Область текста невидимая*/
td.headline2{visibility:hidden;}
td.edit_content_top{visibility:hidden;}
td.edit_content{background-image:url(URL);background-color:transparent;}
td.edit_content_bottom{visibility:hidden;}
td.edit_content_bottom2{background-image: none;background-color:transparent;}

/*Правые поля невидимые*/
td.edit_rechts_sbg{visibility:hidden;}
td.edit_rechts_cbg{background-image: url(URL);}
td.edit_rechts_bottom{background-image: url(URL);}
td.edit_rb_footer{visibility:hidden;}
td.sidebar_heading{visibility:hidden;}
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: none;background-color:transparent;border:0px dotted black;}
td.shouty2{;}
td.shouty3{;}
td.shouty4{;}
td.shouty5{;}
--></style>
Совет лично от себя, если хотите чтобы информация была видимой, то не ставьте в /*Правые поля*/,
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: none;background-color:transparent;border:0px dotted black;}
td.shouty2{;}
td.shouty3{;}
td.shouty4{;}
td.shouty5{;}
Это делает панель информации невидимой.
2. Чтобы вставить сами ссылки:
&ltcssyle type="text/css" media="screen">
<!--
body
{
font-family: Arial, sans-serif;
font-size: 11px;
overflow: auto;
padding: 13px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 80px;
left: 50%;
margin-left:-290px;
width: 100%;
}

.menu li
{
width: 200px;
float: left;
}

.menu a
{
border: 1px solid #F2F2F2;
background-color:#000C32;
padding-top: 9px;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px 10px;
display: block;
height: 25px;
color: #FFFFFF;
}

.menu a:hover
{
background-color: #000C32;
}

#smenu1, #smenu2, #smenu3
{
font-size: 13px;
display: none;
width: 200px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a
{
font-size: 13px;
font-weight: bold;
padding-top: 9px;
border-top: 0px;
cursor: pointer;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">TITEL Navi-Button 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">TITEL NAVI-Button 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">TITEL NAVI-BUTTON 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://HIER SEITE 1.htm" target="_self">Seiten-Name 1</a></li>
<li><a href="http://HIER SEITE 2.htm" target="_self">Seiten-Name 2</a></li>
<li><a href="http://HIER SEITE 3.htm" target="_self">Seiten-Name 3</a></li>
</ul>
</li>
</ul>
</div>
Вот и всё. Естественно везде можно вставлять свои цвета, и названия.
Удачи.
 
Всего 125801 посетителей
Другие сайты о ru.gg:
Этот сайт был создан бесплатно с помощью homepage-konstruktor.ru. Хотите тоже свой сайт?
Зарегистрироваться бесплатно