skillup

技術ブログ

サーバー・ネットワーク

メニュー系のCSS

投稿日:

よく迷うのでこれを機にまとめておこうかと。

通常時のメニュー

html

css

携帯(いわゆる縦のメニュー)

メモ

  • box-sizing:border-boxは幅まで含めた幅を均等に出せる
  • last-childのborder-noneを忘れないように
  • a要素はinline-blockだったりtable-cellのこともあるが、幅を指定することが大切。

ホバー時の画像選択

html

css

  • ホバーをcssでなく画像で処理する場合、大きい画像の位置をずらして1つに見せる

小ネタ 選択されているときのメニュー

※activeではなく、クリックされ選択されているケース

html

css

その他、新しいブラウザであればflexboxなどが強力。

-サーバー・ネットワーク
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

docker メモ

まだ数時間しか触ってませんが、なんとなくのイメージなど Vagrantと違いOSではなく主にミドルウェア(httpd,mysqlなど)を手軽に構築する仮想環境ツール Linuxの中でしか動かない 起動 …

no image

PHPのコマンドライン+隠しファイルも含めたcpコマンド

超小ネタを2つほど phpにrオプションを入れるとPHPコードを実行できます。

cp コマンドですが、隠しファイルも含めてコピーしたい …

no image

ansible template,tag,yeditなど

Contents1 template2 tags3 yedit template 今まで設定ファイルを使うときは基本ini_fileを使って置換したり、ローカルでファイルを作ってcopyしておりました …

no image

vimの設定に関して

今の開発ではほとんどeclipseを使っていますが、プログラミングをやり始めてから2年ぐらいはずっとgvim(vimのGUI版)でした。 別にこだわりがあったわけではないんですけどね。 最初にならった …

no image

FTPソフトでのアクティブモード&パッシブモードについて

Webアプリを作る場合、基本的にSSHが使えることが前提だったんですが、先日安いサーバーでWebサイトを作る案件があり、FTPでアップをする必要に迫られました。 その時に、「ログインはできているんだけ …