Добавить Дополнительные Вкладки

Ильяc (05 Июнь 2014 - 09:04) писал:

Здравствуйте! Помогите установить дополнительные вкладки. Нужны чтобы добавить информацию о продукции, например: Что такое? как использовать? и т.д.

Хотел бы установить следующие вкладки : http://cybernetic.me...dki-dlya-sajta/

Скачал архив. Хотелось бы в том месте как на картинке

2014-06-05_095303.png

Спасибо!

MikDark (05 Июнь 2014 - 10:29) писал:

Ильяc (05 Июнь 2014 - 10:54) писал:

<script type="text/javascript" src="{ASSETS_JS_PATH}organictabs.jquery.js"></script>

<script>
$(function() {

$("#example-one").organicTabs();


});
</script>

<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}style.css">

<div id="center_column" class="center_column">

 <div id="example-one">
		 
		 <ul class="nav">
				<li class="nav-one"><a href="#featured" class="current">Featured</a></li>
				<li class="nav-two"><a href="#core">Core</a></li>
				<li class="nav-three"><a href="#jquerytuts">jQuery</a></li>
				<li class="nav-four last"><a href="#classics">Classics</a></li>
			</ul>
		 
		 <div class="list-wrap">
		 
		 <ul id="featured">
		 <li><a href="http://css-tricks.com/perfect-full-page-background-image/">Full Page Background Images</a></li>
		 <li><a href="http://css-tricks.com/designing-for-wordpress-complete-series-downloads/">Designing for WordPress</a></li>
		 <li><a href="http://css-tricks.com/build-your-own-social-home/">Build Your Own Social Home!</a></li>
		 <li><a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/">Absolute Positioning Inside Relative Positioning</a></li>
		 <li><a href="http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/">IE CSS Bugs That'll Get You Every Time</a></li>
		 <li><a href="http://css-tricks.com/404-best-practices/">404 Best Practices</a></li>
		 <li><a href="http://css-tricks.com/date-display-with-sprites/">Date Display with Sprites</a></li>
		 </ul>
		 
		  <ul id="core" class="hide">
					<li><a href="http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/">The VERY Basics of HTML &amp; CSS</a></li>
					<li><a href="http://css-tricks.com/the-difference-between-id-and-class/">Classes and IDs</a></li>
					<li><a href="http://css-tricks.com/the-css-box-model/">The CSS Box Model</a></li>
					<li><a href="http://css-tricks.com/all-about-floats/">All About Floats</a></li>
					<li><a href="http://css-tricks.com/the-css-overflow-property/">CSS Overflow Property</a></li>
		 <li><a href="http://css-tricks.com/css-font-size/">CSS Font Size - (px - em - % - pt - keyword)</a></li>
		 <li><a href="http://css-tricks.com/css-transparency-settings-for-all-broswers/">CSS Transparency / Opacity</a></li>
		 <li><a href="http://css-tricks.com/css-sprites/">CSS Sprites</a></li>
		 <li><a href="http://css-tricks.com/nine-techniques-for-css-image-replacement/">CSS Image Replacement</a></li>
		   <li><a href="http://css-tricks.com/what-is-vertical-align/">CSS Vertial Align</a></li>
		 <li><a href="http://css-tricks.com/the-css-overflow-property/">The CSS Overflow Property</a></li>
		  </ul>
		 
		  <ul id="jquerytuts" class="hide">
			 <li><a href="http://css-tricks.com/anythingslider-jquery-plugin/">Anything Slider jQuery Plugin</a></li>
			 <li><a href="http://css-tricks.com/moving-boxes/">Moving Boxes</a></li>
		 <li><a href="http://css-tricks.com/simple-jquery-dropdowns/">Simple jQuery Dropdowns</a></li>
		 <li><a href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/">Featured Content Slider</a></li>
		 <li><a href="http://css-tricks.com/startstop-slider/">Start/Stop Slider</a></li>
		 <li><a href="http://css-tricks.com/banner-code-displayer-thing/">Banner Code Displayer Thing</a></li>
		 <li><a href="http://css-tricks.com/highlight-certain-number-of-characters/">Highlight Certain Number of Characters</a></li>
		 <li><a href="http://css-tricks.com/auto-moving-parallax-background/">Auto-Moving Parallax Background</a></li>
		  </ul>
		 
		  <ul id="classics" class="hide">
					<li><a href="http://css-tricks.com/css-wishlist/">Top Designers CSS Wishlist</a></li>
					<li><a href="http://css-tricks.com/what-beautiful-html-code-looks-like/">What Beautiful HTML Code Looks Like</a></li>
					<li><a href="http://css-tricks.com/easily-password-protect-a-website-or-subdirectory/">Easily Password Protect a Website or Subdirectory</a></li>
					<li><a href="http://css-tricks.com/how-to-create-an-ie-only-stylesheet/">IE-Only Stylesheets</a></li>
					<li><a href="http://css-tricks.com/ecommerce-considerations/">eCommerce Considerations</a></li>
					<li><a href="http://css-tricks.com/php-for-beginners-building-your-first-simple-cms/">PHP: Build Your First CMS</a></li>
		  </ul>
		 
		  </div> <!-- END List Wrap -->
		 
		 </div> <!-- END Organic Tabs (Example One) -->

Ильяc (05 Июнь 2014 - 13:12) писал:

Получилось не совсем что нужно, не как на картинке. Можно сделать как на картинке и чтобы при нажатии всплывало окно с описаниями, инструкции и т.д.
2014-06-05_140657.png

MikDark (05 Июнь 2014 - 14:26) писал:

Vaccina (06 Июнь 2014 - 01:40) писал:

.message {
font: 12px Arial, Helvetica, sans-serif;
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
background-image: -webkit-gradient(linear, left top, right bottom,
	   color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
	   color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
	   color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
	   to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
	  transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
	  transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
	  transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
	  transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
	  transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
	  transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
	  transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
	  transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
	  transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
	  transparent 75%, transparent);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
left: 0;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-webkit-animation: animate-bg 5s linear infinite;
-moz-animation: animate-bg 5s linear infinite;
}
.quazar {
background-color: #4ea5cd;
border-color: #3b8eb5;
}
.jet {
background-color: #de4343;
border-color: #c43d3d;
}
.milky-way {
background-color: #eaaf51;
border-color: #d99a36;
}
.star {
background-color: #61b832;
border-color: #55a12c;
}
.message h3 {
margin: 0 0 5px 0;
}
.message p {
margin: 0;
}
@-webkit-keyframes animate-bg {
	from {
		background-position: 0 0;
	}
	to {
	   background-position: -80px 0;
	}
}
@-moz-keyframes animate-bg {
	from {
		background-position: 0 0;
	}
	to {
	   background-position: -80px 0;
	}
}
#trigger-list {
text-align: center;
margin: 100px 0;
padding: 0;
}
#trigger-list li {
display: inline-block;
*display: inline;
zoom: 1;
}
#trigger-list .trigger {
display: inline-block;
background: #ddd;
border: 1px solid #777;
padding: 10px 20px;
margin: 0 5px;
font: bold 12px Arial, Helvetica;
text-decoration: none;
color: #333;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#trigger-list .trigger:hover {
background: #f5f5f5;
}

var myMessages = ['quazar','milky-way','jet','star']; // Типы сообщений
function hideAllMessages()
{
   var messagesHeights = new Array();
   for (i=0; i<myMessages.length; i++)
   {
	  messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
	  $('.' + myMessages[i]).css('top', -messagesHeights[i]);
   }
}
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
	hideAllMessages();
	$('.'+type).animate({top:"0"}, 500);
});
}
$(document).ready(function(){
   hideAllMessages();
   for(var i=0;i<myMessages.length;i++)
   {
   showMessage(myMessages[i]);
   }
   $('.message').click(function(){
	  $(this).animate({top: -$(this).outerHeight()}, 500);
	});
});

{% IF index_page %}
<!-- Кнопки -->
<ul id="trigger-list">
   <li><a href="#" class="trigger quazar-trigger">Квазар</a></li>
   <li><a href="#" class="trigger jet-trigger">Джеты</a></li>
   <li><a href="#" class="trigger milky-way-trigger">Млечный Путь</a></li>
   <li><a href="#" class="trigger star-trigger">Звезда</a></li>
</ul>
<!-- Кнопки -->
<!-- Панели -->
<div class="quazar message">
   <h3>Квазар</h3>
   <p>Квазар (англ. quasar) — особо мощное и далёкое активное ядро галактики. Квазары являются одними из самых ярких объектов во Вселенной — их мощность излучения иногда в десятки и сотни раз превышает суммарную мощность всех звёзд таких галактик, как наша.</p>
</div>
<div class="jet message">
   <h3>Релятивистские струи, джеты</h3>
   <p>Релятивистские струи, джеты (англ. jet) — струи плазмы, вырывающиеся из центров (ядер) таких астрономических объектов, как активные галактики, квазары и радиогалактики.
Обычно у объекта наблюдается две струи, направленные в противоположные стороны.</p>
</div>
<div class="milky-way message">
   <h3>Млечный Путь</h3>
   <p>Галактика Млечный Путь, называемая также просто Гала?ктика (с заглавной буквы), — гигантская звёздная система, в которой находится Солнечная система, все видимые невооружённым глазом отдельные звёзды.</p>
</div>
<div class="star message">
   <h3>Звезда</h3>
   <p>Звезда — небесное тело, в котором идут, шли или будут идти термоядерные реакции. Но чаще всего звездой называют небесное тело, в котором идут в данный момент термоядерные реакции.</p>
</div>
<!-- Панели -->
{% ENDIF %}

Vaccina (06 Июнь 2014 - 01:40) писал:

.dynamic + .spoiler h3, .dynamic + .spoiler2 h3 {
  margin-top: 0;
}
.dynamic + .spoiler, .dynamic + .spoiler2 {
  background: #fff;
  border: 1px solid;
  border-radius: 6px;
  padding: 0 10px 10px;
  position: absolute;
  width: 300px;
  z-index: 100;
}

Сake (19 Июнь 2014 - 00:56) писал:

.dynamic + .spoiler h3, .dynamic + .spoiler2 h3 {
margin-top: 0;
}
.dynamic + .spoiler, .dynamic + .spoiler2 {
background: #fff;
border: 1px solid;
border-radius: 6px;
padding: 0 10px 10px;
position: absolute;
width: 300px;
z-index: 100;
}

Сообщение отредактировал Ильяc: 19 Июнь 2014 - 08:20

Ильяc (19 Июнь 2014 - 08:17) писал:

Сake (19 Июнь 2014 - 00:56) писал:

.dynamic + .spoiler h3, .dynamic + .spoiler2 h3 {
margin-top: 0;
}
.dynamic + .spoiler, .dynamic + .spoiler2 {
background: #fff;
border: 1px solid;
border-radius: 6px;
padding: 0 10px 10px;
position: absolute;
width: 300px;
z-index: 100;
}

#tmsearch input.search_query {
	background: #FFFFFF;
	border: 1px solid #FFFFFF;
	color: #B6B6B6;
	float: left;
	height: 15px;
	margin: 11px 0 0 38px;
	padding: 1px;
	width: 568px;
}

#tmsearch input.search_query {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #FFFFFF;
	color: #B6B6B6;
	float: left;
	height: 15px;
	margin: 11px 0 0 38px;
	padding: 1px;
	width: 368px;
}

Vaccina (20 Июнь 2014 - 00:38) писал:

#tmsearch input.search_query {
background: #FFFFFF;
border: 1px solid #FFFFFF;
color: #B6B6B6;
float: left;
height: 15px;
margin: 11px 0 0 38px;
padding: 1px;
width: 568px;
}

#tmsearch input.search_query {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #FFFFFF;
color: #B6B6B6;
float: left;
height: 15px;
margin: 11px 0 0 38px;
padding: 1px;
width: 368px;
}

Ильяc (20 Июнь 2014 - 08:34) писал:

<div id="tmsearch">
<form action="http://{NET_DOMAIN}/search"  method="get">
<input class="search_query" type="text" id="search_query_top" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onfocus="if(this.value=='Поиск')this.value='';" onblur="if(this.value=='')this.value='Поиск';">
<input type="image" style="margin-top:8px; margin-left:3px;" src="{ASSETS_IMAGES_PATH}poisk.jpg" />

<input type="hidden" name="orderby" value="position">
<input type="hidden" name="orderway" value="desc">
</form>
</div>

MikDark (20 Июнь 2014 - 08:53) писал:

<div id="tmsearch">
<form action="http://{NET_DOMAIN}/search" method="get">
<input class="search_query" type="text" id="search_query_top" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onfocus="if(this.value=='Поиск')this.value='';" onblur="if(this.value=='')this.value='Поиск';">
<input type="image" style="margin-top:8px; margin-left:3px;" src="{ASSETS_IMAGES_PATH}poisk.jpg" />

<input type="hidden" name="orderby" value="position">
<input type="hidden" name="orderway" value="desc">
</form>
</div>

Ильяc (20 Июнь 2014 - 11:42) писал:

Подскажите еще пожалуйста, надпись "каталог" кликабельным и чтобы перенаправляла это ссылка в каталог товаров?
2014-06-20_124216.png

<div id="katalog">Каталог</div>

<div id="katalog"><a href="ссылка на каталог">Каталог</a></div>

Ирина345 (20 Июнь 2014 - 11:55) писал:

<div id="katalog">Каталог</div>

<div id="katalog"><a href="ссылка на каталог">Каталог</a></div>