text 从左到右滑动菜单
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text 从左到右滑动菜单相关的知识,希望对你有一定的参考价值。
*HTML
<div class="menu-slide">
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/common/img/ico/ico-close.png" alt="" class="icon-close"/>
<ul class="list-memu">
<li>
<a href="<?php echo esc_url(home_url('/')); ?>">トップページ</a>
</li>
<li>
<a href="<?php echo esc_url(home_url('about-us/')); ?>">ノービスハイエスト サービスについて</a>
</li>
<li>
<a href="#">代表挨拶</a>
</li>
<li>
<a href="<?php echo esc_url(home_url('company/')); ?>">会社概要</a>
</li>
<li>
<a href="#">アクセス</a>
</li>
<li>
<a href="<?php echo esc_url(home_url('news/')); ?>">お知らせ</a>
</li>
<li>
<a href="<?php echo esc_url(home_url('contact/')); ?>">お問い合わせ</a>
</li>
<li>
<a href="#">プライバシーポリシー</a>
</li>
<li>
<a href="#">サイトマップ</a>
</li>
</ul>
</div>
//----------------------------------------------
.menu-slide {
position: fixed;
top: 0;
z-index: 1031;
display: flex;
flex-direction: column;
transition: all 200ms linear;
height: 100vh;
padding-top: 25px;
padding-right: 50px;
padding-left: 80px;
transform: translateX(-100%);
background-color: rgba(0, 0, 0, 0.7);
@media (max-width: $screen-xs-max) {
padding-right: 50px;
padding-left: 50px;
}
&.toggle {
transform: none;
}
.list-memu {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 10px 0;
list-style: none;
@media (max-width: $screen-xs-max) {
padding-right: 20px;
}
li {
a {
position: relative;
display: inline-block;
padding-right: 30px;
color: #fff;
@media (min-width: $screen-sm-min) {
font-size: 16px;
}
&:after {
position: absolute;
top: -2px;
right: 0;
bottom: 0;
display: block;
width: 9px;
height: 9px;
margin-top: auto;
margin-bottom: auto;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
content: '';
@media (max-width: $screen-xs-max) {
top: -4px;
}
}
}
}
}
.icon-close {
position: absolute;
top: 25px;
left: 30px;
@media (max-width: $screen-xs-max) {
left: 15px;
}
&:hover {
@include opacity (.7);
cursor: pointer;
}
}
}
.menu-trigger {
position: absolute;
top: 3px;
right: 0;
width: 27px;
height: 24px;
transition: all .3s;
@media (max-width: $screen-xs-max) {
display: inline-block;
}
&,
&:hover,
&:focus,
&:active {
background-color: transparent !important;
border: 0;
outline: 0;
}
.icon-bar {
position: absolute;
left: 0;
display: inline-block;
width: 100%;
height: 3px;
background-color: #888;
transition: all .3s;
&:nth-of-type(1) {
top: 0;
}
&:nth-of-type(2) {
top: 11px;
}
&:nth-of-type(3) {
bottom: 0;
}
& + .icon-bar {
margin-top: 0;
}
}
&:hover,
&:focus {
.icon-bar {
&:first-child {
transform: translateY(3px);
}
&:last-child {
transform: translateY(-2px);
}
}
}
}
/*
* SLIDE MENU
* ----------------------------------------------- */
jQuery(document).ready(function ($) {
// Active Menu
$('.menu-trigger').click(function(event) {
$('.menu-slide').addClass('toggle');
$('.menu-trigger').addClass('hidden');
});
$('.menu-slide .icon-close').click(function(event) {
$(this).parent().removeClass('toggle');
$('.menu-trigger').removeClass('hidden');
});
});
以上是关于text 从左到右滑动菜单的主要内容,如果未能解决你的问题,请参考以下文章