jqueryで書かれたメニューが左から右にスライドして表示されます_jquery

最近、たまたまマイクロサイトの作成について調べていて、WeChat 3 プラットフォーム開発チュートリアルに関する多くの情報を読みました。そのような紹介はほとんどありませんが、それらはすべてマイクロサイトを作成するためのテンプレートを提供するサードパーティのプラットフォームです。 Liu Feng Blog にとても感謝しています。私がマイクロサイトについて説明するために書いた最後の記事、

「マイクロサイトとは何ですか?

マイクロサイトは、一部の人によって神格化されています。マーケティング担当者は、多くの開発者に、マイクロサイトとは何なのか、マイクロサイトの開発方法について尋ねています。マイクロサイトとは、本質的には、WeChat ブラウザーを入り口として使用し、テクノロジーと互換性のあるモバイル Web サイト (Web APP) です。 Android、iOS、WP などのマイクロサイトの開発に使用される技術。通常の Web サイトの開発は HTML (HTML5)、CSS、JavaScript などに基づいているため、通常の Web サイト開発の経験のある開発者は十分にマイクロサイトの開発が可能です。

追伸: 初心者は今後どうなるでしょうか。マイクロモール、マイクロ顧客サービス、マイクロ統計など、「微」で始まる新しい用語は、「微」という単語を削除するか考えれば理解するのは難しくありません。 「微」の「WeChatベース」は、

ほとんどがhtml5の書き方なのでわかりやすいです。 。 。 「WeChat Business Bao」の事例も参考にさせていただきましたので、その中のナビゲーションのデモを書いてみました。


jq によって作成され、ライブラリ ファイルを引用する必要があります。ここではオンライン CDN アドレスが使用されます:

コードをコピーします コードは次のとおりです:

次に、HTML ナビゲーション構造を記述します

コードをコピーします コードは次のとおりです。

クイックメニュー

list-item-title">ホーム> ;



< ;a class="list-item">

会社概要

;

;/p>

ニュース

スパンクラス="リスト項目アイコン">

この部分については何も技術的なものはなく、純粋に div 構造です




コードをコピー

コードは次のとおりです。

*{マージン:0; パディング:0;} ボディ{ フォント サイズ:1em; マージン:0; 🎜>

コードをコピー


コードは次のとおりです:

/*ie8-*/
.quick{
position:relative;
left:0; を考慮しない、css3 属性の記述方法を使用したショートカット ボタンのスタイルです。 🎜 >トップ:0;
幅:100%;
高さ:32px;
背景:-webkit-gradient(リニア、左上、左下、から(#99f)、へ(#96f) ) ;
背景:-webkit-linear-gradient(#99f, #96f);
背景:-moz-linear-gradient(#99f, #96f);勾配 (#99f, #9f);
背景: -o-linear-gradient(#99f, #96f);
背景: 線形勾配(#99f, #96f);この側はナビゲーションの CSS です。 */
.slideLeftMenu{
display:none>width:272px ;
最小高さ:100%;
位置:絶対;
上:0; 🎜>}
.slideLeftMenu .quick-toolbar,
.slideLeftMenu .list-item{
display:block;
width:100%;
height: 42px;
line-height:42px;
background:-webkit-gradient(linear, 左上, 左下, from(#444), to(#222));線形勾配 (#444, #222);
背景: -moz-linear-gradient(#444, #222);
背景: -ms-linear-gradient(#444, #222); 🎜>背景:-o-linear-gradient(#444, #222);
背景:linear-gradient(#444, #222);
}
.quick-toolbar .toolbar-title{
float:right;
color:#fff;
margin-right:10px;
.quick-toolbar .toolbar-icon-delete{
float:left; 🎜>幅:18px;
マージン:11px 0 0 10px;
背景:url(images/icons-18-white.png) -73px -1px #212121; border-radius :9px;
}
.list-item-title{
float:left;
font:blod 1.125em Arial、Helvetica、サンセリフ; #fff;
text-indent:0.75em;
border:solid 0px red;
.list-item-icon{
float:right ;
幅:18px;
マージン:11px 0 0;
背景:url(images/icons-18-white.png) 212121;
border-radius:9px;
}/*マスクの CSS 部分。これらのほとんどは、ナビゲーションが右側からスムーズに移動するようにするため、絶対位置を使用して実装されています。 >.マスクレイヤー{
表示:なし;
高さ:100%;
左:0; >background ; jq を使用してアニメーション部分を処理します。次のコード




コードをコピーします


コードは次のとおりです:


window.QuickPanel = { //グローバル関数を定義
'isOpened': false,
'opened': function(){ //背景レイヤーのパネルを開くメソッドを定義します。開いている間にショートカット ボタンのレイヤーをクリックすると、パネルが閉じます。 );
$quickpanel_toolbar.on("click" ,function (){
window.QuickPanel.closed();
});
$panel.css({ //右に移動し、絶対配置を使用して操作します
"width":"272px "、
"top":"-6px"、
"right":"-272px"
}).show() .animate({"right":"0"},function() {
window.QuickPanel.isOpened = true;
});
'closed': function(){ //パネルを閉じるメソッドを定義
$panel.css({" right":"0"}).show().animate({
"right":"-272px"
} ,function(){
$masklayer.fadeOut(); //この方法 フェードアウトしたばかりのマスクをクリックする速度が速すぎると問題が発生します。 。 。

window.QuickPanel.isOpened = false;
$panel.hide(); // アニメーションが終了すると、スクロール バーが表示されなくなります
}); 🎜>} ;

この部分は、open と close の 2 つのメソッドを持つクイックパネル関数をカプセル化しました。クリックして他の dom 要素を呼び出す方が便利です。最終的な実装は図のようになります。 ps: ここで問題が発生します。スライド処理中にスクロール バーが表示されます。これを解決するアイデアはありますか? ?添付ファイルをリソースに置きましたので、ダウンロードして実行してください。何か問題がある場合は、メッセージを残してください~~ありがとうございます。