Кнопки

ivanko1993

Новичок
7
0 / 0

Кнопки

« : 30.10.2012, 09:13:29 »

Еще одна тема от меня, прочитал про кнопки но мало чего понял, нужно сделать так, чтобы при наведении на них они двигались, сделать нужно именно в верхнем меню. вот php код и css

Код: php

<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
//needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
//xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
	initEditor();
}
$collspan_offset = ( mosCountModules( 'right' ) )? 2 : 1;
//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
	$right = 1;
}
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php mosShowHead(); ?>
<link href="<?php echo $mosConfig_live_site;?>/templates/mitra/css/template_css.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/mitra/css/style_menu.css" rel="stylesheet" type="text/css" />


</head>

<body style="margin:0" bgcolor="EFF5FB">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td>
		<table border="0" cellpadding="0" cellspacing="0" width="100%" class="logo2">
			<tr>
				<td width="623" valign="bottom" class="logo">
				<table border="0" cellpadding="0" cellspacing="0" width="130px">
					<tr>
						<td valign="bottom" class="ver">
						<?php ?></td>
					</tr>
					<tr>
						<td class="ver">
						<?php ?></td>
					</tr>
				</table>
				</td>
				<td valign="top"></td>
				<td width="1%" valign="top"  class="logo3" align="right">
				<table border="0" cellpadding="0" cellspacing="0" width="375" style="height: 165px">
					<tr>
						<td>
						
						</td>
					</tr>
					<tr>
						<td valign="top">
						
						</td>
					</tr>
				</table>
				</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td>
		<table border="0" cellpadding="0" cellspacing="0" width="100%"  style="background-image: url('<?php echo $mosConfig_live_site;?>/templates/mitra/images/top_link_bac.png')">
			<tr>
				<td width="250">
				<img border="0" src="<?php echo $mosConfig_live_site;?>/templates/mitra/images/left_top_link.jpg" alt="No Image"></img></td>
	 			
          <td> 
           <ul id="nav">

		  <li>
			 <a href="/index.php"> <font color="#FFFFFF">Главная</font></a> 
		</li>
		<li>
			<a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=2"><font color="#FFFFFF"> Об институте</font></a> 
			
		</li>
		<li>
			<a href="/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=3"><font color="#FFFFFF">Специальности</font></a> 
			<ul>
				<li><a href="/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=47">230700 - Прикладная информатика</a></li>
				<li><a href="/index.php?option=com_content&amp;view=article&amp;id=24&amp;Itemid=48">071900.62 - Библиотечно-информационная деятельностьа</a></li>
				<li><a href="/index.php?option=com_content&amp;view=article&amp;id=165&amp;Itemid=145">070503.65 – Музейное дело и охрана памятников</a></li>
			</ul>
		</li>
		<li>
			 <a href="http://www.vsgaki.ru/index.php?option=com_content&view=article&id=466&Itemid=110"><font color="#FFFFFF"> Абитуриенту</font></a> 
			
		</li>
		<li>
			 <a href="/index.php?option=com_contact&amp;view=contact&amp;id=2&amp;Itemid=16"><font color="#FFFFFF">Контакты</font></a>
			
		</li>
		<li>
			  <a href="/index.php?option=com_xmap&amp;sitemap=1"><font color="#FFFFFF"> Карта сайта</font></a> 
			
		</li>
		<li>
			 <a href="/index.php?option=com_fireboard"><font color="#FFFFFF"> Форум</font></a>
			
		</li>
		<li>
			<a href="/index.php?option=com_content&amp;view=article&amp;id=201&amp;Itemid=148"><font color="#FFFFFF"> Расписание</font></a>
			<ul>
				<li><a href="/index.php?option=com_content&amp;view=article&amp;id=120&amp;Itemid=47">Очное отделение</a></li>
				<li><a href="/index.php?option=com_content&amp;view=article&amp;id=123&amp;Itemid=47">Заочное отделение</a></li>
                                <li><a href="/index.php?option=com_content&amp;view=article&amp;id=206&amp;Itemid=47"> Расписание звонков </a></li>
			</ul>
		</li>
		
		
	</ul>
			</td>
				<td width="11">
				<img border="0" src="<?php echo $mosConfig_live_site;?>/templates/mitra/images/right_top_link.png" alt="No Image"></img></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td>
		<table border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
				<td width="4"></td>
				<td valign="top" width="201">
				<table border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<td class="bac_module"><?php mosLoadModules ( 'left', -2 ); ?></td>
					</tr>
				</table>
				</td>
				<td valign="top">
				<table border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<td width="5" valign="top" style="background-image: url('<?php echo $mosConfig_live_site;?>/templates/mitra/images/box/left.png'); height: 664px">
						<img border="0" src="<?php echo $mosConfig_live_site;?>/templates/mitra/images/box/top_left.png" alt="No Image"></img></td>
						<td valign="top" style="background-image: url('<?php echo $mosConfig_live_site;?>/templates/mitra/images/box/top.png'); background-repeat: repeat-x; background-position: top; height: 664px">
						<?php mosMainBody(); ?></td>
						<td width="4" valign="top" style="background-image: url('<?php echo $mosConfig_live_site;?>/templates/mitra/images/box/right.png'); height: 664px">
						<img border="0" src="<?php echo $mosConfig_live_site;?>/templates/mitra/images/box/top_right.png" alt="No Image"></img></td>
					</tr>
					<tr>
						<td width="5">
						<img border="0" src="<?php echo $mosConfig_live_site;?>/templates/mitra/images/box/bot_left.png" alt="No Image"></img></td>
						<td style="background-image: url('<?php echo $mosConfig_live_site;?>/templates/mitra/images/box/bot.png')">
						<img border="0" src="<?php echo $mosConfig_live_site;?>/templates/mitra/images/box/bot.png" alt="No Image"></img></td>
						<td width="4">
						<img border="0" src="<?php echo $mosConfig_live_site;?>/templates/mitra/images/box/bot_right.png" alt="No Image"></img></td>
					</tr>
				</table>
				</td>
									<?php
		  			if ( mosCountModules ('right') ) {
		  				?>
<td valign="top" width="201">
				<table border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<td class="bac_module2"><?php mosLoadModules ( 'right', -2 ); ?></td>
					</tr>
				</table>
				</td>							<?php
		  			}
		  			?>

				<td width="4"></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td>
		<div align="center">
			<table border="0" cellpadding="0" cellspacing="0" width="99%"  style="background-image: url('<?php echo $mosConfig_live_site;?>/templates/mitra/images/bac_footer.png')">
				<tr>
					<td width="12">
					<img border="0" src="<?php echo $mosConfig_live_site;?>/templates/mitra/images/left_footer.png" alt="No Image"></img></td>
					<td>
					<p align="center"><span lang="en-us">2012 © Институт культурного наследия и IT-технологий в сфере культуры и искусства. E-mail: 
					<a href="mailto:iiteu@vsgaki.ru">iiteu@vsgaki.ru</a></span>
					<td width="12">
					<img border="0" src="<?php echo $mosConfig_live_site;?>/templates/mitra/images/right_footer.png" alt="No Image"></img></td>
				</tr>
			</table>
		</div>
		</td>
	</tr>
</table>

</body>

</html>

Код: css


#nav li{
	float:left;
	margin-right:10px;
	position:relative;
	display:block;
}
#nav li a{
	display:block;
	padding:3px;
	color:#fff;
	background:#08a3db;
	text-decoration:none;
	
	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
#nav li a:hover{
	color:#fff;
	background:#08a3db;

	text-decoration:underline;

}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
	list-style:none;
	position:absolute;
	left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity:0; /* Устнавливаем начальное состояние прозрачности */
	-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
	padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float:none;
	
}
#nav ul a{
	white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
	left:0; /* Приносим его обратно на экран, когда нужно */
	opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	background:#08a3db;
	text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
	background:#000080;
	text-decoration:underline;
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}
#nav li {background: none;}

Записан

NortonFox

Захожу иногда
441
43 / 0

Re: Кнопки

« Ответ #1 : 30.10.2012, 09:42:23 »

Какие именно кнопки? куда двигались?
Хоть пример какой то дали (имеется ввиду живой сайт а не портянку кода)

Записан

Я знаю только то, что ничего не знаю

ivanko1993

Новичок
7
0 / 0

Re: Кнопки

« Ответ #2 : 30.10.2012, 09:50:23 »

http://iiteu.vsgaki.ru/ верхнее меню =)

Записан

NortonFox

Захожу иногда
441
43 / 0

Re: Кнопки

« Ответ #3 : 30.10.2012, 09:52:28 »

не одна кнопка там не двигается.

Записан

Я знаю только то, что ничего не знаю

ivanko1993

Новичок
7
0 / 0

Re: Кнопки

« Ответ #4 : 30.10.2012, 09:54:42 »

Так вот я и хочу сделать чтобы двигались=)

Записан

Morh

Захожу иногда
118
11 / 0

Re: Кнопки

« Ответ #5 : 30.10.2012, 13:24:54 »

NortonFox имелл виду, чтобы вы показали действующий пример. Как именно должны двигаться кнопки? Они ведь могут двигаться создавая эффект нажатия, сдвигаясь вниз, убегая влево и т.д. и т.п.

Записан

NortonFox

Захожу иногда
441
43 / 0

Re: Кнопки

« Ответ #6 : 31.10.2012, 10:56:30 »

Morh тут наверное бесполезно )))

Записан

Я знаю только то, что ничего не знаю

ivanko1993

Новичок
7
0 / 0

Re: Кнопки

« Ответ #7 : 31.10.2012, 11:49:48 »

Достаточно просто увеличение в размере, как на этом же сайта в подменю.

Записан

Morh

Захожу иногда
118
11 / 0

Re: Кнопки

« Ответ #8 : 01.11.2012, 09:08:15 »

Для увеличения размера кнопки, достаточно в параметр :hover дописать, например:
width: 200px;
hight: 50px;

Записан

Выравнить кнопки на карточке товара Автор DrShepard	Ответов: 10 Просмотров: 3257	21.02.2022, 10:56:18 от DrShepard
Как добавить сторонние кнопки CSS в модули и плагины Joomla? Автор bayersoff	Ответов: 12 Просмотров: 6084	23.12.2018, 17:42:46 от effrit
Убрать рамки у кнопки Автор leha111	Ответов: 1 Просмотров: 3915	08.06.2018, 12:56:25 от draff
Автоматическое добавление кнопки подробнее Автор lexxbry	Ответов: 3 Просмотров: 1799	27.02.2018, 18:40:58 от beliyadm
Социальные кнопки Яндекса - Блок «Поделиться» - асинхронно Автор leo78	Ответов: 2 Просмотров: 3419	17.10.2017, 00:09:07 от leo78

Кнопки - Вопросы по CSS

Новости Joomla

WT Set elements v.1.0.0: плагин поля для RadicalMart

IWS.BY VK app widget - Виджет приложения ВКонтакте для Joomla

SW JProjects v.2.5.0 - компонент каталога цифровых проектов на Joomla

ivanko1993

Кнопки

NortonFox

Re: Кнопки

ivanko1993

Re: Кнопки

NortonFox

Re: Кнопки

ivanko1993

Re: Кнопки

Morh

Re: Кнопки

NortonFox

Re: Кнопки

ivanko1993

Re: Кнопки

Morh

Re: Кнопки

Похожие темы