НашаРаша

Главная | Регистрация | Вход
Пятница, 10.01.2025, 02:08
Приветствую Вас Гость | RSS
DOZ.UCOZ.NET-НашаРаша
Добавь в закладки
Меню сайта
Погода Тюхтет
GISMETEO: Погода по г.Тюхтет



Электротовары
Главная » Статьи » Интернет и технологии сети » HTML

рублей Яндекс.Деньгами
на счет 41001811770512 (Поддержи проект Наша Раша)
Загрузка...
Мега панель

Качаем архив и распаковываем в корень сайта.

Этот код ставим в самый верх сайта:

Code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<title>Мега панель с выпадающими пунктами</title>
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;  
</style>
<![endif]-->
</head>
<body>
<ul id="menu">
<li><a href="#" class="drop">Паспорт</a><!-- Начало пункта Паспорт -->
<div class="dropdown_2columns"><!-- Начало контейнера профиль -->
<div class="col_2">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="17" background="/border/0-1.png" height="17">
</td>
<td background="/border/0-2.png" height="17">
</td>
<td width="17" background="/border/0-3.png" height="17">
</td>
</tr>
<tr>
<td width="17" background="/border/0-4.png">
</td>
<td style="padding:20px;">
<DIV align="center"><script language="JavaScript">  
function process(){}  
today = new Date()  
if((today.getHours() < 12) && (today.getHours() >= 6))  
{ document.write("<b>Доброе утро, $USERNAME$.</b>")}  
if((today.getHours() >= 12) && (today.getHours() < 18))  
{ document.write("<b>Добрый день, $USERNAME$.</b>")}  
if((today.getHours() >= 18) && (today.getHours() <= 23))  
{ document.write("<b>Добрый вечер, $USERNAME$.</b>")}  
if((today.getHours() >= 0) && (today.getHours() < 4))  
{ document.write("<b>Доброй ночи, $USERNAME$</b>")}  
if((today.getHours() >= 4) && (today.getHours() <= 6))  
{ document.write("<b>Не спиться? $USERNAME$</b>")}  
</script>  
<img class="userAvatar" title="$USERNAME$" src="$USER_AVATAR_URL$" border="0"><img class="userAvatar" title="$USERNAME$" src="/img/891194400.png" border="0"><img class="userAvatar" title="$USERNAME$" src="/img/744843989.jpg" border="0"><br>  
  
  
  <center>
  <script language="JavaScript">  
  now = new Date()  
  if (now.getDay() == 0)  
  document.write("Отдыхайте, завтра рабочий день...")  
  if (now.getDay() == 1)  
  document.write("Сегодня понедельник - настраивайтесь на работу")  
  if (now.getDay() == 2)  
  document.write("Уже вторник, понедельник к счастью позади!")  
  if (now.getDay() == 3)  
  document.write("Половина недели позади - сегодня уже среда")  
  if (now.getDay() == 4)  
  document.write("Сегодня четверг, скоро выходные...")  
  if (now.getDay() == 5)  
  document.write("Сегодня пятница - Ура, седня последний день!")  
  if (now.getDay() == 6)  
  document.write("Сегодня суббота - выходной день!")  
  </script>
<div align="left">
  <li>
  <a style="color: black;">
  <img src="$HOME_PAGE_LINK$/img/user/time.png">
  Ты здесь:  
  <font color="#FF0000">
  <b>$USER_REG_DAYS$</b>
  </font>
  -й день  
  </a>
  </li>
  <li>
  <a href="$PERSONAL_PAGE_LINK$" rel="nofollow" onclick="window.open('$PERSONAL_PAGE_LINK$','up1','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">
  <img src="$HOME_PAGE_LINK$/img/user/user2.png" border="0" alt="">
  Мой профиль
  </a>
  </li>
  <li>
  <a href="javascript://" onclick="window.open('$HOME_PAGE_LINK$/index/11','edit','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">
  <img src="$HOME_PAGE_LINK$/img/user/setting.png">
  Ред. информацию
  </a>
  </li>
  <li>
  <a href="javascript://" onclick="window.open('$HOME_PAGE_LINK$/index/14-0-0-1','send','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">
  <img src="$HOME_PAGE_LINK$/img/user/send.png">
  Отправить ЛС
  </a>
  </li>
  <li>
  <a href="javascript://" onclick="window.open('$HOME_PAGE_LINK$/index/14','mail','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;">
  <img src="$HOME_PAGE_LINK$/img/user/gmail.png">
  Читать ЛС (
  <b>0</b>
  )
  </a>
  </li>
  </div>
  <div class="col_0">
  <center>
  <a href="javascript://" title="Выход" onclick="if (confirm('Вы действительно хотите выйти?')) {alert('Счастливого пути Вам! Приходите еще! :))');location.href='$HOME_PAGE_LINK$/index/10';} else {alert('Спасибо, что остались! :)).')};">
  <img src="/img/exit.gif" alt="Выход" border="0">
  </a>
  </center>
  </div>  
</td>
<td width="17" background="/border/0-8.png">
</td>
</tr>
<tr>
<td width="17" background="/border/0-7.png" height="17">
</td>
<td background="/border/0-6.png" height="17">
</td>
<td width="17" background="/border/0-5.png" height="17">
</td>
</tr>
</tbody>
</table>
<!-- Конец контейнера профиль -->
</li><!-- Конец пунтка паспорт -->
<li><a href="#" class="drop">Статистика сайта </a><!-- Начало пунтка статистика-->
<div class="dropdown_2columns"><!-- Начало контейнера статистика -->
<div class="col_2">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="17" background="/border/0-1.png" height="17">
</td>
<td background="/border/0-2.png" height="17">
</td>
<td width="17" background="/border/0-3.png" height="17">
</td>
</tr>
<tr>
<td width="17" background="/border/0-4.png">
</td>
<td style="padding:20px;">
<center>
<div class="tOnline" id="onl1">$ONLINE_COUNTER$  
$ONLINE_USERS_LIST$ </center>  
  <br> <center> <a onclick="$('#stat').slideToggle('slow');" href="javascript://"><p class="black_box">Подробнее</p></a> </center>  
  <div id="stat" style="display: none"><center><b>Сегодня были</b><center/>$MYINF_2$ <a href="javascript://" rel="nofollow" onclick="new _uWnd('TdUsrLst',' ',250,200,{autosize:0},{url:'/index/62-2'});return false;" class="fUsrList"><br><p class="black_box">Полный список</p></a><hr>$MYINF_1$</div>  
</div>
</td>
<td width="17" background="/border/0-8.png">
</td>
</tr>
<tr>
<td width="17" background="/border/0-7.png" height="17">
</td>
<td background="/border/0-6.png" height="17">
</td>
<td width="17" background="/border/0-5.png" height="17">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Конец пунтка статистика-->
<!-- Конец контейнера статистика-->
  <li><a href="#" class="drop">Мини чат </a><!-- Начало пунтка чат-->
<div class="dropdown_2columns"><!-- Начало контейнера чат -->
<div class="col_2">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="17" background="/border/0-1.png" height="17">
</td>
<td background="/border/0-2.png" height="17">
</td>
<td width="17" background="/border/0-3.png" height="17">
</td>
</tr>
<tr>
<td width="17" background="/border/0-4.png">
</td>
<td style="padding:20px;">
  <div align="center">  
<a href="javascript://" onclick="new _uWnd('name','Мини чат',800,600,{autosize: 1,modal: 1,align:'center'},$('#mformDiv').html());return false;"><img border="0" src="/img/chat.png" title="Открыть Чат в ajax окне"></a><div id="mformDiv" style="display:none;"><div id="chat">  
  
<center>  
<span id="needtorefresh"><span title="Сейчас онлайн" id="needtorefresh2">  
$ONLINE_USERS_LIST$  
</span></span>  
<br><br>  
</center>  
  
<center>  
$CHAT_BOX$  
<br>  
</center></div>
</div>
  <div class="col_">
  <br> <center><p class="black_box">Правила мини чата</p> </center>  
  <p>Чат создан исключительно для общения!
<p>Запрещается:
<p>- Оставлять отзывы о сайте.  
<p>- Спамить.  
<p>- Просить администрацию о чем-либо.(Есть обратная связь)  
<p>- Критиковать действия администрации сайта.
<p>- Оскорблять других участников.  
<p>В остальном в соответствии с общими правилами сайта.
</p>
  </div>  
</td>
<td width="17" background="/border/0-8.png">
</td>
</tr>
<tr>
<td width="17" background="/border/0-7.png" height="17">
</td>
<td background="/border/0-6.png" height="17">
</td>
<td width="17" background="/border/0-5.png" height="17">
</td>
</tr>
</tbody>
</table>
  </div>
</div>
  <!-- Конец пунтка чат-->
<!-- Конец контейнера чат-->  
<li><a href="#" class="drop">Реклама</a><!-- Начало пунтка реклама -->
<div class="dropdown_4columns"><!-- Начало контейнера реклама -->
<div class="col_4">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="17" background="/border/0-1.png" height="17">
</td>
<td background="/border/0-2.png" height="17">
</td>
<td width="17" background="/border/0-3.png" height="17">
</td>
</tr>
<tr>
<td width="17" background="/border/0-4.png">
</td>
<td style="padding:20px;">
<style type="text/css">  
.sSample {text-align:center;padding:3px;border:1px solid #000000;margin:5px;cursor:pointer;font-size:7pt;}  
.sSampleO {text-align:center;padding:3px;border:1px solid #BEBEBE;margin:5px;cursor:pointer;background:  
</style>  
<div class="sSample" onmouseover="this.className='sSampleO'" onmouseout="this.className='sSample'" onclick="window.open('http://Сайт');"><img src="/img/reklama-.png" border="1"><br>Занять место</div>  
<div class="sSample" onmouseover="this.className='sSampleO'" onmouseout="this.className='sSample'" onclick="window.open('http://Сайт');"><img src="/img/reklama-.png" border="1"><br>Занять место</div>  
<div class="sSample" onmouseover="this.className='sSampleO'" onmouseout="this.className='sSample'" onclick="window.open('http://Сайт');"><img src="/img/reklama-.png" border="1"><br>Занять место</div>  
<div class="sSample" onmouseover="this.className='sSampleO'" onmouseout="this.className='sSample'" onclick="window.open('http://Сайт');"><img src="/img/reklama-.png" border="1"><br>Занять место</div>  
</td>
<td width="17" background="/border/0-8.png">
</td>
</tr>
<tr>
<td width="17" background="/border/0-7.png" height="17">
</td>
<td background="/border/0-6.png" height="17">
</td>
<td width="17" background="/border/0-5.png" height="17">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Конец контейнера рекламма -->
<!-- Конец пункта на реклама -->
<li class="menu_right"><a href="#" class="drop">Меню</a><!-- Начало пункта меню -->
<div class="dropdown_3columns align_right"><!-- Начало контейнера меню-->
<div class="col_3">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="17" background="/border/0-1.png" height="17">
</td>
<td background="/border/0-2.png" height="17">
</td>
<td width="17" background="/border/0-3.png" height="17">
</td>
</tr>
<tr>
<td width="17" background="/border/0-4.png">
</td>
<td style="padding:20px;">
<div class="col_1">
<ul class="greybox">
<li><a href="#"><img src="/img/menu/kfm_home.png" border="0" alt="" />Главная</a></li>
<li><a href="#"><img src="/img/menu/agt_forum.png" border="0" alt="" />Форум</a></li>
<li><a href="#"><img src="/img/menu/news.png" border="0" alt="" />Новости</a></li>
<li><a href="#"><img src="/img/menu/picture.png" border="0" alt="" />Картинки</a></li>
</ul>  
</div>
  <div class="col_1">
<ul class="greybox">
  <li><img src="/img/menu/files.png" border="0" alt="" /><b>Каталог файлов</b></li>
<li><a href="#"><img src="/img/menu/progs.png" border="0" alt="" />Программы </a></li>
<li><a href="#"><img src="/img/menu/games.png" border="0" alt="" />Игры </a></li>
<li><a href="#"><img src="/img/menu/video.png" border="0" alt="" />Видео</a></li>
  </ul>  
</div>
<div class="col_1">
<ul class="greybox">
  <li><img src="/img/menu/584845062582610568.png" border="0" alt="" /><b>Фотошоп</b></li>
<li><a href="#"><img src="/img/menu/image-x-psd.png" border="0" alt="" />PSD</a></li>
<li><a href="#"><img src="/img/menu/edit-clear.png" border="0" alt="" />Кисти </a></li>
<li><a href="#"><img src="/img/menu/stylesheet.png" border="0" alt="" />Стили</a></li>
<li><a href="#"><img src="/img/menu/stock_example.png" border="0" alt="" />Уроки</a></li>
<li><a href="#"><img src="/img/menu/gradients.png" border="0" alt="" />Градиенты</a></li>
  <li><a href="#"><img src="/img/menu/plugins.png" border="0" alt="" />Плагины</a></li>
  </ul>  
</div>
<div class="col_1">
<ul class="greybox">
  <li><img src="/img/menu/uifw.png" border="0" alt="" /><b>Всё для ucoz</b></li>
<li><a href="#"><img src="/img/menu/scripts_code.png" border="0" alt="" />Скрипты </a></li>
<li><a href="#"><img src="/img/menu/gimp.png" border="0" alt="" />Шаблоны</a></li>
<li><a href="#"><img src="/img/menu/redhat-sound_video.png" border="0" alt="" />Видео уроки</a></li>
<li><a href="#"><img src="/img/menu/stop1pressedblue.png" border="0" alt="" />Кнопки</a></li>
<li><a href="#"><img src="/img/menu/gnome-fs-loading-icon.png" border="0" alt="" />Иконки</a></li>
  <li><a href="#"><img src="/img/menu/hat.png" border="0" alt="" />Шапки</a></li>
  </ul>  
</div>
</td>
<td width="17" background="/border/0-8.png">
</td>
</tr>
<tr>
<td width="17" background="/border/0-7.png" height="17">
</td>
<td background="/border/0-6.png" height="17">
</td>
<td width="17" background="/border/0-5.png" height="17">
</td>
</tr>
</tbody>
</table>
</div><!-- Конец контейнера меню -->
<!-- Конец пункта меню меню -->
</ul>

Это в css:

Code
body, ul, li {
  font-size:14px;  
  font-family:Arial, Helvetica, sans-serif;
  line-height:21px;
  text-align:left;
}

#menu {
  list-style:none;
  width:1200px;
  margin:5px auto 0px auto;
  height:43px;
  padding:0px 20px 0px 20px;

  /* Скругленные углы */
   
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  /* Цвет фона и градиенты */
   
  background: #014464;
  background: -moz-linear-gradient(top, #ffffff, #013953);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
   
  /* Границы */
   
  border: 1px solid #002232;

  -moz-box-shadow:inset 0px 0px 1px #edf9ff;
  -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
  box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
  float:left;
  display:block;
  text-align:center;
  position:relative;
  padding: 4px 10px 4px 10px;
  margin-right:30px;
  margin-top:7px;
  border:none;
}

#menu li:hover {
  border: 1px solid #777777;
  padding: 4px 9px 4px 9px;
   
  /* Цвет фона и градиенты */
   
  background: #F4F4F4;
  background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
   
  /* Скругленные углы */
   
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}

#menu li a {
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;  
  color: #EEEEEE;
  display:block;
  outline:0;
  text-decoration:none;
  text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
  color:#161616;
  text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
  padding-right:21px;
  background:url("/img/drop.png") no-repeat right 8px;
}

.dropdown_1column,  
.dropdown_2columns,  
.dropdown_3columns,  
.dropdown_4columns,
.dropdown_5columns {
  margin:4px auto;
  float:left;
  position:absolute;
  left:-999em; /* Скрываем выпадающие пункты */
  text-align:left;
  padding:10px 5px 10px 5px;
  border:1px solid #777777;
  border-top:none;
   
  /* Фон с градиентом */
  background:#F4F4F4;
  background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

  /* Скругленные углы */
  -moz-border-radius: 0px 5px 5px 5px;
  -webkit-border-radius: 0px 5px 5px 5px;
  border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 270px;}
.dropdown_3columns {width: 650px;}
.dropdown_4columns {width: 600px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,  
#menu li:hover .dropdown_2columns,  
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
  left:-1px;
  top:auto;
}
.col_0,
.col_1,
.col_2,
.col_3,
.col_4,
.col_5  
  {
  display:inline;
  float: left;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
}
.col_0 {width:180px;}
.col_1 {width:130px;}
.col_2 {width:260px;}
.col_3 {width:650px;}
.col_4 {width:590px;}
.col_5 {width:690px;}

#menu .menu_right {
  float:right;
  margin-right:0px;
}
#menu li .align_right {
  /* Скругленные углы */
  -moz-border-radius: 5px 0px 5px 5px;
  -webkit-border-radius: 5px 0px 5px 5px;
  border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
  left:auto;
  right:-1px;
  top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
  font-family:Arial, Helvetica, sans-serif;
  line-height:21px;
  font-size:13px;
  text-align:left;
  text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
  font-size:21px;
  font-weight:400;
  letter-spacing:-1px;
  margin:7px 0 14px 0;
  padding-bottom:14px;
  border-bottom:1px solid #666666;
}
#menu h3 {
  font-size:14px;
  margin:7px 0 14px 0;
  padding-bottom:7px;
  border-bottom:1px solid #888888;
}
#menu p {
  line-height:18px;
  margin:0 0 10px 0;
}

#menu li:hover div a {
  font-size:12px;
  color:#015b86;
}
#menu li:hover div a:hover {
  color:#029feb;
}

.strong {
  font-weight:bold;
}
.italic {
  font-style:italic;
}

.imgshadow { /* Лучший стиль для легкого фона */
  background:#FFFFFF;
  padding:4px;
  border:1px solid #777777;
  margin-top:5px;
  -moz-box-shadow:0px 0px 5px #666666;
  -webkit-box-shadow:0px 0px 5px #666666;
  box-shadow:0px 0px 5px #666666;
}
.img_left { /* Изображения прижимаются влево */
  width:auto;
  float:left;
  margin:5px 15px 5px 5px;
}

#menu li .black_box {
  background-color:#333333;
  color: #eeeeee;
  text-shadow: 1px 1px 1px #000;
  padding:4px 6px 4px 6px;

  /* Скругленные углы */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;

  /* Тень */
  -webkit-box-shadow:inset 0 0 3px #000000;
  -moz-box-shadow:inset 0 0 3px #000000;
  box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
  list-style:none;
  padding:0;
  margin:0 0 12px 0;
}
#menu li ul li {
  font-size:12px;
  line-height:24px;
  position:relative;
  text-shadow: 1px 1px 1px #ffffff;
  padding:0;
  margin:0;
  float:none;
  text-align:left;
  width:130px;
}
#menu li ul li:hover {
  background:none;
  border:none;
  padding:0;
  margin:0;
}

#menu li .greybox li {
  background:#F4F4F4;
  border:1px solid #bbbbbb;
  margin:0px 0px 4px 0px;
  padding:4px 6px 4px 6px;
  width:116px;

  /* Скругленные углы */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
#menu li .greybox li:hover {
  background:#ffffff;
  border:1px solid #aaaaaa;
  padding:4px 6px 4px 6px;
  margin:0px 0px 4px 0px;
}
img {  
border:medium none;  
}

Панель легко редактируется и можете заменять содержимое своими идеями!
Желаю успехов и творческих продвижений!



Ссылка #1:
Скачать с другого сервера: Скачать [169 кБ]

Скачать с нашего сервера:
Скачать с нашего сервера: Скачать[169 кБ]



Понравилась статья-Жми +1 Нравится

BBCode:

HTML:   

[ Скрыть ссылки ]
Категория: HTML | Добавил: port79 (04.04.2011)
Просмотров: 678 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
место для вашей рекламы-сайт принадлежит Журавлёву Роману Александровичу-вопросы по рекламе:port79@mail.ru
Администрация интернет-портала www.doz.ucoz.net не несёт ответственности за действия его посетителей. Все товарные знаки и знаки обслуживания на этом сайте являются собственностью соответствующих владельцев.Мнения, выраженные в публикациях на этом сайте, являются мнениями авторов публикаций и могут не совпадать с мнением администрации сайта
doz.ucoz.net
Информация для правообладателей

Copyright MyCorp ©
2025

Конструктор сайтов - uCoz