Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Меню на главную

Предыдущая тема Следующая тема Перейти вниз

Меню на главную

Сообщение автор Мурзик в Чт 30 Июл - 20:10

Доброго времени суток).

Скажите, реально ли осуществить вот такое меню, как на этом сайте?

http://swedge.rusff.ru/

( имеется в виду та часть с выпадающими блоками справа и часть с широким подобием футера  с прокруткой ниже ).


Последний раз редактировалось: Мурзик (Пт 7 Авг - 15:03), всего редактировалось 1 раз(а)

Мурзик
 

Сообщения : 226
Регистрация : 2011-05-19
Благодарности : 6

Без предупреждений

http://rolanime.2x2forum.ru/

Вернуться к началу Перейти вниз

Re: Меню на главную

Сообщение автор Мурзик в Ср 5 Авг - 1:21

мяу

Все в отпуске, что-ли?

Мурзик
 

Сообщения : 226
Регистрация : 2011-05-19
Благодарности : 6

Без предупреждений

http://rolanime.2x2forum.ru/

Вернуться к началу Перейти вниз

Re: Меню на главную

Сообщение автор Xan_Kriegor в Ср 5 Авг - 3:07

Кстати, очень даже классно смотрится!!! Я бы хотел подобный дизайн!
Присоединяюсь к вопросу!

По ходу все реально в отпуске... Лето все же...

Xan_Kriegor
 

Сообщения : 973
Возраст : 33
Регистрация : 2013-09-18
Благодарности : 13

Без предупреждений

http://www.residentevilarena.com

Вернуться к началу Перейти вниз

Re: Меню на главную

Сообщение автор Домовой в Ср 5 Авг - 21:40

Откройте в браузере исходный код этого форума, там найдёте код этой менюшки
view-source:swedge.rusff.ru

Короче вот что там стоит
В CSS
Код:
#tableTop {
    position: absolute;
    margin: 5px auto;
    left: 40px;
    right: 0px;
    top: -745px;
    bottom: 1px;   
    width: 930px;
    height: 320px;
}

#visibleTable {

}

#slideActivists {
display: none;
}



#headline {
    position: absolute;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 36px; 
}

#infoBox {
    width: 70%;
    max-height: 150px;     
    line-height: 18px;
    font-size: 18px;
    font-style: italic;
    font-family: Georgia;
    text-align: justify;
    position: absolute;
    top: 50px;
}

.readMoreButton {
    width: 120px;
    padding: 2px 20px 0px;
    margin: 5px;
    position: absolute;
  top: 170px;
    left: 485px;
    background-color: #d5d5d5;
   
    color: #b3bdc6;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
   
    border: 1px solid #000;
    border-radius:5px;
        -webkit-border-radius:5px;
        -khtml-border-radius:5px;
        -moz-border-radius:5px;
        -o-border-radius:5px;
    box-shadow: 0px 3px 3px #000;
        -webkit-box-shadow:0px 3px 3px #000;
        -khtml-box-shadow:0px 3px 3px #000;
        -moz-box-shadow:0px 3px 3px #000;   
}
.readMoreButton:hover {
    background: transparent;
}

#userPulsMenu {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    border: 1px solid #000;
   
    position: absolute;
    left: 680px;
    right: 0px;
    top: 45px;
    bottom: 0px;
   
    width: 200px;
    height: 175px; 
}                   


#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    font-size: 13px;
    text-transform: uppercase; 
    text-shadow: 0 -1px 3px #202020; 
    list-style: none outside none;
    position: absolute;   
    background-image: linear-gradient(to top, #264a62 0%,transparent 80%);
    background-image: -webkit-linear-gradient(top, #264a62 0%,transparent 80%);
    background-image: -moz-linear-gradient(top, #264a62 0%,transparent 80%);
    background-color: #000;     
    /* border radius
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px; */
}
#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#nav li {
    border-bottom: 1px solid #000;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 200px; 
    color: #b3bdc6;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    background-image: linear-gradient(to top, #264a62 0%,transparent 80%);
    background-image: -webkit-linear-gradient(top, #264a62 0%,transparent 80%);
    background-image: -moz-linear-gradient(top, #264a62 0%,transparent 80%);
    background-color: #000;
    text-shadow: #6a99b9 0.1em 0.1em 0.2em;
    list-style: none outside none;   
}
#nav li:first-child {
    border-left: 0 none;
    margin-left: 0px;
}
#nav li a {
    color: #b3bdc6;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;

    /* gradient */
    background-image: linear-gradient(to top, #264a62 0%,transparent 80%);
    background-image: -webkit-linear-gradient(top, #264a62 0%,transparent 80%);
    background-image: -moz-linear-gradient(top, #264a62 0%,transparent 80%);
    background-color: #000;
}

 
/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {
        -webkit-transform: scale(1);
    }
    30% {
        -webkit-transform: scale(1.3);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes animation1 {
    0% {
        -moz-transform: scale(1);
    }
    30% {
        -moz-transform: scale(1.3);
    }
    100% {
        -moz-transform: scale(1);
    }
}
#nav li > a:hover {
    /* css3 animation */
    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#nav li:hover > a {
    z-index: 4;
    -webkit-box-shadow: 0 0 10px #001c32;
    -moz-box-shadow: 0 0 10px #001c32;
    box-shadow: 0 0 10px #001c32;
    border: 1px solid #000;
}
#nav li:hover ul.subs {
    left: -200px;
    top: 15px;
    width: 300px;
}
#nav ul li {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    border: 1px solid #000;
    opacity: 0;
    width: 100%;

    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
@-moz-keyframes animation2 {
    0% {
        margin-left:185px;
    }
    100% {
        margin-left:0px;
        opacity:1;
    }
}
#nav li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#nav li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#nav li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#nav li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#nav li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#nav li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#nav li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#nav li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#nav li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}

#adminBox {
    text-align: center;
    font-family: Georia;
    position: absolute;
    left: 100px;
    top: 190px;
}

#mainAdmin {
    text-transform: uppercase; 
    font-size: 24px;
    font-weight: bolder; 
}

#moderList {
    text-transform: uppercase; 
    font-size: 18px;
    font-weight: bolder;
}


.bestOfTheBest {
    position: absolute;
    top: 250px;
    text-align: center;   
    background: url(http://s26.postimg.org/6irc43k7d/rep_emp.png) top no-repeat;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    border: 1px solid #000;
    left: -20px;
    overflow: hidden;
    height: 45px;
    width: 940px;
    font: normal normal 24px/50px 'Georgia', Verdana, sans-serif;
    white-space: nowrap;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-weight: bolder;
    color: #000;
    text-shadow: #6a99b9 0.1em 0.1em 0.2em;
}

.bestOfTheBest:hover {
    color: #000;
    text-shadow: #90c2e6 0.1em 0.1em 0.2em;
    -webkit-box-shadow: 0 0 15px #000;
    -moz-box-shadow: 0 0 15px #000;
    box-shadow: 0 0 15px #000;
}



#activistsBoxLeft, #activistsBoxRight {
    text-align: center;
    text-transform: uppercase;
    font-family: Georgia;
    font-weight: bolder;
    font-size: 18px; 
    position: absolute;
    width: 300px;   
}

.activistsHeadline {
    text-transform: uppercase;
    font-family: Georgia;
    font-weight: bolder;
    font-size: 18px; 
    margin-bottom: 5px;   
}
/*
img {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    border: 1px solid #000;
    opacity: 0.7;
   
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease; 
}

img:hover {
    opacity: 1;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
}*/

#activistsBoxLeft {
    position: absolute;
    top: 20px;
    left: -40px;
}

#activistsBoxRight {
    position: absolute;
    left: 640px;
    top: 20px;
}

#bestPlayerBox {
    width: 400px;
    position: absolute;
    left: 250px;
}

#nameHeader {
    text-align: center;
    text-transform: uppercase;
    font-family: Georgia;
    font-weight: bolder;
    font-size: 18px;   
}

#episodeHeader {
    text-align: center;
    text-transform: uppercase;
    font-family: Georgia;
    font-weight: bolder;
    font-size: 14px;
    background-image: url("http://s26.postimg.org/yjuarbqfd/Line_Divider.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 12px;
    margin-bottom: -5px;
}

#bestPostText {
    text-align: justify;
    font-size: 13px;

}

.readMoreButtonBestPost {
    width: 120px;
    padding: 2px 20px 0px;
    margin: 5px;
    position: relative;
    left: 110px;
    background-color: #d5d5d5;
    text-align: center;
    line-height: 15px;   
    border: 1px solid #000;
    border-radius:5px;
        -webkit-border-radius:5px;
        -khtml-border-radius:5px;
        -moz-border-radius:5px;
        -o-border-radius:5px;
    box-shadow: 0px 3px 3px #000;
        -webkit-box-shadow:0px 3px 3px #000;
        -khtml-box-shadow:0px 3px 3px #000;
        -moz-box-shadow:0px 3px 3px #000;       
   
}

.readMoreButtonBestPost > a {
    font-family: 'Reenie Beanie';
    font-size: 20px;
    color: #000 !important;
    text-shadow: 1px 1px 1px #fff !important;
}

.readMoreButtonBestPost:hover {
    background: transparent;
}

#bestEpBox {
    position: absolute;
    top: 190px;
    left: -30px;
    text-align: center;
}

#bestEpHeadline {
    text-transform: uppercase;
    font-family: Georgia;
    font-weight: bolder;
    font-size: 14px;
    letter-spacing: 10px;
    background-image: url("http://s26.postimg.org/yjuarbqfd/Line_Divider.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 12px;
    margin-bottom: -5px;     
}

#bestEpText {
    text-align: center;
    font-size: 13px;
    left: 10px;
}



.portfolio-items li {
display:inline;
text-align:center;
float:left;
list-style:none;
position:relative;
left: 25px;
top: 0px;
margin-bottom: 5px;
}

.portfolio-items li:first-child {
margin: 0px 5px 0px 0;
}
.portfolio-items li:last-child {
left: 90px;
}

.portfolio-items li img {
display:block;
width:120px;
height:50px;

    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    border: 1px solid #000;
/*    opacity: 0.7;
 
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease; */ 
}

/*
.portfolio-items li img:hover {
    opacity: 1;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
}
*/
.portfolio-items li div.caption h3{
padding-top: 5px;
font: normal normal 20px 'Georgia';
text-transform:uppercase;
width: 120px;
text-align: center;
}

.portfolio-items li div.caption h3 > a {
text-transform:uppercase;
color: #fff;
text-shadow: 1px 1px #000;
}

.portfolio-items li div.caption .descript {
font: normal normal 8px/8px 'Georgia';
text-transform:none;
font-style: italic;
top: 32px;
text-align: center;
position: absolute;
width: 120px;
}

.portfolio-items li div.caption {
display:block;
background:rgba(0,0,0,0.7);
color:#fff;
font-family:Arial,sans-serif;
font-size:11px;
position:absolute;
overflow:hidden;
text-shadow:1px 1px 1px #303857;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-ms-transition:all .7s ease-in-out;
transition:all .7s ease-in-out;
padding:1px;
height: 50px;
}

.portfolio-items li:hover div.caption {
width:120px;
height:50px;
opacity:1;
filter:alpha(opacity=80);
padding:1px;
}

А это само меню

Код:
<div id="userPulsMenu">
                    <ul id="nav">
                        <li><a href="http://swedge.rusff.ru/viewtopic.php?id=2">Гостевая книга</a></li>
                        <li>Вселенная Звездных Войн
                            <ul class="subs">
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=4">Ситуация в Галактике [Сюжет]</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=280">Великая Сила и ее особенности</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=281">Календарь вселенной Звездных Войн</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=283">Архив отыгранных сюжетных веток</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=362">Квестовая ветка #3</a></li>
                            </ul>
                        </li>
                        <li>Персонажи и создание
                            <ul class="subs">
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=5">Список канонических персонажей</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=11">Система воинских званий НР и ОИ</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=10">Нужные канонические персонажи</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=47">Нужные неканонические персонажи</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=6">Действующие персонажи и имена</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=9">Шаблоны анкеты персонажа</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=8">Навыки и характеристики</a></li>
                                <li><a href="http://swedge.rusff.ru/viewforum.php?id=7"><b>ПОДАТЬ АНКЕТУ!</b></a></li>
                            </ul>
                        </li>
                        <li>Пользовательская
                            <ul class="subs">
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=320">Заполнение личного звания</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=21">Поиск партнера для игры</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=399">Ярмарка квестов</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=279">Начисление очков Силы (FP)</a></li>
                                <li><a href="http://swedge.rusff.ru/viewtopic.php?id=211">Запросы на открытие/закрытие темы</a></li>
                            </ul>
                        </li>
                        <li><a href="http://top.roleplay.ru/21492" target="top_" title="Рейтинг Ролевых Ресурсов с возможностью комментирования сайтов - RPG TOP">Голосовать на RPG-TOP</a></li>
                    </ul>     
                </div>

Дальше разбирайтесь сами

Домовой
 

Мужчина

Сообщения : 6804
Возраст : 93
Место обитания : :яинатибо отсеМ
Регистрация : 2010-01-30
Благодарности : 3216

Без предупреждений

http://udomovogo.rusff.ru

Вернуться к началу Перейти вниз

Re: Меню на главную

Сообщение автор Xan_Kriegor в Чт 6 Авг - 3:31

Первый код в CSS, а второй куда? Мистер Домовой, подскажи плиз))

Xan_Kriegor
 

Сообщения : 973
Возраст : 33
Регистрация : 2013-09-18
Благодарности : 13

Без предупреждений

http://www.residentevilarena.com

Вернуться к началу Перейти вниз

Re: Меню на главную

Сообщение автор Домовой в Чт 6 Авг - 10:53

Ну я же не знаю куда вы хотите его поставить. В виджет, в приветствие, пробуйте.

Домовой
 

Мужчина

Сообщения : 6804
Возраст : 93
Место обитания : :яинатибо отсеМ
Регистрация : 2010-01-30
Благодарности : 3216

Без предупреждений

http://udomovogo.rusff.ru

Вернуться к началу Перейти вниз

Re: Меню на главную

Сообщение автор Xan_Kriegor в Чт 6 Авг - 18:23

Ясно. Попробовал... Это только менюшки... Я-то думал сам стиль дизайна такой можно поставить... Было бы занятно! Футуристический кибер-дизайн - это здорово! А менюшка сама по себе не к чему... Под нее весь форум и все стилистику шапки нужно менять...

Xan_Kriegor
 

Сообщения : 973
Возраст : 33
Регистрация : 2013-09-18
Благодарности : 13

Без предупреждений

http://www.residentevilarena.com

Вернуться к началу Перейти вниз

Re: Меню на главную

Сообщение автор Мурзик в Пт 7 Авг - 15:03

А вот мне как раз нужно было только меню).
Спасибо, Домовой!).


Мурзик
 

Сообщения : 226
Регистрация : 2011-05-19
Благодарности : 6

Без предупреждений

http://rolanime.2x2forum.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения