Найти на сайте

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

+22
2.26K
  2. Блоги
  3. Таб закладки на чистом css
Нашел в дебрях инета фиксированные таб закладки на чистом 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...файл название блоков
если что то забыл не судите… пишите отвечу…
C Новым 2013 Годом
Шаблон на тематику ретро
0
reload reload 13 лет назад #
Отлично, спасибо...
единственное, что мне показалось не сильно удобным у вашем на сайте, это то что кнопки могут закрываться вкладками; будет удобней если все кнопки будут всегда на виду (не будут закрываться вкладками); Это на заметку)
Думаю в том же css это просто все решается...

+

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

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

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

        
        
    






    




            

            


                                                                                                

                                                                                            
                                                                                                

                

                        

                                                                                                                                            

    

        

        Еще от автора
            

        

        

            

            

                            

                                                                

                            Вот Вам шаблон.                        

                                    

                            

                                                                

                        
                                                    
                                Вот Вам шаблон.                            
                                                                            

                                    

                            

                                                                

                            Рассчитан под агентство недвижимости. Дизайн корректировался под ИнстанШоп последней версии.                        

                                    

            
                            

                                            

                                                                                                                                                                                                        

                                            

                                                                                                                                                    
                                    37                                
                                                    

                                    

                        

        

            

            

                            

                                                                

                            сайт под магазин....никаких компонентов больше не переделывал....                        

                                    

                            

                                                                

                        
                                                    
                                сайт под магазин....никаких компонентов больше не переделывал....                            
                                                                            

                                    

                            

                                                                

                            Изменены модули и компонент магазина....                        

                                    

            
                            

                                            

                                                                                                                                                                                                        

                                            

                                                                                                                                                    
                                    16                                
                                                    

                                    

                        

        

            

            

                            

                                                                

                            Шаблон Blogfesta для ознакомления пользователям Инстанта                        

                                    

                            

                                                                

                        
                                                    
                                Шаблон Blogfesta для ознакомления пользователям Инстанта                            
                                                                            

                                    

                            

                                                                

                            На Ваш суд шаблончик под Инстант 1.10                        

                                    

            
                            

                                            

                                                                                                                                                                                                        

                                            

                                                                                                                                                    
                                    45                                
                                                    

                                    

                        

        

    
    

    


                                                        

                    

                

                    

                                                    

                                                    

    

        InstantCMS Team
    

    
Связь с нами

    Email dev@instantcms.ru

    

        Делаем полезные Интернет проекты с 2008 года 💫
    


                                            

                                                        

                                                    

    

        О проекте
    

            


                                            

                                                        

                                                    

    

        Поддержка
    

            


                                            

                                                        

                                                    

    

        Дополнения
    

            


                                            

                        

                

                

                    
                        
                            
                            

                

                    Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.