CSS3で実装されたスライドメニュー
結果：
実装コード:
<!DOCTYPE html><html class="menu">
<html>
<ヘッド>
<メタ文字セット="utf-8"/>
<meta http-equiv="X-UA-compatible" content=="IE=edge"/>
<meta name="google" value="notranslate"/>
<title>サイドメニュー</title>
<link rel="スタイルシート" type="text/css" href="css/menu.css">
<link rel="スタイルシート" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="スタイルシート">
</head>
<本文>
</div><nav class="main-menu">
<div>
<a class="logo" href="http://startific.com">
</a>
</div>
<div class="settings"></div>
<div class="スクロールバー" id="style-1">
<ul>
<li>
<a href="http://startific.com">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">ホーム</span>
</a>
</li>
<li>
<a href="http://startific.com">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">ログイン</span>
</a>
</li>
<li>
<a href="http://startific.com">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">お問い合わせ</span>
</a>
</li>
<li>
<a href="http://startific.com">
<i class="fa fa-heart-o fa-lg"></i>
<span class="share">
<div class="addthis_default_style addthis_32x32_style">
<div style="position:absolute;
左余白: 56px;上: 3px;">
<a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" width="30px" height="30px"></a>
<a href="https://twitter.com/share" target="_blank" class="share-popup"><img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" height="30px"></a>
<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=_URL_&title=_TITLE_
" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" width="30px" height="30px"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a"></script>
</span>
<span class="twitter"></span>
<span class="google"></span>
<span class="fb-like">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&width&layout=button&action=like&show_faces=false&share=false&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>
</span>
<span class="nav-text">
</span>
</a>
</li>
</li>
<li class="darkerlishadow">
<a href="http://startific.com">
<i class="fa fa-clock-o fa-lg"></i>
<span class="nav-text">ニュース</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-desktop fa-lg"></i>
<span class="nav-text">テクノロジー</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-plane fa-lg"></i>
<span class="nav-text">旅行</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-shopping-cart"></i>
<span class="nav-text">ショッピング</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-microphone fa-lg"></i>
<span class="nav-text">映画と音楽</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-flask fa-lg"></i>
<span class="nav-text">Web ツール</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-picture-o fa-lg"></i>
<span class="nav-text">アート＆デザイン</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-align-left fa-lg"></i>
雑誌
</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-gamepad fa-lg"></i>
<span class="nav-text">ゲーム</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-glass fa-lg"></i>
<span class="nav-text">ライフ＆スタイル
</span>
</a>
</li>
<li class="darkerlishadowdown">
<a href="http://startific.com">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">楽しい</span>
</a>
</li>
</ul>
<li>
<a href="http://startific.com">
<i class="fa fa-question-circle fa-lg"></i>
<span class="nav-text">ヘルプ</span>
</a>
</li>
<ul class="ログアウト">
<li>
<a href="http://startific.com">
<i class="fa fa-lightbulb-o fa-lg"></i>
<span class="nav-text">
ブログ
</span>
</a>
</li>
</ul>
</nav>
</本文>
</html>CSS3
体
{
マージン:0px;
パディング:0px;
フォントファミリ: "Open Sans"、arial;
背景:url('https://static.tumblr.com/94eb957a00fd03c0c2f7d26decd71578/u1rhacw/osAmyyh1q/tumblr_static_tumblr_static_gaussian_blur_gradient_desktop_1680x943_wallpaper-393751.jpg');
色:#fff;
フォントの太さ:300;
}
url をインポートします(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
。ロゴ{
}
。設定 {
高さ:73px;
フロート:左;
背景:url(https://s3.postimg.org/bqfooag4z/startific.jpg);
背景繰り返し:繰り返しなし;
幅:250px;
マージン:0px;
テキスト配置: 中央;
フォントサイズ:20px;
フォントファミリー: 'Strait'、サンセリフ;
}
/* スクロールバー */
.スクロールバー
{
高さ: 90%;
幅: 100%;
オーバーフロー-y: 非表示;
オーバーフロー-x:非表示;
}
.スクロールバー:ホバー
{
高さ: 90%;
幅: 100%;
overflow-y: スクロール;
オーバーフロー-x:非表示;
}
/* スクロールバーのスタイル */
#style-1::-webkit-スクロールバー-トラック
{
境界線の半径: 2px;
}
#スタイル-1::-webkit-スクロールバー
{
幅: 5px;
背景色: #F7F7F7;
}
#style-1::-webkit-スクロールバー-サムネイル
{
境界線の半径: 10px;
-webkit-box-shadow: インセット 0 0 6px rgba(0,0,0,.3);
背景色: #BFBFBF;
}
/* スクロールバー終了 */
.fa-lg {
フォントサイズ: 1em;
}
.fa {
位置: 相対的;
表示: テーブルセル;
幅: 55px;
高さ: 36px;
テキスト配置: 中央;
上:12px;
フォントサイズ:20px;
}
.main-menu:hover、nav.main-menu.expanded {
幅:250px;
オーバーフロー:非表示;
不透明度:1;
}
.メインメニュー{
背景:#F7F7F7;
位置:絶対;
トップ:0;
下:0;
高さ:100%;
左:0;
幅:55px;
オーバーフロー:非表示;
-webkit-transition:width .2s リニア;
transition:width .2s 線形;
-webkit-transform:translateZ(0) スケール(1,1);
ボックスの影: 1px 0 15px rgba(0, 0, 0, 0.07);
不透明度:1;
}
.main-menu>ul {
マージン:7px 0;
}
.メインメニュー li {
位置:相対;
表示:ブロック;
幅:250px;
}
.main-menu li>a {
位置:相対;
幅:255px;
表示:テーブル;
境界線の折りたたみ:折りたたみ;
境界線の間隔:0;
色:#8a8a8a;
フォントサイズ: 13px;
テキスト装飾:なし;
-webkit-transform:translateZ(0) スケール(1,1);
-webkit-transition:all .14s リニア;
遷移:すべて .14 秒線形;
フォントファミリー: 'Strait'、サンセリフ;
上境界線:1px 実線 #f2f2f2;
テキストシャドウ: 1px 1px 1px #fff;
}
.メインメニュー .navアイコン {
位置:相対;
表示:テーブルセル;
幅:55px;
高さ:36px;
テキスト配置:中央;
垂直方向の位置合わせ:中央;
フォントサイズ:18px;
}
.メインメニュー .navテキスト {
位置:相対;
表示:テーブルセル;
垂直位置揃え:中央;
幅:190ピクセル;
フォントファミリー: 'Titillium Web'、サンセリフ;
}
.メインメニュー .シェア {
}
.メインメニュー .fbのような{
左: 180ピクセル;
位置:絶対;
上: 15px;
}
.main-menu>ul.logout {
位置:絶対;
左:0;
下:0;
}
.no-touch .scrollable.hover {
オーバーフロー-y:非表示;
}
.no-touch .scrollable.hover:hover {
オーバーフロー-y:自動;
オーバーフロー:表示可能;
}
/* ロゴホバープロパティ */
.settings:hover、settings:focus {
背景:url( https://s17.postimg.org/74cl7s05b/logo_hover.jpg );
-webkit-transition: すべて 0.2 秒のイーズインアウト、幅 0、高さ 0、上 0、左 0;
-moz-transition: すべて 0.2 秒のイーズインアウト、幅 0、高さ 0、上 0、左 0;
-o-transition: すべて 0.2 秒のイーズインアウト、幅 0、高さ 0、上 0、左 0;
遷移: すべて 0.2 秒のイーズインアウト、幅 0、高さ 0、上 0、左 0;
}
.settings:active、settings:focus {
背景:url(https://s3.postimg.org/bqfooag4z/startific.jpg);
-webkit-transition: すべて 0.1 秒のイーズインアウト、幅 0、高さ 0、上 0、左 0;
-moz-transition: すべて 0.1 秒のイーズインアウト、幅 0、高さ 0、上 0、左 0;
-o-transition: すべて 0.1 秒のイーズインアウト、幅 0、高さ 0、上 0、左 0;
遷移: すべて 0.1 秒のイーズインアウト、幅 0、高さ 0、上 0、左 0;
}
ホバー、フォーカス{
テキスト装飾:なし;
左境界線:0px 実線 #F7F7F7;
}
ナビゲーション{
-webkit-user-select:なし;
-moz-ユーザー選択:なし;
-ms-ユーザー選択:なし;
-o-ユーザー選択:なし;
ユーザー選択:なし;
}
nav ul、nav li {
アウトライン:0;
マージン:0;
パディング:0;
テキスト変換:大文字;
}
/* 暗い要素のサイドメニューの開始*/
.darkerli
{
背景色:#ededed;
テキスト変換:大文字化;
}
.darkerlishadow
{
背景色:#ededed;
テキスト変換:大文字化;
-webkit-box-shadow: インセット 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow: インセット 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
ボックスシャドウ: インセット 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}
.darkerlishadowdown
{
背景色:#ededed;
テキスト変換:大文字化;
-webkit-box-shadow: インセット 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow: インセット 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
ボックスシャドウ: インセット 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}
/* 暗い要素のサイドメニュー終了*/
.main-menu li:hover>a、nav.main-menu li.active>a、.dropdown-menu>li>a:hover、.dropdown-menu>li>a:focus、.dropdown-menu>.active>a、.dropdown-menu>.active>a:hover、.dropdown-menu>.active>a:focus、.no-touch .dashboard-page nav.dashboard-menu ul li:hover a、.dashboard-page nav.dashboard-menu ul li.active a {
色:#fff;
背景色:#00bbbb;
テキストシャドウ: 0px 0px 0px;
}
。エリア {
フロート: 左;
背景: #e2e2e2;
幅: 100%;
高さ: 100%;
}
@フォントフェイス {
フォントファミリー: 'Titillium Web';
フォントスタイル: 通常;
フォントの太さ: 300;
src: ローカル('Titillium WebLight')、ローカル('TitilliumWeb-Light')、url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) フォーマット('woff');
}以上がCSS3で実装したサイドスライドメニューの詳細内容です。CSS3サイドスライドメニューの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。 |
推薦する
シンプルなデータ応答システムを実装する
目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...
divとtableの選択と組み合わせ方について簡単に説明します
ページレイアウトは、Web ページを扱い始めた頃からずっと気にかけていたことです。初期のテーブル構造...
MYSQL開発パフォーマンス調査：バッチデータ挿入の最適化方法
1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...
VueはGraphVisを使用して無限に拡張された関係グラフを開発します
1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...
CSS の複数行テキストがオーバーフローする場合の省略記号の例
複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...
dockerコマンドの使用にはsudoは必要ありません
docker デーモンは通常の TCP ポートではなくホストの Unix ソケットにバインドする必要...
Dockerデータ管理とネットワーク通信の使用
Docker をインストールし、Docker コアとインストールを通じて簡単な操作を実行できます。 ...
Vue3はCSSの無限シームレススクロール効果を実装します
この記事では、CSS無限シームレススクロール効果を実現するためのvue3の具体的なコードを参考までに...
MySQL データベース操作 (作成、選択、削除)
MySQL データベースの作成MySQL サービスにログインしたら、create コマンドを使用し...
Vue+SpringBoot で Alipay サンドボックス決済を実装するためのサンプルコード
まず、Alipay サンドボックスから一連のものをダウンロードします。多くのブログで取り上げられてお...
マークアップ言語 - タイトル
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
MySQLでルートユーザーのパスワードを変更する方法
方法1: SET PASSWORDコマンドを使用する mysql> username@loca...
要素テーブルの行と列のドラッグを実装する例
要素 ui テーブルにはドラッグ アンド ドロップによる並べ替え機能が組み込まれておらず、サードパー...
CocosCreatorで複数のタイマーを使用する方法の詳細な説明
1.タイムアウトを設定する3 秒後に abc を印刷します。一度だけ実行します。 setTimeou...
MySQL 学習ノート: データ エンジン
現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...