https://b.hatena.ne.jp/kzms2/navigation/ navigationに関するkzms2のはてなブックマーク (6) https://lab.hakim.se/meny/ 3D表現をCSS3アニメーションを用いたナビゲーション。奥行き・・・！ kzms2 2012-08-07T00:56:45Z UI css3 navigation <blockquote cite="https://lab.hakim.se/meny/" title="Meny - A three dimensional and space efficient menu concept"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flab.hakim.se%2Fmeny%2F" alt="" /> <a href="https://lab.hakim.se/meny/">Meny - A three dimensional and space efficient menu concept</a></cite><p><a href="https://lab.hakim.se/meny/"><img src="" alt="Meny - A three dimensional and space efficient menu concept" title="Meny - A three dimensional and space efficient menu concept" class="entry-image" /></a></p><p>A three dimensional and space efficient menu. Move your mouse towards the arrow — or swipe in from the arrow if you&#39;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 - righ...</p><p><a href="https://b.hatena.ne.jp/entry/s/lab.hakim.se/meny/"><img src="https://b.hatena.ne.jp/entry/image/https://lab.hakim.se/meny/" alt="はてなブックマーク - Meny - A three dimensional and space efficient menu concept" title="はてなブックマーク - Meny - A three dimensional and space efficient menu concept" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/lab.hakim.se/meny/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 47 http://vandelaydesign.com/blog/galleries/nav-menus/ デザインやUIの参考になりそうなナビゲーションメニュー35選。色々な形がありますねぇ kzms2 2012-05-09T05:14:01Z navigation webdesign visual inspiration <blockquote cite="http://vandelaydesign.com/blog/galleries/nav-menus/" title="40 Beautifully-Designed Navigation Menus | Vandelay Design Blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fvandelaydesign.com%2Fblog%2Fgalleries%2Fnav-menus%2F" alt="" /> <a href="http://vandelaydesign.com/blog/galleries/nav-menus/">40 Beautifully-Designed Navigation Menus | Vandelay Design Blog</a></cite><p><a href="http://vandelaydesign.com/blog/galleries/nav-menus/"><img src="" alt="40 Beautifully-Designed Navigation Menus | Vandelay Design Blog" title="40 Beautifully-Designed Navigation Menus | Vandelay Design Blog" class="entry-image" /></a></p><p>If you’ve seen one AI-generated website mockup, you’ve seen a hundred. The same purple gradients. The same sans-serif hero headlines. The same three-column feature sections with the same rounded corner icons. Scroll through Dribbble or Behance lately, and you’ll notice an unsettling homogeneity c...</p><p><a href="https://b.hatena.ne.jp/entry/vandelaydesign.com/blog/galleries/nav-menus/"><img src="https://b.hatena.ne.jp/entry/image/http://vandelaydesign.com/blog/galleries/nav-menus/" alt="はてなブックマーク - 40 Beautifully-Designed Navigation Menus | Vandelay Design Blog" title="はてなブックマーク - 40 Beautifully-Designed Navigation Menus | Vandelay Design Blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/vandelaydesign.com/blog/galleries/nav-menus/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 20 https://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/ CSS3を用いたアニメーションするナビの説明とサンプル3個。 kzms2 2012-01-24T15:26:19Z css3 navigation <blockquote cite="https://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/" title="How to spice up your menu with CSS3 | Codrops"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftympanus.net%2Fcodrops%2F2012%2F01%2F22%2Fhow-to-spice-up-your-menu-with-css3%2F" alt="" /> <a href="https://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/">How to spice up your menu with CSS3 | Codrops</a></cite><p><a href="https://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/757374f38bd6d6033cc83372173c132b0524093b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcodrops-1f606.kxcdn.com%2Fcodrops%2Fwp-content%2Fuploads%2F2012%2F01%2FCSS3MenuHoverEffect.jpg%3Fx42294" alt="How to spice up your menu with CSS3 | Codrops" title="How to spice up your menu with CSS3 | Codrops" class="entry-image" /></a></p><p>Quick tip on how to spice up your menu with CSS3: add an image to every menu item and slide it out on hover. In this new category called “Tips and Tricks” we will introduce some quick and interesting methods around web development and web design. In today’s tip we’ll show you how to spice up your...</p><p><a href="https://b.hatena.ne.jp/entry/s/tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/"><img src="https://b.hatena.ne.jp/entry/image/https://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/" alt="はてなブックマーク - How to spice up your menu with CSS3 | Codrops" title="はてなブックマーク - How to spice up your menu with CSS3 | Codrops" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 12 http://www.wokay.com/technology/15-classy-examples-of-navigation-web-design-58884.html 上品なナビゲーション例15個。ウェブデザインの参考に kzms2 2012-01-12T06:35:43Z navigation webdesign <blockquote cite="http://www.wokay.com/technology/15-classy-examples-of-navigation-web-design-58884.html" title="HugeDomains.com"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.wokay.com%2Ftechnology%2F15-classy-examples-of-navigation-web-design-58884.html" alt="" /> <a href="http://www.wokay.com/technology/15-classy-examples-of-navigation-web-design-58884.html">HugeDomains.com</a></cite><p><a href="http://www.wokay.com/technology/15-classy-examples-of-navigation-web-design-58884.html"><img src="" alt="HugeDomains.com" title="HugeDomains.com" class="entry-image" /></a></p><p>Captcha security check wokay.com is for sale Please prove you&#39;re not a robot View Price Processing</p><p><a href="https://b.hatena.ne.jp/entry/www.wokay.com/technology/15-classy-examples-of-navigation-web-design-58884.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.wokay.com/technology/15-classy-examples-of-navigation-web-design-58884.html" alt="はてなブックマーク - HugeDomains.com" title="はてなブックマーク - HugeDomains.com" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.wokay.com/technology/15-classy-examples-of-navigation-web-design-58884.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5 https://designbeep.com/2012/01/04/50-great-examples-of-websites-using-fixed-position-navigation-menu/ Fixed Positionを用いたナビゲーションを用いたステキサイト50。スクロールにあわせてアクティブリンクが変化するのとか良いですね kzms2 2012-01-06T01:33:45Z webdesign development navigation <blockquote cite="https://designbeep.com/2012/01/04/50-great-examples-of-websites-using-fixed-position-navigation-menu/" title="50 Great Examples of Websites Using Fixed Position Navigation Menu - Designbeep"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdesignbeep.com%2F2012%2F01%2F04%2F50-great-examples-of-websites-using-fixed-position-navigation-menu%2F" alt="" /> <a href="https://designbeep.com/2012/01/04/50-great-examples-of-websites-using-fixed-position-navigation-menu/">50 Great Examples of Websites Using Fixed Position Navigation Menu - Designbeep</a></cite><p><a href="https://designbeep.com/2012/01/04/50-great-examples-of-websites-using-fixed-position-navigation-menu/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5e24887361f3aeabe09805651feccb178455ad80/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fdesignbeep.com%2Fwp-content%2Fuploads%2F2012%2F01%2F1.fixed-navigation-websites.jpg" alt="50 Great Examples of Websites Using Fixed Position Navigation Menu - Designbeep" title="50 Great Examples of Websites Using Fixed Position Navigation Menu - Designbeep" class="entry-image" /></a></p><p>INSPIRATIONS 50 Great Examples of Websites Using Fixed Position Navigation Menu By Designbeep Staff January 4, 2012 There are many important elements to be considered when creating a website and easy or effective navigation is one of the most important qualities of a great website A visitor shoul...</p><p><a href="https://b.hatena.ne.jp/entry/s/designbeep.com/2012/01/04/50-great-examples-of-websites-using-fixed-position-navigation-menu/"><img src="https://b.hatena.ne.jp/entry/image/https://designbeep.com/2012/01/04/50-great-examples-of-websites-using-fixed-position-navigation-menu/" alt="はてなブックマーク - 50 Great Examples of Websites Using Fixed Position Navigation Menu - Designbeep" title="はてなブックマーク - 50 Great Examples of Websites Using Fixed Position Navigation Menu - Designbeep" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/designbeep.com/2012/01/04/50-great-examples-of-websites-using-fixed-position-navigation-menu/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 8 http://www.1stwebdesigner.com/tutorials/css-menu-button-tutorials/ CSSで作られたメニューのチュートリアルやサンプル55個。たくさんあるので英語ですがお勉強によさそうですよ。 kzms2 2010-07-07T06:46:03Z tw css tutorial navigation howto <blockquote cite="http://www.1stwebdesigner.com/tutorials/css-menu-button-tutorials/" title="150 Amazing Examples of CSS Animation &amp; Effects"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.1stwebdesigner.com%2Ftutorials%2Fcss-menu-button-tutorials%2F" alt="" /> <a href="http://www.1stwebdesigner.com/tutorials/css-menu-button-tutorials/">150 Amazing Examples of CSS Animation &amp; Effects</a></cite><p><a href="http://www.1stwebdesigner.com/tutorials/css-menu-button-tutorials/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ef22ff11a8ee84d9ac0d648a0adf17a1b5395a7b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2F1stwebdesigner.com%2Fwp-content%2Fuploads%2F2016%2F10%2Fcss-effects.jpg" alt="150 Amazing Examples of CSS Animation &amp; Effects" title="150 Amazing Examples of CSS Animation &amp; Effects" class="entry-image" /></a></p><p>We have put together a smart collection of cool CSS effects to help you learn the nitty-gritty details so that you can use it to create more beautiful web sites. Enjoy! Unlimited Downloads: 500,000+ Fonts, Stock Photos, Themes &amp; Design Assets DOWNLOAD NOW 1. Swatch Book Tutorial with CSS3 &amp; jQuer...</p><p><a href="https://b.hatena.ne.jp/entry/www.1stwebdesigner.com/tutorials/css-menu-button-tutorials/"><img src="https://b.hatena.ne.jp/entry/image/http://www.1stwebdesigner.com/tutorials/css-menu-button-tutorials/" alt="はてなブックマーク - 150 Amazing Examples of CSS Animation &amp; Effects" title="はてなブックマーク - 150 Amazing Examples of CSS Animation &amp; Effects" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.1stwebdesigner.com/tutorials/css-menu-button-tutorials/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 33