Обновленные темы Популярные темы Активные пользователи
SGM 2.2 + Gunslinger Mod 1 08.08.2020 в 22:06 от Бармен Заказать мод из Steam 4 05.08.2020 в 17:20 от 2024end Канувшие в небытие 3 04.08.2020 в 02:26 от Бармен Wicked Whims - Стриптиз клубы - давайте танцевать 6 02.08.2020 в 22:32 от dimamalibu12 Битая ссылка 38 27.07.2020 в 20:58 от 2024end Вертикальное меню Juliet для uCoz rip Бармен 0 21.07.2020 в 14:41 от Бармен Кнопка Загрузить из Steam для uCoz rip Бармен 0 20.07.2020 в 01:53 от Бармен Oblivion Chronicles 1 16.07.2020 в 15:19 от 2024end Global Stalker Weather Rework 0 16.07.2020 в 15:17 от 2024end Back to the S.T.A.L.K.E.R. 0 16.07.2020 в 15:16 от 2024end
2024end 3973
Zero 25

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Вертикальное меню Juliet для uCoz rip Бармен
Вертикальное меню Juliet для uCoz rip Бармен
Администраторы
Кол-во постов: 166
Репутация: 759
Регистрация: 28.07.2018
Статус: Не в сети
 Автор темы | Вторник, 21.07.2020, 14:41 | Сообщение # 1


Рипал: Бармен

Ссылка на скачивание!
Вставляет в верхнею часть сайта:

HTML:

Скачать!

CSS:

Код
@import url("https://fonts.googleapis.com/css2?family=Niconne&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sree+Krushnadevaraya&display=swap");

@charset "utf-8";

/*
   メニューアイコン
========================================== */

ul {
    list-style: none;
    padding: 0;
}

*,
::before,
::after {
    background-repeat: no-repeat;
    box-sizing: inherit;
}

::before,
::after {
    text-decoration: inherit;
    vertical-align: inherit;
}

.menuIcon {
    position: fixed;
    z-index: 1500;
    top: -10px;
    right: 20px;
    width: 50px;
    height: 60px;
    padding: 15px 5px 5px;
    background: #b8a97b;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: 0.4s;
}

@media screen and (min-width: 900px) {
    .menuIcon {
        width: 74px;
        height: 90px;
        right: 60px;
    }

    .menuIcon:hover {
        transform: translate3d(0, 10px, 0);
    }
}

.menuIcon::before,
.menuIcon::after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 25px;
    height: 10px;
    border-bottom: 10px solid transparent;
}

.menuIcon::before {
    left: 0;
    border-left: 25px solid #b8a97b;
}

.menuIcon::after {
    right: 0;
    border-right: 25px solid #b8a97b;
}

@media screen and (min-width: 900px) {
    .menuIcon::before,
    .menuIcon::after {
        width: 37px;
        height: 20px;
        border-right-width: 37px;
        border-left-width: 37px;
    }
}

.menuIcon__text {
    margin-top: 2px;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    white-space: nowrap;
    font-family: "Sree Krushnadevaraya", serif;
}

@media screen and (min-width: 900px) {
    .menuIcon__text {
        font-size: 1.1rem;
    }
}

.menuIcon__text::before {
    content: "menu";
}

#g_navi_v.is-open .menuIcon__text::before {
    content: "close";
}

.menuIcon__lineWrap {
    position: relative;
    width: 28px;
    height: 16px;
    margin: 0 0 1px;
}

@media screen and (min-width: 900px) {
    .menuIcon__lineWrap {
        width: 40px;
        height: 26px;
        margin: 0 0 2px;
    }
}

.menuIcon__line {
    position: absolute;
    display: inline-block;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: 0.4s;
}

.menuIcon__line:nth-child(1) {
    top: 0;
}

.menuIcon__line:nth-child(2) {
    top: calc(50% - 1px);
}

.menuIcon__line:nth-child(3) {
    bottom: 0;
}

#g_navi_v.is-open .menuIcon__line:nth-child(1) {
    transform: translateY(7px) rotate(35deg);
}

@media screen and (min-width: 900px) {
    #g_navi_v.is-open .menuIcon__line:nth-child(1) {
        transform: translateY(12px) rotate(35deg);
    }
}

#g_navi_v.is-open .menuIcon__line:nth-child(2) {
    transform: rotate(-35deg);
}

#g_navi_v.is-open .menuIcon__line:nth-child(3) {
    transform: translateY(-20px) scale(0);
}

/*
   ドロワー全体
========================================== */
.drawer {
    position: fixed;
    z-index: 1300;
    top: -50px;
    right: 0;
    bottom: -50px;
    left: 0;
    background: #862626;
    color: #b8a97b;
    transition: 1.5s cubic-bezier(0.82, -0.12, 0.07, 0.93);
    transform: translate3d(0, -100%, 0);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 90px 0;
}

@media screen and (min-width: 900px) and (min-height: 600px) {
    .drawer__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }
}

#g_navi_v.is-open .drawer {
    transition: 1.5s cubic-bezier(0.86, 0.1, 0.05, 1.05);
    transform: translate3d(0, 0, 0);
}

/*
   ロゴ
========================================== */
.drawerLogo {
    text-align: center;
}

/*
   グローバルメニュー
========================================== */
.globalNav > ul {
    font-family: "Niconne", cursive;
    text-align: center;
    font-size: 2.5rem;
}

@media screen and (max-width: 899px) {
    .menuIcon__lineWrap {
        line-height: 1.4;
    }
}

.globalNav > ul > li {
    margin-bottom: 4px;
}

.globalNav > ul a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 0 1em;
    position: relative;
}

.globalNav > ul a::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 1em;
    right: 1em;
    height: 1px;
    background: #b8a97b;
    width: 0;
    transition: 0.5s;
    margin: 0 auto;
}

.globalNav > ul a.fir_crt::after,
.globalNav > ul a:hover::after {
    width: calc(100% - 2em);
}

/*
   シェアボタン
========================================== */

.socialList {
    display: flex;
    justify-content: center;
    margin-top: 0;
}

.socialList__item {
    margin: 5px;
}

.socialList__item a {
    transition: none;
}

.svg_circle {
    fill: rgba(184, 169, 123, 0);
    stroke: rgba(184, 169, 123, 1);
    stroke-miterlimit: 10;
    stroke-width: 2px;
    transition: 1s;
}

a:hover .svg_circle {
    fill: rgba(184, 169, 123, 1);
    stroke: rgba(184, 169, 123, 0);
}

.svg_path {
    fill: rgba(184, 169, 123, 1);
    transition: 2s;
    transition-delay: 0.4s;
}

a:hover .svg_path {
    fill: rgba(133, 39, 39, 1);
}

JS:

Код
$(function () {
    var icon = $(".menuIcon");
    var gNav = $("#g_navi_v");
    var switchSize = 900;
    screenType = null;
    navState = "close";

    $(window).on("load resize", function () {
        var wW = $(window).width();
        if (wW > switchSize) {
            if (screenType !== "wide") {
                screenType = "wide";
                closeNav();
            } else {
                return;
            }
        } else {
            if (screenType !== "narrow") {
                screenType = "narrow";
            } else {
                return;
            }
        }
    });

    icon.on("click", function () {
        if (navState === "close") {
            openNav();
        } else {
            closeNav();
        }
        return false;
    });

    function openNav() {
        navState = "open";
        gNav.addClass("is-open");
    }

    function closeNav() {
        navState = "close";
        gNav.removeClass("is-open");
    }
});

/* ==========================================
*
*  Social Share
*
========================================== */
var MAVJS = MAVJS || {};

MAVJS.socialShare = function (hashtag, related) {
    if (typeof hashtag === "undefined") {
        var hashtag = "";
    }
    if (typeof related === "undefined") {
        var related = "";
    }

    var title = encodeURI(decodeURI(document.title)).replace(/&/g, "%26").replace(/#/g, "%23"),
        encodeHashtag = encodeURI(decodeURI(hashtag)).replace(/#/g, ""),
        url = location.href.split("#"),
        $shareTwitter = $(".js-share--twitter"),
        $shareFacebook = $(".js-share--facebook"),
        $shareLine = $(".js-share--line"),
        twitterHref = "https://twitter.com/" + title + "%0D%0A" + "&url=" + url[0] + "&hashtags=" + encodeHashtag + "&related=" + related,
        facebookHref = "https://www.facebook.com/" + url[0],
        lineHref = "https://line.me/ru/" + url[0] + "&text=" + title;

    function newShareWindow() {
        var w = 550,
            h = 500,
            x = (screen.width - w) / 2,
            y = (screen.height - h) / 2;
        window.open(this.href, null, "screenX=" + x + ",screenY=" + y + ",left=" + x + ",top=" + y + ",width=" + w + ",height=" + h);
        return false;
    }

    $shareTwitter.attr("href", twitterHref);
    $shareFacebook.attr("href", facebookHref);
    $shareLine.attr("href", lineHref);

    $shareTwitter.on("click", newShareWindow);
    $shareFacebook.on("click", newShareWindow);
    $shareLine.on("click", newShareWindow);
};

$(function () {
    MAVJS.socialShare("juliet_anime", "juliet_anime,yousukekaneda");
});
Форум — Synthira.Ru » Web-Раздел » Скрипты для uCoz » Вертикальное меню Juliet для uCoz rip Бармен
  • Страница 1 из 1
  • 1
Поиск: