{"id":18114,"date":"2013-09-12T23:30:46","date_gmt":"2013-09-12T15:30:46","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18114"},"modified":"2025-04-04T01:37:21","modified_gmt":"2025-04-03T17:37:21","slug":"jquery-sliding-navigation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/","title":{"rendered":"Animating Content Visibility with jQuery: A Step-by-Step Tutorial"},"content":{"rendered":"

Over the past few years, I\u2019ve observed a wide variety of portfolio website layouts. The diversity of techniques available for such a staple interface element is vast. Even in larger design firms or agencies, many common UI aesthetics prevail. A prime example of innovative navigation is seen on Riot Industries<\/a>.<\/p>\n

In this tutorial, we\u2019ll explore how to create a similar sliding navigation interface using jQuery animation. These straightforward codes are adaptable to any fixed-layout website, offering a seamless blend of hidden and main content throughout the page.<\/p>\n

Our focus will be on leveraging jQuery animations, enhanced by jQuery UI<\/a> easing effects, to craft an engaging user experience. I\u2019ve prepared a live example featuring a navigation bar fixed to each corner of the webpage. Dive into my demos to discover how this interface could enhance your next design project.<\/p>\n

<\/i> See demo <\/span><\/a>\n<\/i> Download codes <\/span><\/a><\/p>\n

Starting Our First Project<\/h2>\n

Let\u2019s begin with crafting the left-hand navigation menu, using it as a foundation to build out further demos with similar code structures. I\u2019ll include both the jQuery and jQuery UI libraries from Google, complemented by a custom Google Webfont. All navigation-related scripts will be consolidated into a separate JavaScript file named nav-left.js<\/strong> for neatness and modularity.<\/p>\n

\r\n<!doctype html>\r\n<html lang=\"en-US\">\r\n<head>\r\n    <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\">\r\n    <title>Vertical Page Navigation Demo<\/title>\r\n    <meta name=\"author\" content=\"Jake Rocheleau\">\r\n    <link rel=\"shortcut icon\" href=\"https:\/\/www.hongkiat.com\/blog\/favicon.ico\">\r\n    <link rel=\"icon\" href=\"https:\/\/www.hongkiat.com\/blog\/favicon.ico\">\r\n    <link rel=\"stylesheet\" href=\"global.css\">\r\n    <link rel=\"stylesheet\" href=\"http:\/\/fonts.googleapis.com\/css?family=ABeeZee\">\r\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js\"><\/script>\r\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.0\/jquery-ui.min.js\"><\/script>\r\n    <script src=\"js\/nav-left.js\" charset=\"utf-8\"><\/script>\r\n<\/head>\r\n<\/pre>\n
This technique is especially effective because it allows for easy swapping of the JavaScript file to vary the sliding effect across different sections of the webpage. However, achieving this effect also relies on precise CSS configurations. The background content, intended to remain hidden, should be positioned behind the main content area, ensuring it starts out of view.<\/p>\n
\r\n<div id=\"about\">\r\n    <h2>Lorem Ipsum Dolor<\/h2>\r\n    ....\r\n<\/div>\r\n\r\n<div id=\"mainpage\">\r\n    <nav>\r\n        <h1>Webpage Title<\/h1>\r\n        <ul id=\"navigation\">\r\n            <li><a href=\"#\">Home<\/a><\/li>\r\n            <li><a href=\"#about\">Click Me<\/a><\/li>\r\n            <li><a href=\"#\" class=\"hovertrigger\">Hover Me<\/a><\/li>\r\n        <\/ul>\r\n    <\/nav>\r\n\r\n    <div id=\"content\">\r\n        <!-- Your main page content here -->\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\n
The layout is segmented into two primary divisions: the #about<\/strong> div for hidden content, which should be aptly named to reflect its contents, and the #mainpage<\/strong> div for everything immediately visible upon page load. Our demo showcases a simple layout with a floating navigation menu and a content division. This layout strategy is advantageous for efficiently utilizing available space and enabling content reorganization in a user-friendly manner. Additionally, it accommodates users by aggregating all content on a single page, catering to varying visitor interests.<\/p>\n
Crafting the Page Structure<\/h2>\n
With our foundational HTML in place, it\u2019s time to delve into the CSS stylesheet. Our design involves more than just the usual resets; we specifically position the two divs (main content and hidden content) relative to each other. The goal is to keep the main content div prominently above the hidden div, ensuring it remains visible within the confines of the browser window.<\/p>\n
\r\n#about { \r\n    display: block;\r\n    width: 350px;\r\n    padding: 8px 11px;\r\n    padding-top: 35px;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    height: 100%;\r\n}\r\n\r\n#mainpage {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    background: #473d47 url('https:\/\/assets.hongkiat.com\/uploads\/jquery-sliding-navigation\/bg.png');\r\n    min-height: 800px;\r\n    overflow: hidden;\r\n    position: relative;\r\n    z-index: 2;\r\n    color: #fff;\r\n}\r\n<\/pre>\n
The key to overlaying the hidden div directly onto the page, beneath the main content, is absolute positioning. This approach ensures the hidden div seamlessly integrates into the layout, moving beneath the main content area. The width is constrained to 350px, aligning with the navigation menu\u2019s expansion to reveal new content. Additionally, applying overflow: hidden;<\/code> to the main container prevents any excess content, such as box shadows, from extending beyond their intended boundaries.<\/p>\n
\r\n#mainpage nav { \r\n    position: absolute;\r\n    width: 180px; \r\n    min-height: 100%;\r\n    padding: 0px 8px;\r\n    padding-top: 220px;\r\n    background: #343638;\r\n}\r\n#mainpage nav h1 {\r\n    font-family: 'ABeeZee', 'Trebuchet MS', Arial, sans-serif;\r\n    font-size: 2.85em;\r\n    line-height: 1.3em;\r\n    font-weight: bold;\r\n    text-transform: uppercase;\r\n    margin-bottom: 11px;\r\n}\r\n\r\n#navigation { list-style: none; }\r\n#navigation li { display: block; margin-bottom: 2px; font-size: 1.4em; font-weight: bold; }\r\n#navigation li a { display: block; padding: 8px 6px; width: 100%; color: #d1e0f8; text-decoration: none; }\r\n#navigation li a:hover, #navigation li a.open { color: #fff; background: #484e57; }\r\n<\/pre>\n
For the navigation menu, we utilize a root <nav><\/code> element with an internal UL identified by #navigation<\/code>. This outer container defines the background, padding, and dimensions of the menu, aimed to be 180px wide and extend the full height of the webpage.<\/p>\n
Anchor links within are styled as block elements, facilitating a new line for each link and providing generous padding for easier interaction. The specifics of these navigation styles are detailed further in the document, employing absolute positioning to strategically place the navigation menu.<\/p>\n
Exploring jQuery Animations<\/h2>\n
For those new to JavaScript, the upcoming code might seem complex. However, the jQuery documentation offers comprehensive explanations of the logic checks and animation functions employed. For clarity, we\u2019ll dissect the code into segments for individual actions.<\/p>\n
\r\n$(\"#navigation li a\").on(\"click\", function(e){\r\n    e.preventDefault();\r\n    var hrefval = $(this).attr(\"href\");\r\n    \r\n    if(hrefval == \"#about\") {\r\n        var distance = $('#mainpage').css('left');\r\n        \r\n        if(distance == \"auto\" || distance == \"0px\") {\r\n            $(this).addClass(\"open\");\r\n            openSidepage();\r\n        } else {\r\n            closeSidepage();\r\n        }\r\n    }\r\n}); \/\/ end click event handler\r\n<\/pre>\n
This initial code segment attaches a click event handler to navigation links, preventing default href loading to instead evaluate the clicked link. If the href corresponds to #about<\/code>, it triggers an assessment of the current CSS \u201cleft\u201d position of #mainpage<\/code>. An \u201cauto\u201d or \u201c0px\u201d value indicates a closed navigation, prompting it to open, while any greater value suggests it\u2019s already open, necessitating closure. The openSidepage()<\/code> and closeSidepage()<\/code> functions manage these states.<\/p>\n
\r\nfunction openSidepage() {\r\n    $('#mainpage').animate({\r\n        left: '350px'\r\n    }, 400, 'easeOutBack'); \r\n}\r\n\r\nfunction closeSidepage(){\r\n    $(\"#navigation li a\").removeClass(\"open\");\r\n    $('#mainpage').animate({\r\n        left: '0px'\r\n    }, 400, 'easeOutQuint'); \r\n}\r\n<\/pre>\n
These defined functions streamline future scripting by negating the need for redundant code replication for similar effects. Notably, the animations utilize distinct easing functions, showcasing jQuery UI\u2019s potential to enhance the customization of page animations.<\/p>\n
Activating Menu on Hover<\/h2>\n
The following jQuery snippets address user interactions with the \u201chover\u201d link and the \u201cclose\u201d button, applying the same functions previously outlined. First, we examine the hover effect implementation:<\/p>\n
\r\n$(\"#navigation li a\").on(\"hover\", function(){\r\n    var classval = $(this).hasClass(\"hovertrigger\");\r\n    \r\n    if(classval == true) {\r\n        var distance = $('#mainpage').css('left');\r\n        \r\n        if(distance == \"auto\" || distance == \"0px\") {\r\n            $(this).addClass(\"open\");\r\n            openSidepage();\r\n        }\r\n    }\r\n}); \/\/ end hover event handler\r\n<\/pre>\n
This code scrutinizes each navigation link for hover events, specifically identifying those with the .hovertrigger<\/code> class to unveil the menu, without closing it \u2013 a function reserved for the close button. This ensures users have multiple, intuitive ways to interact with the navigation.<\/p>\n
\r\n$(\"#closebtn\").on(\"click\", function(e){\r\n    e.preventDefault();\r\n    closeSidepage();\r\n}); \/\/ end close button event handler\r\n<\/pre>\n
The repetition in these scripts underscores their importance for a flexible layout, accommodating various user interactions. In the nav-right.js<\/strong> file, similar logic applies, albeit adjusted for the navigation\u2019s position on the right side, by checking the CSS right value.<\/p>\n
\"jQuery<\/figure>\n
My additional demos showcase navigation bars positioned on the right or top of the screen, with a fixed bottom navigation that scrolls with the page. This adds a pleasant effect, given sufficient bottom padding to prevent content cutoff. Download my source code for further exploration and customization.<\/p>\n
<\/i>  See demo <\/span><\/a>\n<\/i>  Download codes <\/span><\/a><\/p>\n
Concluding Remarks<\/h2>\n
For developers new to jQuery, the variety and complexity of these functions might seem daunting. Yet, they are straightforward and require minimal time to master. Beyond the sliding effects, this vertical navigation design offers a robust foundation for creative layouts.<\/p>\n
I hope this tutorial serves as a valuable resource for designers and web developers. The codes are compatible with all modern, standards-compliant browsers and ready for download and customization. We also welcome your feedback and discussions on this tutorial.<\/p>","protected":false},"excerpt":{"rendered":"
Over the past few years, I\u2019ve observed a wide variety of portfolio website layouts. The diversity of techniques available for such a staple interface element is vast. Even in larger design firms or agencies, many common UI aesthetics prevail. A prime example of innovative navigation is seen on Riot Industries. In this tutorial, we\u2019ll explore…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,3395,352],"tags":[4102,911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nAnimating Content Visibility with jQuery: A Step-by-Step Tutorial - Hongkiat<\/title>\n<meta name=\"description\" content=\"Over the past few years, I've observed a wide variety of portfolio website layouts. The diversity of techniques available for such a staple interface\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animating Content Visibility with jQuery: A Step-by-Step Tutorial\" \/>\n<meta property=\"og:description\" content=\"Over the past few years, I've observed a wide variety of portfolio website layouts. The diversity of techniques available for such a staple interface\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-09-12T15:30:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:37:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-sliding-navigation\/jquery-nav-slider-top-right.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Animating Content Visibility with jQuery: A Step-by-Step Tutorial\",\"datePublished\":\"2013-09-12T15:30:46+00:00\",\"dateModified\":\"2025-04-03T17:37:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/\"},\"wordCount\":1061,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-sliding-navigation\\\/jquery-nav-slider-top-right.jpg\",\"keywords\":[\"Interface Design\",\"jQuery\"],\"articleSection\":[\"Coding\",\"UI\\\/UX\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/\",\"name\":\"Animating Content Visibility with jQuery: A Step-by-Step Tutorial - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-sliding-navigation\\\/jquery-nav-slider-top-right.jpg\",\"datePublished\":\"2013-09-12T15:30:46+00:00\",\"dateModified\":\"2025-04-03T17:37:21+00:00\",\"description\":\"Over the past few years, I've observed a wide variety of portfolio website layouts. The diversity of techniques available for such a staple interface\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-sliding-navigation\\\/jquery-nav-slider-top-right.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-sliding-navigation\\\/jquery-nav-slider-top-right.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-sliding-navigation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animating Content Visibility with jQuery: A Step-by-Step Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Animating Content Visibility with jQuery: A Step-by-Step Tutorial - Hongkiat","description":"Over the past few years, I've observed a wide variety of portfolio website layouts. The diversity of techniques available for such a staple interface","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/","og_locale":"en_US","og_type":"article","og_title":"Animating Content Visibility with jQuery: A Step-by-Step Tutorial","og_description":"Over the past few years, I've observed a wide variety of portfolio website layouts. The diversity of techniques available for such a staple interface","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-09-12T15:30:46+00:00","article_modified_time":"2025-04-03T17:37:21+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-sliding-navigation\/jquery-nav-slider-top-right.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Animating Content Visibility with jQuery: A Step-by-Step Tutorial","datePublished":"2013-09-12T15:30:46+00:00","dateModified":"2025-04-03T17:37:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/"},"wordCount":1061,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-sliding-navigation\/jquery-nav-slider-top-right.jpg","keywords":["Interface Design","jQuery"],"articleSection":["Coding","UI\/UX","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/","name":"Animating Content Visibility with jQuery: A Step-by-Step Tutorial - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-sliding-navigation\/jquery-nav-slider-top-right.jpg","datePublished":"2013-09-12T15:30:46+00:00","dateModified":"2025-04-03T17:37:21+00:00","description":"Over the past few years, I've observed a wide variety of portfolio website layouts. The diversity of techniques available for such a staple interface","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-sliding-navigation\/jquery-nav-slider-top-right.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-sliding-navigation\/jquery-nav-slider-top-right.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-sliding-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Animating Content Visibility with jQuery: A Step-by-Step Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Ia","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18114"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18114\/revisions"}],"predecessor-version":[{"id":73625,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18114\/revisions\/73625"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18114"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}