主に大規模サイトのグローバルナビゲーション向けのjQueryプラグインです。マウスオーバーやクリックでサブメニューを表示するものや第3階層以降への直接リンクが設置できるものなど使い勝手のいいものが揃っています。 Beautiful Slide Out Navigation
Slide one jQueryを使った横メニューです。 クリックをしなくても一定時間で次のタブに切り替わります。 時間の設定などはJavaScriptで変更できます。 タブの数も自由に変更できます。 Slide two 最初に表示するタブは以下のclassで指定します。 <ul class="slides-nav"> <li class="on"><a href="#slide-one">Slide one</a></li> <li><a href="#slide-two">Slide two</a></li> <li><a href="#slide-three">Slide three</a></li> </ul> Slide three slideshow.jsの上の方をいじるとタブの入れ替わり方を変更できます。 timeout: 300, // 自動でタブがかわる間隔 slideS
メニュー全体は「position: fixed;」で固定されているので下にスクロールしても同じ位置に表示され、オンマウスでアイコンがあらわれます。 少しだけ解説してみます どちらもソースは似ているので、今回は後で紹介した左側にメニューがある方で説明してみます。 緑の数字が最初に画面が表示されたときにアイコンが収まるまでの時間で、赤の数字がマウスを乗せたときにアイコンがあらわれるまでの時間です。数字が大きいほどゆっくりになります。 ちなみにjavascriptはjQueryと以下の分だけですので非常にシンプルです。 <script type="text/javascript"> $(function() { $('#navigation a').stop().animate({'marginLeft':'-85px'},1000); $('#navigation > li').hover(
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー(このブログは非表示にしてます)みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release a plugin that came from my personal need - Feature List. This jQuery plugin enables simple and easy creation of an interactive "Featured Items" widget. You can see the demo at this page, and you can download the complete source code with examples from here. What’s So Great About this Plugin? Slick
There’s something incredibly satisfying about breathing new life into old garments, and you should give it a shot if you’re looking for your next DIY project. In addition to being super fun, upcycling old... Anyone who's tried to photograph their pets knows how difficult it is. While the professionals make it look easy, capturing the perfect photo of cats and dogs is hard because they're unpredict
jQuery is one of the most powerful tools to enhance your navigation and make it stand out. With jQuery, you can bring together both the creative and usable. This article will cover 55 fresh and superb jQuery plugins that will make your menus look awesome. With the importance of navigation in mind, let’s start our journey trough our selection and hopefully you will find the one that will suit your
Design Your Way is a brand owned by SBC Design Net SRL Str. Caminului 30, Bl D3, Sc A Bucharest, Romania Registration number RO32743054 But you’ll also find us on Blvd. Ion Mihalache 15-17 at Mindspace Victoriei contact@designyourway.net Ever stumbled upon a website so breathtaking that it left you momentarily mesmerized? Welcome to the world of cool website design examples, an arena where creativ
Tutorials 11 Useful jQuery Tab Navigation Solutions Henry JonesSeptember 29, 201024 Comments08.2k Sometimes using tabs just makes a lot of sense. For instance, if you have a limited amount of screen real estate, tabs can allow you to save room by giving the user a way to toggle between several items in a small space. And to take your tabs a step further, you can throw jQuery into the mix for some
The quality and availability of WordPress e-commerce themes makes WordPress a serious choice as an online shop platform. In fact, WordPress has moved rapidly from being mainly a blogging platform and is now one of the top CMS systems for traditional websites. Lately,... Welcome to our Website Awards for best free WordPress themes. We are hosting this award to showcase the best websites to visit wh
Mega menus are often used on large sites that have a considerable number of pages for users to navigate. Rather than just using a dropdown, the mega menu opens offering more options. While mega menus can make it easier for users to get deeper into a site with fewer clicks, the vast number of links can also overwhelm some visitors. For this reason, great care should be taken when designing mega men
Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues. If page is long and provides different levels of navigation, will users be able to find their way thr
ちょっと使う予定が出来るかもなので メモ。サムネイル付きのメニューが マウスオーバーでサイドからスムー ズにスライドします。css3も使用して いますが、シャドウと角丸だけみたい ですね。 マークアップも簡単っぽいので備忘録としてエントリーします。 Related Posts and CSS3 サイドにサムネイル付きのバーが隠されていて、マウスを乗せることでコンテンツがスライドします。 マークアップは以下のような感じ。 <div id="rp_list" class="rp_list"> <ul> <li> <div> <img src="images/1.jpg" alt=""/> <span class="rp_title">Post Title</span> <span class="rp_links"> <a target="_blank" href="#">Article</a>
This domain name expired on 2022-03-20 03:27:27 Click here to renew it. Artatm.com Related Searches: Accident Lawyers Cheap Air Tickets Top 10 Luxury Cars Best Mortgage Rates Dental Plans Free Credit Report Designer Apparel Related Searches: Accident Lawyers Cheap Air Tickets Top 10 Luxury Cars Privacy Policy
次々にボックスがスライドする三つのアニメーションを組み合わたナビゲーションを実装するチュートリアルを紹介します。 Slide Down Box Menu with jQuery and CSS3 デモページ デモではナビゲーションの各項目をマウスホバーすると、アニメーションでラベルが下にストンと落ち、サムネイル画像が拡大表示されます。更に、下位階層のある項目は左右にスライド表示されます。 実装は割とシンプルです。 ナビゲーションはリスト要素で配置されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ul id="sdt_menu" class="sdt_menu"> <li> <a href="#"> <img src="images/1.jpg" alt=""/> <span class="sdt_act
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く