Помогите добавить подсказку к меню.

liderdenis · 27 Окт 2008

Есть следующая функция

Код:

$(document).ready(function(){
          $(".menu a").hover(function() {
              $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
          }, function() {
              $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
          });
 });

И есть код шаблона joomla

Код:

<?php
/**
 * @copyright	Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved.
 * @license		GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 * See COPYRIGHT.php for copyright notices and details.
 */

// no direct access
defined( '_VALID_MOS' ) or die( 'Restricted access' );
defined( 'DS') || define( 'DS', DIRECTORY_SEPARATOR );

include_once (dirname(__FILE__).DS.'/ja_vars_1.0x.php');

?>

<!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(); ?>
<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/mootools.v1.11.js"></script>

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/typo.css" type="text/css" />

<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>

<!-- Menu head -->
<?php $jamenu->genMenuHead(); ?>

<link href="<?php echo $tmpTools->templateurl(); ?>/css/colors/<?php echo $tmpTools->getParam(JA_TOOL_COLOR); ?>.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
<style type="text/css">
.clearfix {height: 1%;}
img {border: none;}
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<![endif]-->

<?php if ($tmpTools->isIE6()) { ?>
<!--[if lte IE 6]>
<link href="<?php echo $tmpTools->templateurl(); ?>/css/ie6.php" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var siteurl = '<?php echo $tmpTools->baseurl();?>/';
window.addEvent ('load', makeTransBG);
function makeTransBG() {
makeTransBg($$('img'));
}
</script>
<![endif]-->
<?php } ?>

</head>

<body id="bd" class="<?php echo $tmpTools->getParam(JA_TOOL_SCREEN);?> fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?>" >
<a name="Top" id="Top"></a>
<ul class="accessibility">
	<li><a href="<?php echo $tmpTools->getCurrentURL();?>#ja-content" title="Skip to content">Skip to content</a></li>
	<li><a href="<?php echo $tmpTools->getCurrentURL();?>#ja-mainnav" title="Skip to main navigation">Skip to main navigation</a></li>
	<li><a href="<?php echo $tmpTools->getCurrentURL();?>#ja-col1" title="Skip to 1st column">Skip to 1st column</a></li>
	<li><a href="<?php echo $tmpTools->getCurrentURL();?>#ja-col2" title="Skip to 2nd column">Skip to 2nd column</a></li>
	<li><a href="<?php echo $tmpTools->getCurrentURL();?>#ja-col3" title="Skip to 3nd column">Skip to 2nd column</a></li>
</ul>

<div id="ja-wrapper">
<div id="ja-wrapper-inner">

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap" class="clearfix">
<div id="ja-header" class="clearfix"<?php if( !mosCountModules('topsl') ) {?>style="height: 50px;"<?php } ?>>

<?php 
	$siteName = $tmpTools->sitename(); 
	if ($tmpTools->getParam('logoType')=='image') { ?>
	<div id="ja-logo">
	<h1 class="logo">
		<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
	</h1>
	</div>
<?php } else { 
	$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
	$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');	?>
	<div id="ja-logo">
	<h1 class="logo-text">
		<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>	
	</h1>
	<p class="site-slogan"><?php echo $sloganText;?></p>
	</div>
<?php } ?>

<!-- BEGIN: MAIN NAVIGATION -->
<div id="ja-mainnavwrap">
	<div id="ja-mainnav">
		<?php $jamenu->genMenu (0); ?>
	</div>
</div>
<!-- END: MAIN NAVIGATION -->

<?php if(mosCountModules('top')) : ?>
<div id="ja-login">
	<?php mosLoadModules('top', -2); ?>
</div>
<?php endif ; ?>

<?php if( mosCountModules('topsl') ) { ?>
<div id="ja-topsl1" <?php if( !mosCountModules('top') ) {?>style="left: 0; width: 100%;"<?php } ?>>
  <?php mosLoadModules('topsl', -2); ?>
</div>
<?php } ?>

</div>
</div>
<!-- END: HEADER -->

<div id="ja-containerwrap<?php echo $divid; ?>">
<div id="ja-container" class="clearfix">

  <div id="ja-mainbody" class="clearfix">

	<?php
	$spotlight = array ('user5','user6','user7');
	$topsl = $tmpTools->calSpotlight ($spotlight,$tmpTools->isOP()?100:100);
	if( $topsl ) {
	?>
	<!-- BEGIN: TOP SPOTLIGHT 2 -->
	<div id="ja-topsl2" class="clearfix">
	  <?php if( mosCountModules('user5') ) {?>
	  <div class="ja-box<?php echo $topsl['user5']['class']; ?>" style="width: <?php echo $topsl['user5']['width']; ?>;">
			<?php mosLoadModules('user5', -2); ?>
	  </div>
	  <?php } ?>
	
	  <?php if( mosCountModules('user6') ) {?>
	  <div class="ja-box<?php echo $topsl['user6']['class']; ?>" style="width: <?php echo $topsl['user6']['width']; ?>;">
			<?php mosLoadModules('user6', -2); ?>
	  </div>
	  <?php } ?>
	
	  <?php if( mosCountModules('user7') ) {?>
	  <div class="ja-box<?php echo $topsl['user7']['class']; ?>" style="width: <?php echo $topsl['user7']['width']; ?>;">
			<?php mosLoadModules('user7', -2); ?>
	  </div>
	  <?php } ?>

	</div>
	<!-- END: TOP SPOTLIGHT 2 -->
	<?php } ?>

	<!-- BEGIN: CONTENT -->
	<div id="ja-content" class="clearfix">

		<div id="ja-current-content"<?php if( mosCountModules('topsl') ) {?>style="padding-top: 30px;"<?php } ?>>

			<?php if(!$tmpTools->isFrontPage()) : ?>
			<div id="ja-pathway">
				<?php mosLoadModules('')?>
      </div>
			<?php endif ; ?>

			<?php mosMainBody(); ?>

		</div>
		
			<?php if( mosCountModules('banner')) : ?>
			<!-- BEGIN: BANNER -->
			<div id="ja-banner">
				<?php mosLoadModules('banner', -1); ?>
			</div>
			<!-- END: BANNER -->
			<?php endif; ?>

	</div>
	<!-- END: CONTENT -->

  <?php if ($ja_right) { ?>
  <!-- BEGIN: RIGHT COLUMN -->
	<div id="ja-col2"<?php if( mosCountModules('topsl') ) {?>style="margin-top: 20px;"<?php } ?>>
	<div class="ja-innerpad">
		<?php mosLoadModules('right', -2); ?>
 	</div>
	</div>
	<!-- END: RIGHT COLUMN -->
	<?php } ?>
		
	</div>
		
	<?php if ($ja_left) { ?>
	<!-- BEGIN: LEFT COLUMN -->
	<div id="ja-col1"<?php if( mosCountModules('topsl') ) {?>style="padding-top: 30px;"<?php } ?>>

		<?php if ($hasSubnav) {?>
		<div id="ja-subnav" class="moduletable">
			<h3>On This Page</h3>
			<?php $jamenu->genMenu (1,1);	?>
		</div>
		<?php } ?>

		
		<?php mosLoadModules('left', -2); ?>

	</div>
	<!-- END: LEFT COLUMN -->
	<?php } ?>

</div></div>

<?php
$spotlight = array ('user1','user2','user8','user9','user10');
$botsl = $tmpTools->calSpotlight ($spotlight,$tmpTools->isOP()?100:100);
if( $botsl ) {
?>
<!-- BEGIN: BOTTOM SPOTLIGHT -->
<div id="ja-botsl" class="clearfix">

  <?php if( mosCountModules('user1') ) {?>
  <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
		<?php mosLoadModules('user1', -2); ?>
   </div>
  <?php } ?>

  <?php if( mosCountModules('user2') ) {?>
  <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
		<?php mosLoadModules('user2', -2); ?>
  </div>
  <?php } ?>

  <?php if( mosCountModules('user8') ) {?>
  <div class="ja-box<?php echo $botsl['user8']['class']; ?>" style="width: <?php echo $botsl['user8']['width']; ?>;">
		<?php mosLoadModules('user8', -2); ?>
  </div>
  <?php } ?>
  
  <?php if( mosCountModules('user9') ) {?>
  <div class="ja-box<?php echo $botsl['user9']['class']; ?>" style="width: <?php echo $botsl['user9']['width']; ?>;">
		<?php mosLoadModules('user9', -2); ?>
  </div>
  <?php } ?>
  
  <?php if( mosCountModules('user10') ) {?>
  <div class="ja-box<?php echo $botsl['user10']['class']; ?>" style="width: <?php echo $botsl['user10']['width']; ?>;">
		<?php mosLoadModules('user10', -2); ?>
  </div>
  <?php } ?>

</div>
<!-- END: BOTTOM SPOTLIGHT -->
<?php } ?>

<!-- BEGIN: FOOTER -->
<div id="ja-footer">
	<?php if(mosCountModules('user4')) : ?>
	<div id="ja-search" class="moduletable">
		<?php mosLoadModules('user4', 0); ?>
	</div>
	<?php endif; ?>
	
	<?php mosLoadModules("user3", -1); ?>
	<?php include_once (dirname(__FILE__).DS.'/footer.php' ); ?>
</div>
<!-- END: FOOTER -->

</div>
</div>

<?php mosLoadModules("debug", -1); ?>

</body>

</html>

Вопрос следующий куда вставить первый код, чтобы в шаблоне при наведении на один из пунктов меню (верхнего) вылазила подсказка, описываемая 1-ым кодом.

Добавлено через 1 минуту
И еще забыл инфа взята отсюда _http://anton.shevchuk.name/javascript/jquery-for-beginners/
Заголовок Анимация для события hover #1

botushko · 28 Окт 2008

А не проще будет новый модуль меню написать, чем ковыряться с шаблоном(чужим кодом)? Собственно, мне кажется, что это будет куда более легкий и простой способ реализации задумки.

romanof · 3 Ноя 2008

В шаблон joomla всавляются позиции модулей, а подсказки можно реализовать плагинами, погугли типа tooltips joomla или extensions.joomla.org.
Удачи

Помогите добавить подсказку к меню.

liderdenis

Создатель

botushko

Писатель

romanof

Писатель