今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。

サンプルをみてもらうとわかりやすいと思います。

「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』サンプル」

レスポンシブ対応のドロップダウンメニューですので、スマホなどでも綺麗に表示されます。jQueryプラグインは使用していません。


【設置方法】
まずはcssファイルを作成します。ソースは以下の通りです。

CSS

HTMLの記述は以下の通りです。
<head>部で先ほど作成したCSSファイルを読み込みます。

<body>部にメニューの記述をします。

</body>の直前にJavaScriptを記述します。

ぜひサイト作成に活用してみて下さい。印象的なドロップダウンメニューが作れますね。

参考にしたサイトはコチラです。
http://www.jordanm.co.uk/lab/topdrawer


あわせてお読みください