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

+22
1.91K
Нашел в дебрях инета фиксированные таб закладки на чистом css… и решил облегчить главную страницу с куча модулями...
пример на скрине....
Иллюстрация
и вот реализация...сайт
в ваш template.php вставляем код после <body>...
  1. <div id="slideout">
  2. <img src="http://golddragon.info/templates/dragon/feedback.png" alt="Отправить отзыв" />
  3. <div id="slideout_inner">
  4. <table cellpadding='2' cellspacing='2' border='1' align='left' width='100%'>
  5. <tr valign=top align=center>
  6. <td><?php cmsModule('top4'); ?> </td>
  7. <td><?php cmsModule('top5'); ?> </td>
  8. <td><?php cmsModule('top6'); ?> </td>
  9. </tr>
  10. </table>
  11.  
  12. </div>
  13. </div>
  14. <div id="slideout_">
  15. <img src="http://golddragon.info/templates/dragon/feedback2.png" alt="Отправить отзыв" />
  16. <div id="slideout_inner_">
  17. <table cellpadding='2' cellspacing='2' border='1' align='left' width='100%'>
  18. <tr valign=top align=center>
  19. <td><?php cmsModule('top7'); ?> </td>
  20. <td><?php cmsModule('top8'); ?> </td>
  21. </tr>
  22. </table>
  23. </div>
  24. </div>
  25. <div id="slideout_t">
  26. <img src="http://golddragon.info/templates/dragon/feedback3.png" alt="Отправить отзыв" />
  27. <div id="slideout_inner_r">
  28. <table cellpadding='2' cellspacing='2' border='1' align='left' width='100%'>
  29. <tr valign=top align=center>
  30. <td><?php cmsModule('top9'); ?> </td>
  31. <td><?php cmsModule('top10'); ?> </td>
  32. <td><?php cmsModule('top11'); ?> </td>
  33. </tr>
  34. </table>
  35. </div>
  36. </div>
который Вы можете отредактировать по своему желанию, перед этим создайте позиции в файле positions.txt для определения модулей.
потом в файл style.css который в Вашем шаблоне добавьте мной уже под точеный код
  1. #slideout {
  2. z-index:1000;
  3. position: fixed;
  4. top: 40px;
  5. left: 0;
  6. width: 35px;
  7. padding: 12px 0;
  8. text-align: center;
  9. background: #336600;
  10. -webkit-transition-duration: 0.3s;
  11. -moz-transition-duration: 0.3s;
  12. -o-transition-duration: 0.3s;
  13. transition-duration: 0.3s;
  14. -webkit-border-radius: 0 5px 5px 0;
  15. -moz-border-radius: 0 5px 5px 0;
  16. border-radius: 0 5px 5px 0;
  17. }
  18. #slideout_inner {
  19. z-index:1000;
  20. position: fixed;
  21. top: 40px;
  22. left: -1250px;
  23. background: #336600;
  24. width: 1200px;
  25. padding: 25px;
  26. height: 550px;
  27. -webkit-transition-duration: 0.3s;
  28. -moz-transition-duration: 0.3s;
  29. -o-transition-duration: 0.3s;
  30. transition-duration: 0.3s;
  31. text-align: left;
  32. -webkit-border-radius: 0 0 5px 0;
  33. -moz-border-radius: 0 0 5px 0;
  34. border-radius: 0 0 5px 0;
  35. }
  36. #slideout_inner textarea {
  37. z-index:1000;
  38. width: 190px;
  39. height: 100px;
  40. margin-bottom: 6px;
  41.  
  42. }
  43. #slideout:hover {
  44. z-index:1000;
  45. left: 1250px;
  46. }
  47. #slideout:hover #slideout_inner {
  48. z-index:1000;
  49. left: 0;
  50. }
  51.  
  52. #slideout_ {
  53. z-index:1000;
  54. position: fixed;
  55. top: 220px;
  56. left: 0;
  57. width: 35px;
  58. padding: 12px 0;
  59. text-align: center;
  60. background: #9b0432;
  61. -webkit-transition-duration: 0.3s;
  62. -moz-transition-duration: 0.3s;
  63. -o-transition-duration: 0.3s;
  64. transition-duration: 0.3s;
  65. -webkit-border-radius: 0 5px 5px 0;
  66. -moz-border-radius: 0 5px 5px 0;
  67. border-radius: 0 5px 5px 0;
  68. }
  69. #slideout_inner_ {
  70. z-index:1000;
  71. position: fixed;
  72. top: 40px;
  73. left: -950px;
  74. background: #9b0432;
  75. width: 900px;
  76. padding: 25px;
  77. height: 500px;
  78. -webkit-transition-duration: 0.3s;
  79. -moz-transition-duration: 0.3s;
  80. -o-transition-duration: 0.3s;
  81. transition-duration: 0.3s;
  82. text-align: left;
  83. -webkit-border-radius: 0 0 5px 0;
  84. -moz-border-radius: 0 0 5px 0;
  85. border-radius: 0 0 5px 0;
  86. }
  87. #slideout_inner_ textarea {
  88. z-index:1000;
  89. width: 190px;
  90. height: 100px;
  91. margin-bottom: 6px;
  92. }
  93. #slideout_:hover {
  94. z-index:1000;
  95. left: 950px;
  96. }
  97. #slideout_:hover #slideout_inner_ {
  98. z-index:1000;
  99. left: 0;
  100. }
  101.  
  102. #slideout_t {
  103. z-index:1000;
  104. position: fixed;
  105. top: 330px;
  106. left: 0;
  107. width: 35px;
  108. padding: 12px 0;
  109. text-align: center;
  110. background: #250a8c;
  111. -webkit-transition-duration: 0.3s;
  112. -moz-transition-duration: 0.3s;
  113. -o-transition-duration: 0.3s;
  114. transition-duration: 0.3s;
  115. -webkit-border-radius: 0 5px 5px 0;
  116. -moz-border-radius: 0 5px 5px 0;
  117. border-radius: 0 5px 5px 0;
  118. }
  119. #slideout_inner_r{
  120. z-index:1000;
  121. position: fixed;
  122. top: 40px;
  123. left: -950px;
  124. background: #250a8c;
  125. width: 900px;
  126. padding: 25px;
  127. height: 400px;
  128. -webkit-transition-duration: 0.3s;
  129. -moz-transition-duration: 0.3s;
  130. -o-transition-duration: 0.3s;
  131. transition-duration: 0.3s;
  132. text-align: left;
  133. -webkit-border-radius: 0 0 5px 0;
  134. -moz-border-radius: 0 0 5px 0;
  135. border-radius: 0 0 5px 0;
  136. }
  137. #slideout_inner_r textarea {
  138. z-index:1000;
  139. width: 190px;
  140. height: 100px;
  141. margin-bottom: 6px;
  142. }
  143. #slideout_t:hover {
  144. z-index:1000;
  145. left: 950px;
  146. }
  147. #slideout_t:hover #slideout_inner_r {
  148. z-index:1000;
  149. left: 0;
  150. }
  151.  
ну и сам psd...файл название блоков
если что то забыл не судите… пишите отвечу…
0
reload reload 11 лет назад #
Отлично, спасибо...
единственное, что мне показалось не сильно удобным у вашем на сайте, это то что кнопки могут закрываться вкладками; будет удобней если все кнопки будут всегда на виду (не будут закрываться вкладками); Это на заметку)
Думаю в том же css это просто все решается...

+

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

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

css ленты активности нужно немного подправить (указать определенную высоту и overflow: hidden;)
возможно можно и по другому)
+1
imprint imprint 11 лет назад #
подправлю....там heigh функцию можно регулировать....жаль что при 100% блоки независимо от наполняемости отображаются до конца страницы...
0
ded-pikto ded-pikto 11 лет назад #
Находка замечательная! Но делалась она, видимо для одной вкладки и index-ами, кажется, не справиться.
Может, разнести вкладки по всей высоте окна браузера и попробовать уменьшить высоту выпадающих окон, сделав скролл-бары? Или ещё вариант, повеселее, обложить табами окно баузера со всех четырёх (чего стесняться:) сторон, а выпадающие чуть ограничить в размерах, чтобы не закрывали кнопки.
0
imprint imprint 11 лет назад #
пробовал....получалось только лево и право...низ и вверх там другой сценарий нужен....
0
ded-pikto ded-pikto 11 лет назад #
Ну да, погорячился я. Нет Денвера под рукой, не говоря уже о сайте:)(типа, с ними бы я ДА!))) А если попробовать в #slideout_:hover и #slideout_t:hover поставить по margin-left: 35px? Должны же кнопки открыться? Группой в вертикалях они смотрятся, конечно, лучше - глаза не разбегаются.
0
imprint imprint 11 лет назад #
есть пример для обзора?
0
ded-pikto ded-pikto 11 лет назад #
Откуда?
Нет Денвера под рукой, не говоря уже о сайте:)
Чистой воды измышления и инсинуации:)
Типа:
#slideout_:hover
{
z-index:1000;
left: 950px;
margin-left: 35px
}
и
#slideout_t:hover
{
z-index:1000;
left: 950px;
margin-left: 35px
}
Ну и, может left-ы положительные и отрицательные увеличить, если модули не поместятся. А так таблицы не жёсткие...
0
imprint imprint 11 лет назад #
проверим....
0
imprint imprint 11 лет назад #
не получается....
0
ded-pikto ded-pikto 11 лет назад #
Да, я тож проверил. Получилось вот так, но оччень коряво:
#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 окна получаются нестабильны и, если вовремя не навести на них курсор, начинают мерцать. Приспособится-то можно, но нафиг это нужно? Глаза дороже. Лучше уж как было.
По хорошему, конечно, сделать бы, чтобы окно существовало от клика на кнопку до клика вне окна...
0
ded-pikto ded-pikto 11 лет назад #
Просмотрел: left-ы не по 975px, а по 950+35=985px.
0
ByMind ByMind 11 лет назад #
отлично,
мне нравится
главный плюс - открываются при наведении))
0
Search Search 11 лет назад #
Не забывайте про ПС, эти ссылки для них будут считаться скрытыми, сайт может под фильтр попасть.
0
imprint imprint 11 лет назад #
под фильтр чего?
0
reload reload 11 лет назад #
эти ссылки для них будут считаться скрытыми
И как же тогда быть с всплывающим меню - то же ведь скрытое)
0
Ramin Ramin 11 лет назад #
И как же тогда быть с всплывающим меню - то же ведь скрытое)
Всплывающее меню сделано по другому. Чтобы взглянуть на страничку нажмите правую кнопку просмотр кода сами все увидите.
сайт может под фильтр попасть
Под какой фильтр? поисковике за использование скриптов не бросают сайт под фильтры.
0
imprint imprint 11 лет назад #
я тоже так думаю....чисты код без всяких хартуберновых инселтарий....
0
Pampa Pampa 11 лет назад #
Небольшое замечание по сайту примера ("Золотой дракон"):
При просмотре на мониторе с небольшим разрешением нет возможности увидеть всю Ленту активности: она шире экрана, а при переходе к нижнему ползунку прокрутки Лента схлопывается.
0
imprint imprint 11 лет назад #
да делал для экранов от 1200....px.
0
Коля Коля 10 лет назад #
Что бы видео не перекрывало меню, нужно в 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>

Еще от автора

Вот Вам шаблон.
Рассчитан под агентство недвижимости. Дизайн корректировался под ИнстанШоп последней версии.
сайт под магазин....никаких компонентов больше не переделывал....
Изменены модули и компонент магазина....
Шаблон Blogfesta для ознакомления пользователям Инстанта
На Ваш суд шаблончик под Инстант 1.10
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.