Таб закладки на чистом css

1542
Нашел в дебрях инета фиксированные таб закладки на чистом css...и решил облегчить главную страницу с куча модулями...
пример на скрине....

и вот реализация...сайт
в ваш template.php вставляем код после <body>...
Код PHP:
<div id="slideout">
		<img src="http://golddragon.info/templates/dragon/feedback.png" alt="Отправить отзыв" />
		<div id="slideout_inner">
<table  cellpadding='2' cellspacing='2' border='1'  align='left' width='100%'>
<tr   valign=top align=center>
<td><?php cmsModule('top4'); ?> </td>
<td><?php cmsModule('top5'); ?> </td>
<td><?php cmsModule('top6'); ?> </td>
</tr>
</table>
			
		</div>
	</div>
    <div id="slideout_">
		<img src="http://golddragon.info/templates/dragon/feedback2.png" alt="Отправить отзыв" />
		<div id="slideout_inner_">
			<table  cellpadding='2' cellspacing='2' border='1'  align='left' width='100%'>
<tr   valign=top align=center>
<td><?php cmsModule('top7'); ?> </td>
<td><?php cmsModule('top8'); ?> </td>
</tr>
</table>
		</div>
	</div>
    <div id="slideout_t">
		<img src="http://golddragon.info/templates/dragon/feedback3.png" alt="Отправить отзыв" />
		<div id="slideout_inner_r">
					<table  cellpadding='2' cellspacing='2' border='1'  align='left' width='100%'>
<tr   valign=top align=center>
<td><?php cmsModule('top9'); ?> </td>
<td><?php cmsModule('top10'); ?> </td>
<td><?php cmsModule('top11'); ?> </td>
</tr>
</table>
		</div>
	</div>
который Вы можете отредактировать по своему желанию, перед этим создайте позиции в файле positions.txt для определения модулей.
потом в файл style.css который в Вашем шаблоне добавьте мной уже под точеный код
Код PHP:
 	#slideout {
                        z-index:1000;
			position: fixed;
			top: 40px;
			left: 0;
			width: 35px;
			padding: 12px 0;
			text-align: center;
			background: #336600;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		#slideout_inner {
			z-index:1000;
                        position: fixed;
			top: 40px;
			left: -1250px;
			background: #336600;
			width: 1200px;
			padding: 25px;
			height: 550px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: left;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
		}
		#slideout_inner textarea {
			z-index:1000;
                        width: 190px;
			height: 100px;
			margin-bottom: 6px;

		}
		#slideout:hover {
			z-index:1000;
                        left: 1250px;
		}
		#slideout:hover #slideout_inner {
			z-index:1000;
                        left: 0;
		}

                 #slideout_ {
                        z-index:1000;
			position: fixed;
			top: 220px;
			left: 0;
			width: 35px;
			padding: 12px 0;
			text-align: center;
			background: #9b0432;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		#slideout_inner_ {
			z-index:1000;
                        position: fixed;
			top: 40px;
			left: -950px;
			background: #9b0432;
			width: 900px;
			padding: 25px;
			height: 500px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: left;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
		}
		#slideout_inner_ textarea {
			z-index:1000;
                        width: 190px;
			height: 100px;
			margin-bottom: 6px;
		}
		#slideout_:hover {
			z-index:1000;
                        left: 950px;
		}
		#slideout_:hover #slideout_inner_ {
			z-index:1000;
                        left: 0;
		}

                #slideout_t {
                        z-index:1000;
			position: fixed;
			top: 330px;
			left: 0;
			width: 35px;
			padding: 12px 0;
			text-align: center;
			background: #250a8c;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		#slideout_inner_r{
			z-index:1000;
                        position: fixed;
			top: 40px;
			left: -950px;
			background: #250a8c;
			width: 900px;
			padding: 25px;
			height: 400px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: left;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
		}
		#slideout_inner_r textarea {
			z-index:1000;
                        width: 190px;
			height: 100px;
			margin-bottom: 6px;
		}
		#slideout_t:hover {
			z-index:1000;
                        left: 950px;
		}
		#slideout_t:hover #slideout_inner_r {
			z-index:1000;
                        left: 0;
		}
ну и сам psd...файл название блоков
если что то забыл не судите....пишите отвечу..
Шаблон на тематику ретро | C Новым 2013 Годом
Комментарии (23)
reload 9 мая 2011 в 15:13 0
Отлично, спасибо...
единственное, что мне показалось не сильно удобным у вашем на сайте, это то что кнопки могут закрываться вкладками; будет удобней если все кнопки будут всегда на виду (не будут закрываться вкладками); Это на заметку)
Думаю в том же css это просто все решается...

+

reload 9 мая 2011 в 15:15 0
у вашем на сайте
- не обращайте внимания)))
Всех с Днем Победы!!!!!!!!!!!!!!
imprint 9 мая 2011 в 15:19 0
думаю с index-ом поиграть нужно...
reload 9 мая 2011 в 16:40 0
и сам код наверное будет лучше сохранить отдельно допустим с именем slideout.php, а в template.php просто вызвать его типа  
<?php include "slideout.php"; ?> , или как там правильно (я еще учусь, возможно и ошибаюсь)
зы: это как бы для чистоты кода;

И еще у вас на сайте есть такое:

css ленты активности нужно немного подправить (указать определенную высоту и overflow: hidden;)
возможно можно и по другому)
imprint 9 мая 2011 в 16:43 +1
подправлю....там heigh функцию можно регулировать....жаль что при 100% блоки независимо от наполняемости отображаются до конца страницы...
ded-pikto 10 мая 2011 в 12:55 0
Находка замечательная! Но делалась она, видимо для одной вкладки и index-ами, кажется, не справиться.
Может, разнести вкладки по всей высоте окна браузера и попробовать уменьшить высоту выпадающих окон, сделав скролл-бары? Или ещё вариант, повеселее, обложить табами окно баузера со всех четырёх (чего стесняться:) сторон, а выпадающие чуть ограничить в размерах, чтобы не закрывали кнопки.
imprint 10 мая 2011 в 13:58 0
пробовал....получалось только лево и право...низ и вверх там другой сценарий нужен....
ded-pikto 11 мая 2011 в 10:25 0
Ну да, погорячился я. Нет Денвера под рукой, не говоря уже о сайте:)(типа, с ними бы я ДА!))) А если попробовать в #slideout_:hover и #slideout_t:hover поставить по margin-left: 35px? Должны же кнопки открыться? Группой в вертикалях они смотрятся, конечно, лучше - глаза не разбегаются.
imprint 11 мая 2011 в 11:14 0
есть пример для обзора?
ded-pikto 11 мая 2011 в 11:38 0
Откуда?
Нет Денвера под рукой, не говоря уже о сайте:)
Чистой воды измышления и инсинуации:)
Типа:
#slideout_:hover
{
z-index:1000;
left: 950px;
margin-left: 35px
}
и
#slideout_t:hover
{
z-index:1000;
left: 950px;
margin-left: 35px
}
Ну и, может left-ы положительные и отрицательные увеличить, если модули не поместятся. А так таблицы не жёсткие...
imprint 11 мая 2011 в 11:40 0
проверим....
imprint 11 мая 2011 в 17:30 0
не получается....
ded-pikto 11 мая 2011 в 23:26 0
Да, я тож проверил. Получилось вот так, но оччень коряво:
#slideout_:hover
{
z-index:1000;
left: 975px;
}
#slideout_:hover #slideout_inner_
{
z-index:1000;
left:35px;
} Это для второй закладки.
И:
#slideout_t:hover
{
z-index:1000;
left: 975px;
}
#slideout_t:hover #slideout_inner_r
{
z-index:1000;
left: 35px;
} Для третьей.
Выпадающие 2 и 3 окна получаются нестабильны и, если вовремя не навести на них курсор, начинают мерцать. Приспособится-то можно, но нафиг это нужно? Глаза дороже. Лучше уж как было.
По хорошему, конечно, сделать бы, чтобы окно существовало от клика на кнопку до клика вне окна...
ded-pikto 11 мая 2011 в 23:36 0
Просмотрел: left-ы не по 975px, а по 950+35=985px.
ByMind 9 мая 2011 в 15:29 0
отлично,
мне нравится
главный плюс - открываются при наведении))
Search 9 мая 2011 в 16:23 0
Не забывайте про ПС, эти ссылки для них будут считаться скрытыми, сайт может под фильтр попасть.
imprint 9 мая 2011 в 16:24 0
под фильтр чего?
reload 9 мая 2011 в 16:45 0
эти ссылки для них будут считаться скрытыми
И как же тогда быть с всплывающим меню - то же ведь скрытое)
Ramin 9 мая 2011 в 18:44 0
И как же тогда быть с всплывающим меню - то же ведь скрытое)
Всплывающее меню сделано по другому. Чтобы взглянуть на страничку нажмите правую кнопку просмотр кода сами все увидите.
сайт может под фильтр попасть
Под какой фильтр? поисковике за использование скриптов не бросают сайт под фильтры.
imprint 9 мая 2011 в 20:51 0
я тоже так думаю....чисты код без всяких хартуберновых инселтарий....
Pampa 11 мая 2011 в 11:27 0
Небольшое замечание по сайту примера ("Золотой дракон"):
При просмотре на мониторе с небольшим разрешением нет возможности увидеть всю Ленту активности: она шире экрана, а при переходе к нижнему ползунку прокрутки Лента схлопывается.
imprint 11 мая 2011 в 18:04 0
да делал для экранов от 1200....px.
Коля 19 июня 2012 в 18:40 0
Что бы видео не перекрывало меню, нужно в template.php вставить такую строку :
Код PHP:
<script src="/templates/_default_/js/fix_wmode2transparent_swf.js" type="text/javascript"></script>
естественно закачать в папку /js файл fix_wmode2transparent_swf.js

скрипт
Все видео на сайте будет ниже меню, кроме того что вставлено в iframe.
автор:Jos&#233; Nobile. (сам скрипт)

Но последнее время появилась проблема с роликами с mail.ru лечится обрезанием всего до <!--[if !IE]>--> и всего после <!--[if !IE]>--></object>
так скажем вот код
Код PHP:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="626" height="367"
id="movie_name" align="middle"><param name="movie" value="http://img.mail.ru/r/video2/uvpv3.swf?2"/>;
<param name="flashvars" value="movieSrc=mail/pasha2047/_myvideo/14&autoplay=0" />
<param name="allowFullScreen" value="true" /><param name="AllowScriptAccess" value="always" />
<!--[if !IE]>--><object type="application/x-shockwave-flash" data="http://img.mail.ru/r/video2/uvpv3.swf?2" width="626" height="367">
<param name="movie" value="http://img.mail.ru/r/video2/uvpv3.swf?2"/>;
<param name="flashvars" value="movieSrc=mail/pasha2047/_myvideo/14&autoplay=0" />
<param name="allowFullScreen" value="true" /><param name="AllowScriptAccess" value="always" />
<!--<![endif]--><a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
</a><!--[if !IE]>--></object><!--<![endif]--></object>[/code]

обрезаем в начале
Код PHP:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="626" height="367"
 id="movie_name" align="middle"><param name="movie" value="http://img.mail.ru/r/video2/uvpv3.swf?2"/>
<param name="flashvars" value="movieSrc=mail/pasha2047/_myvideo/14&autoplay=0" />
<param name="allowFullScreen" value="true" /><param name="AllowScriptAccess" value="always" />
и в конце
Код PHP:
<!--<![endif]--></object>