Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

свой тулбар(toolbar) c CSS3 и jQuery

jekis

Автор: ,
в Другие дополнения

 Share

Recommended Posts

jekis Rookie

jekis

Опубліковано:
Опубліковано:

каждый может переделать под свой вкус я лишь добавил меню

добавить в:

catalog/view/theme/default/template/common/header.tpl

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/style.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery-1.3.2.min.js"></script>

сразу ниже <body>

<script type="text/javascript">

$(document).ready(function(){

  //hide toolbar and make visible the 'show' button
$("span.downarr a").click(function() {
	$("#toolbar").slideToggle("fast");
	$("#toolbarbut").fadeIn("slow");	
  });
  
  //show toolbar and hide the 'show' button
  $("span.showbar a").click(function() {
	$("#toolbar").slideToggle("fast");
	$("#toolbarbut").fadeOut();	
  });
  
  //show tooltip when the mouse is moved over a list element
  $("ul#social li").hover(function() {
$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
	$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
		$(this).find("div").hide();
	});
  });
  
  //don't jump to #id link anchor
  $(".facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a").click(function() {
   return false;										
});

  //show quick menu on click
$("span.menu_title a").click(function() {
if($(".quickmenu").is(':hidden')){ //if quick menu isn't visible
$(".quickmenu").fadeIn("fast"); //show menu on click
}
else if ($(".quickmenu").is(':visible')) { //if quick menu is visible
	  $(".quickmenu").fadeOut("fast"); //hide menu on click
	}
});

//hide menu on casual click on the page
$(document).click(function() {
$(".quickmenu").fadeOut("fast");
$(".quickmenu").css({'vivibility': 'hidden'});
});
$('.quickmenu').click(function(event) {
event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements
});


});

</script>

<div id="toolbarbut"> <!-- hide button -->
<span class="showbar"><a href="#">show bar</a></span>
</div>

<div id="toolbar"> <!-- toolbar container -->

<div class="leftside"> <!-- all things in floating left side -->
  <ul id="social">

	<li><a class="rss" href="#"></a><!-- icon -->
	  <div id="tiprss" class="tip"><!-- tooltip -->
		<ul>
		  <li><a href="#">580 Readers</a></li>
		  <li><a href="#"><small>[Subscribe]</small></a></li>
		</ul>  
	  </div>
	</li>
	<li><a class="facebook" href="#"></a>
	  <div id="tipfacebook" class="tip">
		<ul>
		  <li><a href="#">Share Page</a></li>
		  <li><a href="#">| Profile</a></li>
		</ul>  
	  </div>  
	</li>
	<li><a class="twitter" href="#"></a>
	  <div id="tiptwitter" class="tip">
		<ul>
		  <li><a href="#">ReTweet</a></li>
		  <li><a href="#">| Profile</a></li>
		</ul>  
	  </div>
	</li>
	<li><a class="delicious" href="#"></a>
	  <div id="tipdelicious" class="tip">
	  
		<ul>
		  <li><a href="#">Bookmark</a></li>
		  <li><a href="#">| Profile</a></li>
		</ul>  
	  </div>
	</li>
	<li><a class="digg" href="#"></a>
	  <div id="tipdigg" class="tip">
		<ul>
		  <li><a href="#">Digg</a></li>
		  <li><a href="#">| Profile</a></li>
		</ul>  
	  </div>
	</li>
	<li><a class="stumble" href="#"></a>
	  <div id="tipstumble" class="tip">
		<ul>
		  <li><a href="#">Stumble</a></li>
		  <li><a href="#">| Profile</a></li>
		</ul>  
	  </div>
	</li>
  </ul>
</div>

<div class="rightside"> <!-- all things in floating left side -->
  <span class="downarr"> <!-- hide button -->
  <a href="#"></a>
  </span>
  <span class="menu_title">
	<a class="menutit">Menu</a> <!-- quick menu title -->
  </span>
	<div class="quickmenu">
<ul>
<?php foreach ($categories as $category) { ?>
<li>
		  <a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
				   <?php } ?>
		  
		  </ul>
  </div>
</div>
	  </div>

проверил хром,мозилу и експлорер и все работает

ПРИМЕР

catalog.zip

Надіслати
Поділитися на інших сайтах

Yoda Grand Master

Yoda

Опубліковано:
Опубліковано:

Ну чел вывалил, какую то хрень ни о чем - панель, но те кто не в теме - зададутся вопросам, а зачем она ваще, те кто чуть чуть в теме, зададутся вопросам, а как туда что то добавить или поменять, те кто совсем в теме - ну она им не нужна, потому что интегрировать подобное решение два пальца об асфальт, так вот - чтобы оно было хоть как то полезно, вместо ссылок на социальные сети внизу, можно было бы сделать кнопки лайк +1 и нравится от контакта - тогда бы это было мало мальски полезное решение. туда кстати по хорошему можно было бы и корзину упихать с просмотренными товарами. Вот в таком виде было бы очень полезное решение. А так - это выглядит как непонятно что непонятно зачем, типа а я тут урок с руселлера прикрутил - посотрите какой я крутой.

Надіслати
Поділитися на інших сайтах

bigerok Enthusiast

bigerok

Опубліковано:
Опубліковано:

Так в этом примере уже стоят другие кнопки, нет ничего проще в этом месте поменять на свои иконки. Спасибо и на том, я бы не заморачивался сам браться прикручивать такой тулбар.

Надіслати
Поділитися на інших сайтах

snastik Grand Master

snastik

Опубліковано:
Опубліковано:

Хотел поделится с вами, а сделали меня еще виноватым

не переживайте как минимум многих это натолкнет на мысль ... что стоит с этим что то сделать :-) ну или не стоит
Надіслати
Поділитися на інших сайтах
1

  • 3 months later...

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду