Google+ Followers

Будь в курсе событий!

04.01.2014

Tab-menu-менюшки

Leave a Comment
Привет друзья тут недавно потерялся в дебрях интернет паутины, плюс чуть голову не сломал)  пока искал выход из положения. Но все же нашел путь, и он оказался верен приготовил много разных занятных плюшек для вас, одна из них это таб -менюшка и не одна). Начнем с того что это такое, и с чем это едят это обычно виджет на JQueru, нужен он для удобства размещения в нем каких либо виджетов.

                                                     

 Или какой либо иной информации, какой именно решать вам конечно же, к примеру у вас много гаджетов как у меня ну и соответственно они мне все нравятся, и терять их не хочется а места катастрофически не хватает, приходится искать пути решения поставленных задач. И вот решение было найдено им оказались Tab - меню, они бывают разные такие менюшки но мне нужна была определенная, а именно для боковой, или нижней колонки. Слева, или справа,  или в подвал как вы её разместите  это не важно самое главное то что бы она справлялась с поставленной задачей, и на моём примере а его вы можете увидеть на правой колонке моего ресурса, вы можете убедится что работает она на пять с плюсом. И как раз плюсов от нее больше чем минусов, кстати что характерно на просторах всемирной паутины есть масса примеров как такое меню можно сделать, но для вас  мои уважаемые читатели я нашел самый  скажем так хитрый, и простой вариант. А именно установку  кодов, о которых я расскажу чуть ниже именно в гаджет не мучаясь, и не ковыряясь с кодом шаблона. А по тем вариантам что увидел я за прошедшее время, и убедился на личном примере могу сказать  что есть такие способы установок, и настроек таких менюшек что можно голову себе сломать. А оно это Tab-меню так и не заработает, и так приступим начну с самого интересного по моему мнению меню. Не оставил его себе лишь только потому что, оно имеет 3 вкладки переключения, и по этому назовем его тройкой. А мне их показалось мало,и пришлось мудрить дальше) и так  Тройка):

Выгдядит оно так
                                                   

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

<script type='text/javascript'>
//<![CDATA[
function NewBloggerTips_oom(NBTID, id)
{
  var NewBloggerTips = document.getElementById(NBTID);
  var NBTs = NewBloggerTips.firstChild;
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
  var NBT = NBTs.firstChild;
  var i   = 0;
  do
  {
    if (NBT.tagName == "A")
    {
      i++;
      NBT.href      = "javascript:NewBloggerTips_ubah('"+NBTID+"', "+i+");";
      NBT.className = (i == id) ? "Active" : "";
      NBT.blur();
    }
  }
  while (NBT = NBT.nextSibling);
  var Halamans = NewBloggerTips.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function NewBloggerTips_ubah(NBTID, id) { NewBloggerTips_oom(NBTID, id);
}
function NewBloggerTips_inisial(NBTID) { NewBloggerTips_oom(NBTID,  1);
document.write('');}
//]]>
</script>

<style>
div.NewBloggerTips div.NBTs {
height: 24px;
overflow: hidden;
}
div.NewBloggerTips div.NBTs a:hover, div.NewBloggerTips div.NBTs a.Active {
background-color: #eee;
}
div.NewBloggerTips div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerTips div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerTips div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerTips div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>

<form action="NewBloggerTips.html" method="get">
<div id="NewBloggerTips" class="NewBloggerTips">
<div style="width: 300px;" class="NBTs"> <a>Tab 1Тут вставляем название гаджетов</a> <a>Tab 2Тут вставляем название гаджетов</a> <a>Tab 1Тут вставляем название гаджетов</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab  1 тут размещаем контент
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab  2 тут размещаем контент
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab  3 тут размещаем контент
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://www.newbloggertips.com/2013/02/add-multi-tabbed-widget-to-blogger.html' target='_blank'>Tab-меню</a> | <a href='http://www.zarnakoom.blogspot.com/' target='_blank'>zarnakoom</a></small>
</div>
</div></form>
<script type="text/javascript">NewBloggerTips_inisial('NewBloggerTips');</script>

Теперь по пунктам:

В коде видим Tab 1,2,3Тут вставляем название гаджетов (как уже понятно из того что написано до этого вставляем название виджетов).

Теперь : Tab  1,2,3 тут размещаем контент  (Наш код контента)

И на последок ширина гаджета Tab-меню это параметр width: 300

А  высота Tab-меню это параметр height: 300

И фоновой цвет меню тут #ffffff

Так же от себя добавлю что  то место в коде куда вставляется контент, в него в каждое из Tabов можно всавить не по одному гаджету, а по несколько если вам надо. Только делайте пробелы в коде, если вам надо добавить по несколько кодов потому как если потом будете заменять какой либо из них  что бы не запутаться. Если в одном Tabе  у вас будет по несколько виджетов то просто появится полоска прокрутки в самом виджете.

А теперь следующее твоерение, назавем его сразу же пятеркой ) такое как стоит у меня. 

  Вид у меню такой
                                                              










А код к его установке такой 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() { $("#tabs").tabs(); });
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" />
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab-1</a></li>
<li><a href="#tabs-2">Tab-2</a></li>
<li><a href="#tabs-3">Tab-3</a></li>
<li><a href="#tabs-4">Tab-4</a></li>
<li><a href="#tabs-5">Tab-5</a></li>
</ul>
<div id="tabs-1">Your Tab-1 Script or Text Here</div>
<div id="tabs-2">Your Tab-2 Script or Text Here</div>
<div id="tabs-3">Your Tab-3 Script or Text Here</div>
<div id="tabs-4">Your Tab-4 Script or Text Here</div>
<div id="tabs-5">Your Tab-5 Script or Text Here</div>
</div>


Где помечено желтым пишем названия гаджетов,а где почемено зелёным вставляем свой контент. А где я пометил цветом аква, вот так ( start ) - тут мы можем менять  внешний вид самой таб менюшки, и для этого нам надо зайти вот по этой ссылке
Далее прокрутить чуть ниже, и там мы увидим названия тем копируем любое название темы, и вставляем вместо нашей темы ( start ). В результате менюшка будет выглядеть  с пременением той темы что вы выберите.

Заметьте что сверху в этом коде есть скрипт  jquery , отмеченный  зеленым маркером и дело в том что если он у вас установлен уже в шаблоне, то этот код надо копировать без него и вставлять в гаджет, например у меня это  таб-меню работает без этого скрипта jquery.


Следующая таб менюшка, и последняя на сегодня и так вставлять код надо так же в гаджет. Сама менюшка не боковая, а скорее её можно поставить где то или сверху блога, или в подвал блога. Имеет очень интересный эффект переключения,  и так же как и таб менюшка  выше имеет 5 вкладок.
Сама она такая:                

                                       

А вот и сам скрипт от нее:


 <style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:500px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://lh5.googleusercontent.com/-4oB3c0hJXFo/TwgIZu7CB3I/AAAAAAAAUfM/0yDsmg_GI54/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://lh4.googleusercontent.com/-w4udt2FfX80/TwgIZHBXHcI/AAAAAAAAUfI/p4LDF-CsN7E/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://lh6.googleusercontent.com/-35jZQ4g9ijI/TwgIabuIPhI/AAAAAAAAUfU/4pH5w6Ptzwo/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#Part_2, #Part_3, #Part_4, #Part_5 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a.tab").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<br />
<div class="tabbed_box" id="tabbed_box_1">
<div class="tabbed_area">
<ul class="tabs">
<li><a class="tab active" href="javascript:void(0);" title="Part_1">1Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_2">2Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_3">3Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_4">4Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_5">5Названме гаджета</a></li>
</ul>
<div class="content" id="Part_1">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_2">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_3">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_4">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_5">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<span style="color: #dddddd; font-family: arial; font-size: 11px; font-weight: bold;">Widget by: <a href="http://www.zarnakoom.blogspot.com/" style="color: #f7f7f7; font-weight: bold;">zarnakoom</a></span>
</div>
</div>

И так друзья где отмечено вот так 1,2,3,4,5Названме гаджета  ,  пишем название своих гаджетовили еще чего либо.
А где отмечено так: Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.  Вставляем свой контент.




0 коммент. :

© 2012-2017 Cash's from program