質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1688閲覧

CSS : NewsPicks の様にコンテンツスライド時にメニューもスライドさせたい

tk_matsumoto

総合スコア17

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/06 01:46

こんにちは! CSS または、Javascript についての質問です!

スマホ最適化されたウェブサイトを作っており、スライダーの実装を行なっております。
コンテンツをスライドした際に上に表示しているメニューも横にスライドする方法を探しています。NewsPicks (以下画像参考) というアプリを参考にしていて、もし CSS Javascript で達成方法をご存知の方いらっしゃいましたら、ご回答よろしくお願いします!

この様な感じで下のコンテンツ (ニュース) を横にスライドした際に、上に表示されているメニュー (Business Market) も横にスライドされ、白枠が移動するイメージです。

イメージ説明
イメージ説明

イメージ説明

なんとなくの方向性として、css の transform を使うのかなって思っているのですが、それ以上がわからず、、方向性だけでも良いので教えていただけると嬉しいです。
現状、スライダーの実装自体はできているので、それに対して、メニューバーが動く実装を付け足そうと思っている感じです。

よろしくお願いします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuki84web

2017/05/06 02:54

まず、そのサイトのソースを見て調べてみる事はしましたか
tk_matsumoto

2017/05/06 03:14

ネイティブアプリなのでソースコードを見る事ができず。同じ様な動きを css と javascript で達成できないか模索しています。
guest

回答2

0

ベストアンサー

位置関係(+幅)がわかっていればCSSでこういうこともできます。スクロール処理や幅の取得を JavaScriptで行えばそれっぽくできそうです。

HTML

1<div class="wrap"> 2 <ul> 3 <li class="a">aaa</li> 4 <li class="b">bbbbbb</li> 5 <li class="c">ccc</li> 6 <li class="d">dddddd</li> 7 <li class="e">eee</li> 8 </ul> 9</div>

CSS

1.wrap { 2 position: relative; 3} 4ul { 5 list-style: none; 6 display: flex; 7 margin: 0; 8 padding: 0; 9 width: 30em; 10} 11li { 12 display: block; 13 flex-grow: 1; 14 text-align: center; 15} 16.e::after { 17 content: ''; 18 display: block; 19 position: absolute; 20 width: 2.5em; 21 bottom: -.2em; 22 top: -.2em; 23 left: -3em; 24 background-color: #fff; 25 border-radius: .5em; 26 z-index: -1; 27 transition: all .5s ease-in-out 0s; 28} 29.a:hover ~ .e::after, 30.c:hover ~ .e::after, 31.e:hover::after { width: 2.5em; } 32.b:hover ~ .e::after, 33.d:hover ~ .e::after { width: 3.8em; } 34.a:hover ~ .e::after { left: 1.3em; } 35.b:hover ~ .e::after { left: 6.9em; } 36.c:hover ~ .e::after { left: 13.6em; } 37.d:hover ~ .e::after { left: 19.2em; } 38.e:hover::after { left: 26.0em; } 39```**動くサンプル:**[https://jsfiddle.net/3pfnushL/2/](https://jsfiddle.net/3pfnushL/2/)

投稿2017/05/06 16:03

編集2017/05/06 16:05
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tk_matsumoto

2017/05/08 11:56

ありがとうございます!参考にさせていただいてなんとか実装することができました!
guest

0

NewsPicksにアクセスしてもそういった表示のページにならないのですが、それってもしかしてネイティブアプリの画面なんじゃ……?

ソースがないので感覚で答えますが、スライダーの実装部分にメニュー部分のアニメーションさせるコードを書けばいいんじゃないかと思います。具体的には CSS transition で left をコントロールして、javascriptからclassをコントロールすればいいんじゃないかな、と思います。
CSS transition の使用 - CSS | MDN

ただ、アプリのようにきれいに同期してスライドさせるのはそこそこ大変ではないかと。

投稿2017/05/06 02:54

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tk_matsumoto

2017/05/06 03:13

Lhankor_Mhy さん ご回答ありがとうございます! > それってもしかしてネイティブアプリの画面なんじゃ そうです!CSS と Javascript で同じ様な事ができないか模索している感じです! > 具体的には CSS transition で left をコントロールして、javascriptからclassをコントロールすればいいんじゃないかな 了解しました!引き続き調べつつ実装を行なってみますー!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問