Нашел в дебрях инета фиксированные таб закладки на чистом css… и решил облегчить главную страницу с куча модулями...
пример на скрине....
и вот реализация...сайт
в ваш template.php вставляем код после <body>...
который Вы можете отредактировать по своему желанию, перед этим создайте позиции в файле positions.txt для определения модулей.
потом в файл style.css который в Вашем шаблоне добавьте мной уже под точеный код
ну и сам psd...файл название блоков
если что то забыл не судите… пишите отвечу…
пример на скрине....
и вот реализация...сайт
в ваш template.php вставляем код после <body>...
<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>
потом в файл style.css который в Вашем шаблоне добавьте мной уже под точеный код
#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; }
если что то забыл не судите… пишите отвечу…
Реклама #
reload 13 лет назад #
единственное, что мне показалось не сильно удобным у вашем на сайте, это то что кнопки могут закрываться вкладками; будет удобней если все кнопки будут всегда на виду (не будут закрываться вкладками); Это на заметку)
Думаю в том же css это просто все решается...
+
reload 13 лет назад #
Всех с Днем Победы!!!!!!!!!!!!!!
imprint 13 лет назад #
reload 13 лет назад #
<?php include "slideout.php"; ?> , или как там правильно (я еще учусь, возможно и ошибаюсь)
зы: это как бы для чистоты кода;
И еще у вас на сайте есть такое:
css ленты активности нужно немного подправить (указать определенную высоту и overflow: hidden;)
возможно можно и по другому)
imprint 13 лет назад #
ded-pikto 13 лет назад #
Может, разнести вкладки по всей высоте окна браузера и попробовать уменьшить высоту выпадающих окон, сделав скролл-бары? Или ещё вариант, повеселее, обложить табами окно баузера со всех четырёх (чего стесняться:) сторон, а выпадающие чуть ограничить в размерах, чтобы не закрывали кнопки.
imprint 13 лет назад #
ded-pikto 13 лет назад #
imprint 13 лет назад #
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-ы положительные и отрицательные увеличить, если модули не поместятся. А так таблицы не жёсткие...
imprint 13 лет назад #
imprint 13 лет назад #
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 окна получаются нестабильны и, если вовремя не навести на них курсор, начинают мерцать. Приспособится-то можно, но нафиг это нужно? Глаза дороже. Лучше уж как было.
По хорошему, конечно, сделать бы, чтобы окно существовало от клика на кнопку до клика вне окна...
ded-pikto 13 лет назад #
ByMind 13 лет назад #
мне нравится
главный плюс - открываются при наведении))
Search 13 лет назад #
imprint 13 лет назад #
reload 13 лет назад #
Ramin 13 лет назад #
imprint 13 лет назад #
Pampa 13 лет назад #
При просмотре на мониторе с небольшим разрешением нет возможности увидеть всю Ленту активности: она шире экрана, а при переходе к нижнему ползунку прокрутки Лента схлопывается.
imprint 13 лет назад #
Коля 12 лет назад #
скрипт
Все видео на сайте будет ниже меню, кроме того что вставлено в iframe.
автор:José Nobile. (сам скрипт)
Но последнее время появилась проблема с роликами с mail.ru лечится обрезанием всего до <!--[if !IE]>--> и всего после <!--[if !IE]>--></object>
так скажем вот код
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]
обрезаем в начале