ハンバーガーメニューがステキなWebサイト 10選。｜Rex mag. / ラナエクストラクティブ
こんにちは、ラナエクストラクティブ（通称: Rex）広報のしまだです。 今回はRexメンバーに、「ハンバーガーメニューがステキだと思うWebサイト」（＋推しハンバーガー）を聞いてみました。 ハンバーガーメニューと言えば、Webサイトの横三本線のシンプルなナビゲーションメニューとしてお馴染みですが、今回改めて注目して見てみると、Webサイトのコンセプトにマッチしていたり、心くすぐる遊び心があったりと様々にステキな体験がありました。 ラインナップはこちら！ 1. PRESS BUTTER SAND CHOCOLATE COLLECTION 単なる三本線でなく一癖ある見た目が好きです。メニュー画面への遷移も素敵です。（デザイナー・S） 推し🍔：エッグチーズバーガー。たまごしか勝たん！ 2. ザ・レインホテル京都 公式サイト 「THE REIGN HOTEL」というホテルのサイト。名前にある「R
3D Restaurant Menu Concept | Codrops
A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items. Applying CSS 3D transforms to components can bring some more realism to normally flat web elements. We’ve experimented with some simple concepts for restaurant websites and came up with a 3D folded menu (a real menu, not a “web” menu). The result is a
InsertHTML
Hyperlinks are used to navigate between webpages. The hyperlinking of documents creates the web of texts which is the foundation of WorldWideWeb. The hyperlinks create a never-ending set of documents. We all know that Berners-Lee was the person who had the vision of creating a web of pages. SpringerLink discusses the importance of hyperlinks while mentioning how such a web…
A Sticky Menu Is Quicker To Navigate — Smashing Magazine
What is a sticky menu? Although sticky navigation can be applied to any menu, such as the footer or social media buttons, in this article, Hyrum Denney focuses on the main (or primary) navigation of a website. Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to
stickyMojo contained fixed position sticky sidebar jquery plugin
stickyMojo.jsFinally, a contained fixed positioned sticky sidebar jQuery plugin. Brought to you by Introduction stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE. Background After looking around for a contained fixed position s
折り畳まれたメニューを展開するように表示するiOSライブラリ·PaperFold for iOS MOONGIFT
PaperFold for iOSは地図やテーブルを折り畳まれたように表示できるiOS用ライブラリです。 iPhoneは画面の小さなデバイスなので、情報を効率よく並べないとごちゃごちゃになってしまいます。そこでメニューを隠したりするのですが、今回紹介するPaperFold for iOSもその一つになります。スライドさせると紙のように折り畳まれたメニューや地図が展開しながら表示される、そんな面白い効果のライブラリです。 デモアプリです。一見すると単なるテーブルですが… 横からずずっと情報が引き出せます。 引き出すとこんな感じ。二つの情報が表示できます。 地図を出すこともできます。まるでガイドマップのようです。 折り畳まれている情報を展開して閲覧するというのは直感的なUIと言えそうです。折り畳んでいる時には全くメニューが見えないので、その点はちょっと工夫が必要かも知れません（そもそも気付いて
Meny - A three dimensional and space efficient menu concept
A three dimensional and space efficient menu. Move your mouse towards the arrow — or swipe in from the arrow if you're on a touch device — to open. Test it with any page by appending a URL, like so: lab.hakim.se/meny/?u=http://hakim.se. Meny can be positioned on any side of the screen: top - right - bottom - left Instructions and download at github.com/hakimel/meny. The name, Meny, is swedish. Cre
CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方
こんにちは、鴨田です。 最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。 なので、最近はCSSだけでナビゲーションバーのデザインやコーディングを行うことが多いとは思いますが、知ってる人も知らない人もちょっとしたナビゲーションバーを作ってみましょう。 作るのは、横幅は特に設定しないレスポンシブデザインにも対応できるリキッドな6つの項目を持ったナビゲーションバーとします。ただし、スマートフォンを意識して、外側に320pxのラッパーを配置しておきます。 注意事項として、FirefoxとWebkit系ブラウザ(Google Chrome、Safariなど)でしかベンダープレフィックスをつけていないので、それ以外のブラウザで見ると、崩れます。
jQuery/CSS3でPath風メニューを·Pie Menu MOONGIFT
Pie MenuはPathのメニューに似たUIをjQueryで再現したライブラリです。 人気のあるiOSアプリのUIはすぐに真似したモックアップが登場します。Pathもその一つです。流れるようなUIはもちろん、赤いプラスボタンのメニューが人気です。Pie Menuはそんなメニュー表示をjQuery/CSS3で再現したライブラリです。 赤いボタンを押します。 アニメーションがあってメニューが表示されます。 パラメータを変更して表示をカスタマイズできます。 密着版。 デモ動画です。 デスクトップ版でPie Menuを採用したとしてもなかなか使い方が分からないかもしれませんが、PhoneGapと組み合わせると話が違ってきそうです。スマートフォン向けサイトで使ってみても面白いかもしれません。 Pie MenuはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライ
LinkedIn製。iOS向けのExpose風表示·LIExposeController MOONGIFT
LIExposeControllerはLinkedInが開発したExpose風の表示を行うiOSライブラリです。 LinkedInの提供しているiOSアプリの表示はちょっと変わっています。ビューはタイル状に並んでおり、タップして情報を切り替えます。そんなUIを提供してくれるのがLIExposeControllerです。 ビューが画面上でタイル状に表示されています。 ビューをタップすると全画面に表示されます。 ビューは自由に増やせます。 スワイプで移動できます。 iPadにも対応しています。 もちろん増減ができます。 デモ動画です。 LIExposeControllerはLinkedInのiOSでも使われている通り、多数の情報をまとめて見やすく表示するのに最適です。ビューは自由に追加、削除ができます。 LIExposeControllerはiOS向け、Apache License 2.0のオ
ddSlick - a jQuery plugin for custom drop down with images
Design with PC Subscribe to this blogStarter. Entrepreneur. Web Developer. Co founded Mr Right and Kaaryaa Labs. BlogHovercardddSlick Ever wanted a drop down with images? Well, You now have a plugin for that! A free light weight jQuery plugin that allows you to create a custom drop down with images and description. What is so cool about this plugin! Adds images and description to otherwise boring
mobily.pl - playground - MobilyBlocks
MobilyNotes MobilyNotes is lightweight (2KB) jQuery plugin that shows your html content in interesting way. More » MobilyBlocks jQuery plugin (2KB) that allows you to create an unordered list as an animated circle. More » MobilyMap Lightweight, fully configurable jQuery plugin that converts an simple image into a functional map. More »
Pretty Pie Menu Demo
PrettyPieMenu Right-Click on the bar, hold the button down and select icon. Press button Should work with Firefox and Chrome at least. Requires jQuery 1.4.x and jQueryUI 1.8.x Download Example: $(function() { $("#area").prettypiemenu({ buttons: [ "ui-icon-minus", "ui-icon-plus", "ui-icon-close" ], onSelection: function(item) { alert (item + ' was clicked!'); } }); $( "#testbtn" ).button({ icons:
21 Examples of Fixed Position Menus in Web Design
Inspiration 21 Examples of Fixed Position Menus in Web Design Gisele MullerFebruary 28, 201210 Comments05.5k A fixed position menu is that one that is fixed relative to the browser window, not only to the page, which means that if you scroll up and down the fixed menu will remain in the same position – so the user can quickly access the navigation no matter where they are in the site. For today’s
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
CSS3 Pricing Table for Your Website: A Guide
When it comes to creating a pricing table for your product or service, your primary goal as a web designer or developer is to make the table clear, intuitive, and visually appealing. This not only enhances the usability of the table but also helps users choose the most suitable pricing plan. In this article, we will tell you how to create an outstanding CSS3 pricing table with minimal HTML markup
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Clear the “Open With” menu in Mac OS X
Extremes jQuery plug-in
iOS-Like Dark Menu Bar for Mac OS X Lion
https://designindevelopment.com/css/apple-navigation-with-css3/