CSS 三角 を利用したメニューを作る(レスポンシブ)

公開日: : CSS

CSS三角を利用したメニューを作る(レスポンシブ)

前回の吹き出しを利用して、段階を見せるような三角メニューを作っておきます。
なるべくレスポンシブ対応にしようと思います。

■ HTML

<div class="wrap">
<div class="yamenu-sp">

<div class="yamenu">
<p><span>1.朝起きる</span></p>
</div>

<div class="yamenu">
<p><span>2.歯を磨く</span></p>
</div>

<div class="yamenu">
<p><span>3.着替える</span></p>
</div>

</div>
</div>

メニューと言ってもaタグが入っていないので、リンクしたい場合は、pタグをaタグにすれば多分出来ると思います。

三角内側メニュー

DEMO を見る
■ CSS

body{
text-align:center;background:#ddff99;
}
.wrap{
width:90%;margin:200px auto;
}
.yamenu-sp{
	display:block;
	width:100%;
	height:200px;
}
.yamenu{
	display:block;
	width:28%;
	height:200px;
	float:left;
	position:relative;
}
.yamenu p{
 	display:block;float: left;
	width:85%;height:100px;
	text-align: center;
	position:absolute;
	color:#fff;
}
.yamenu span {
display:block;margin:10px 10px 10px 10px;
}
.yamenu-sp div:first-child p{background:#000;}
.yamenu-sp div:nth-child(2) p{ background:#666; }
.yamenu-sp div:nth-child(3) p{ background:#999; }

.yamenu p:after{
    content:'';
    border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
    position: absolute;
	top: 30%;
	left: 90%;
}
.yamenu-sp div:first-child p:after{border-left: 20px solid #f00;}
.yamenu-sp div:nth-child(2) p:after{ border-left: 20px solid #f66; }
.yamenu-sp div:nth-child(3) p:after{ border-left: 20px solid #f99; }

矢印型メニュー

DEMO を見る
■ CSS

body{
text-align:center;background:#ddff99;
}
.wrap{
width:90%;margin:200px auto;
}
.yamenu-sp{
	display:block;
	width:100%;
	height:200px;
}
.yamenu{
	display:block;
	width:28%;
	height:200px;
	float:left;
	position:relative;
}
.yamenu p{
 	display:block;float: left;
	width:85%;height:100px;
	text-align: center;
	position:absolute;
	color:#fff;
}
.yamenu span {
display:block;margin:10px 10px 10px 50px;
}
.yamenu-sp div:first-child p{background:#000;}
.yamenu-sp div:nth-child(2) p{ background:#666; }
.yamenu-sp div:nth-child(3) p{ background:#999; }

.yamenu p:after{
    content:'';
    border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
    position: absolute;
	top: -50%;
	left: 100%;
	z-index: 1;
}
.yamenu-sp div:first-child p:after{border-left: 50px solid #000;}
.yamenu-sp div:nth-child(2) p:after{ border-left: 50px solid #666; }
.yamenu-sp div:nth-child(3) p:after{ border-left: 50px solid #999; }

五角形型 矢印メニュー

DEMO を見る
■ CSS

body{
text-align:center;background:#ddff99;
}
.wrap{
width:90%;margin:200px auto;
}
.yamenu-sp{
	display:block;
	width:100%;
	height:200px;
}
.yamenu{
	display:block;
	width:28%;
	height:200px;
	float:left;
	position:relative;
}
.yamenu p{
 	display:block;float: left;
	width:85%;height:100px;
	text-align: center;
	clip:rect(0px 500px 100px 0px);
	position:absolute;
	color:#fff;
}
.yamenu span {
display:block;margin:10px 10px 10px 50px;
}
.yamenu-sp div:first-child p{background:#000;}
.yamenu-sp div:nth-child(2) p{ background:#666; }
.yamenu-sp div:nth-child(3) p{ background:#999; }

.yamenu p:after{
    content:'';
    border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
    position: absolute;
	top: -50%;
	left: 100%;
	z-index: 1;
}
.yamenu-sp div:first-child p:after{border-left: 50px solid #000;}
.yamenu-sp div:nth-child(2) p:after{ border-left: 50px solid #666; }
.yamenu-sp div:nth-child(3) p:after{ border-left: 50px solid #999; }

関連記事

CSS 吹き出し

CSS 三角で吹き出しを作る

吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお

記事を読む

繰り返し背景を全面表示してアニメーションする

繰り返し背景を全面表示してアニメーションする

前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応して

記事を読む

Web フォント とは?

WEBフォントとは? 意図するフォントを表示する技術 Webブラウザは端末にインストールされ

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

CSS セレクタ

【CSS セレクタ】その2:擬似クラスセレクタやラジオボタンチェックでフォームの有効無効や枠の色変えたいとか

<今回のピックアップ項目> :link :visited :hover :active :t

記事を読む

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google

記事を読む

CSS セレクタ

【CSS セレクタ】その1:アスタリスクや属性セレクタとか

CSS3も浸透してきて、細かい所が危うくなってきたので、セレクタを中心に少しおさらいしようかと思いま

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関

記事を読む

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で大きさを指定する時、px や

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

CSS

Message

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

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202301
      Mon Tue Wed Thu Fri Sat Sun
      1
      2345678
      9101112131415
      16171819202122
      23242526272829
      3031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑