1stwebdesigner

---

• The Listed Voyage: 30 Free jQuery Navigation Menus
• The Zen of Relational Database: Learn the Basics Here!
• Image Caption Animation with CSS3 Transform and Transitions

The Listed Voyage: 30 Free jQuery Navigation Menus Posted: 01 Sep 2014 06:00 AM PDT Nowadays, jQuery navigation menus are more than just plain texts with links on it. In a previous tutorial, I presented to you how you can create a navigation menu with jQuery and CSS3, which is a cool way to display your menus on your site. With the power of jQuery, it can turn the navigation of a website into a dynamic menu. Although CSS3 can now be used to create dynamic navigation, still, jQuery adds more functionality on the menus. Aside from the dynamic functionalities, the design must also be considered. This is simply because your visitors would probably see it for the first time they visit your site. It will definitely provide a bad UI experience if not well presented. Having a great design will add more value to your site thus adding better user experience. Today, I present to you 30 of the good jQuery navigation menu examples that you can check on and be inspired with. 1. Pushy Pushy is a responsive off-canvas navigation menu using CSS transforms and transitions. It has a smooth performance on mobile devices. Be sure to check out the demo, you definitely will like it. Demo | Download 2. Slinky This is another great jQuery for creating beautiful scrolling navigation lists with stacking headers It has a smooth scrolling with low file size. Demo | Download 3. jQuery Pop Menu This is a simple responsive popup menu yet cool features. When you click on the menu icon, it will pop-up the menu with icons. Check out the demo. Demo | Download 4. Slidebars Slidebars is a jQuery framework for quickly and easily implementing app style off-canvas space into your website. Slidebars also handles orientation changes and resizes flawlessly. Demo | Download 5. jQuery Square Menu A jQuery menu that displays a square-like menu animation for website using jQuery and CSS3. Make sure to check out the demo. Demo | Download 6. Perspective Page View Navigation This jQuery navigation will transforms the page to 3D to reveal a menu. The idea was that of mobile app design wherein you click on the menu and then it will flip the other side of the page. Demo | Download 7. SlickNav A responsive mobile menu plugin for jQuery with multi-level menu support and a flexible but simple markup. It supports cross-browser compatibility. It can be accessed by pressing the keyboards. Demo | Download 8. Mmenu A jQuery menu for app look-alike on- and off-canvas menus with sliding sub-menus for your website and web apps. It is very customizable through a wide range of options, extensions and add-ons. Demo | Download 9. Sidr A jQuery plugin for creating side menus and the easiest way for doing your menu responsive. With Sidr, you will be able to create multiple sides of your website and responsive menus. Demo | Download 10. slimMenu slimMenu is a lightweight jQuery plugin, which makes it easier to create responsive and multi-level navigation menus on your site. What is great about this menu is that it has multiple menu on the same page and it is 100% mobile responsive menu. Don’t miss the demo below. Demo | Download 11. HorizontalNav A jQuery navigation that spans a horizontal navigation to fit the full width of it’s container. This plugin makes it easy and adds support for IE7. Demo | Download 12. FlexNav This is a mobile-first example of using media queries and JavaScript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility. Demo | Download 13. jQuery Menu-Aim A jQuery menu that triggers events when user’s cursor aims at particular drop-down menu items. This is perfect for making responsive mega dropdowns like Amazon’s. Demo | Download 14. SmartMenus A jQuery website menu plugin that offers simple and neat display of navigation. It is responsive and accessible list-based website menus. It works on all devices too! Demo | Download 15. Shifter Shifter is an easy-to-use and mobile-first jQuery plugin for creating a slide menu which slides out from the right side of the page when clicking or tapping the toggle button. The plugin has only just a simple maxWidth option. This allows to set resolutions/dimensions the mobile navigation will appear on the web page. Demo | Download 16. Hamburger Hamburger is a jQuery navigation for creating an Android App-style sliding menu that displays a fly-out navigation on the left edge of the screen. As the sliding menu expands, it overlays the main content but not the action bar. Demo | Download 17. Focucss Focucss is a jQuery navigation to create an off-canvas sidebar navigation with a cool blurring effect that will focus your users on your sidebar content, and blurring useless content. Demo | Download 18. Drawer Drawer is a jQuery navigation for creating a responsive, touch-enabled and animated side menu that slides out from the edge of the screen when clicking or touching the trigger. This feature can also be seen on Android applications. Demo | Download 19. Datmenu Datmenu is a premium jQuery Responsive Menu with multiple CSS3 animations. What is great with this plugin is that it is fully customizable from js options. Demo | Download 20. jPanelMenu jPanelMenu is a clean and modern jQuery menu that helps create a paneled-style navigation with CSS3 transitions animations for your web application or website. jPanelMenu is inspired by the mobile versions of Facebook and Google. It has been used in a wide variety of mobile applications. Demo | Download 21. Fly Side Menu Fly Side Menu is a cool menu plugin that makes use of CSS3 to create a side menu navigation with 3D transforms and transitions. Demo | Download 22. PageScroll jQuery Menu Plugin PageScroll is a customizable mobile-ready jQuery menu, recommended for any website, best for landing pages. Demo | Download 23. DD Icon Menu DD Icon Menu is a jQuery plugin which allows you to create a icon-based vertical & sticky menu panel at the edge of the screen that will slide out sub-menus on hover-over. Demo | Download 24. JQuery Mobile Date Navigation A jQuery navigation menu which provides navigation between date range, by a defined range (week, month and year). Ideal for querying information accurately by AJAX calls. Demo | Download 25. Navobile A jQuery Navigation menu plugin that makes mobile navigation easy. It uses CSS to apply CSS translations to fix the position of the navigation on mobile devices. Demo | Download 26. Multi-Level Push Menu Multi-Level Push Menu is a Javascript library created by MARY LOU of Codrops. This creates a multi-level push menus which will slide out from the left side of the page by pushing the website content to the right. Demo | Download 27. Box Lid Box Lid is an easy-to-use jQuery plugin that enables you to create a side navigation menu with 3D ‘Box Lid’ effects by using CSS3 transitions and transforms. Demo | Download 28. JQuery Mobile Slide Menu A sliding jQuery menu that has similar looks to Facebook and Path's approach to menu design on mobile. Demo | Download 29. scrollNav scrollNav is a jQuery plugin that displays the existing content on a web page, divides it up into logical sections and builds a customizable scrolling sidebar navigation. Demo | Download 30. DoubleTapToGo DoubleTapToGo is a jQuery plugin that helps you create usable multi-level dropdowns which are touch-friendly and responsive. Demo | Download Conclusion There you have it! All of these jQuery menu plugins and tutorials provide cool and neat look on your menu. You can use it on your projects to impress your clients. If you know some other jQuery menu, feel free to share it on the comment section.

The Zen of Relational Database: Learn the Basics Here! Posted: 01 Sep 2014 05:00 AM PDT Databases have been a staple topic on every digital business. Thus organizing the tables and fields is necessary. The concept of Relational Database was born way back in 1969 when Edgar F. Codd, a researcher from IBM, wrote the process of outlining a database. From there, the this concept has spread on every computing-involved business and task. According to Wikipedia,   A relational database is a database that has a collection of tables of data items, all of which is formally described and organized according to the relational models. This means that using the relational model, each table arrangement must be identify a column or group of columns to distinctly identify each row also called as primary key. Using a foreign key, it can be used to establish a connection between each row in the table and a row from another table. To properly organize a database, it involves database normalization. This is the process of organizing the tables and fields of this kind of database to minimize redundancy of information. That being said, using definitions and terms alone won’t make you understand this topic. In this article, you're going to learn how you can properly structure this specific database. You are going to look on two fictional tables and start working on it. The Data For the data, below, the base table includes two tables: Student table and Class table. This database maintains data about the Student's information and Class information. Each student will have a unique Student ID (which may consist of letters and numbers) but may have similar name, operating system, class and instructor. One instructor may teach more than one class. The Student table will have the following fields: Student ID Student Name Operating System The Class table will have the following fields: Class ID Class Name Instructor Now to expand the data, below presented are the Student table and Class table. Identifying the data objects and relationships between tables Now using the given data, you need to identify the data objects and relationship that need to be maintained in the database. Looking at the Student and Class tables, you can conclude that the data objects are Student and Class. The relationship is that one student can have one or more classes. Identifying Relevant Attributes: Primary Key and Foreign Key Now that data object and relationships between the two tables have been defined, specify the relevant attributes between the two. If you are going to check the two tables, you need to find the unique column for each table. Notice that you have only 1 row on each table that contains some unique data. For the Student table, you have the Student ID while, in the Class table, you have the Class ID. These two rows are called the Primary Key. The primary key of a relational table uniquely identifies each record in the table. Next, for the relationship, you need to determine its attribute(s) and identify its Foreign key. The foreign key matches the primary key column of another table. The foreign key is used to cross-reference tables. In this case, you will use Enrollment as our new field to connect the two foreign keys: Enrollment (Student ID) attribute is a foreign key referencing the Student (Student ID) attribute from the Student table. Enrollment (Class ID) attribute is a foreign key referencing the Class (Class ID) key attribute from the Class table. Using Relational Tables Now that you have identified your primary key and foreign key, you need to create a relational table to represent the data objects and relationships with their attributes and constraints. See table below: The foreign key Student ID in the Enrollment table references the primary key Student ID in the Student table. The foreign key Class ID in the Enrollment table references the primary key Class ID in the Class table. In the table above, you created a new row called Enrollment ID to relate both Student ID and Class ID, which is also define the foreign keys. Conclusion That’s really it! That is how you to create a database of this kind. When creating such databases, you can define the domain of possible values in a data column and further constraints that may apply to that data value. It also requires the normalization process to remove the redundant data and connect all of the tables into one table. In this article, you learned something about the concept of such database and how to design one; so, how do you implement one? If using Relational Database Management Systems (RDBMS) software is your answer,  you are correct! But I won’t be discussing the process in this article. I will create another article for that soon. Hope you learned something from this article and let me know about your thoughts on the comment section.

Image Caption Animation with CSS3 Transform and Transitions Posted: 01 Sep 2014 04:00 AM PDT jQuery caption hover effects have been on the Web for a long time. There are plenty of jQuery libraries out there that can be used to obtain a cool and amazing image caption animation and hover effects. That being said, it is now possible to do the same cool effects with CSS3 transitions and transform properties. Today I want to show you how you can create cool animation hover effects with CSS3 animation. The images used in the demos were illustrated by Rudolph Musngi. Demo Resources You Need to Complete This Tutorial Any image Basic knowledge about CSS3 animations Time and patience The Markup With HTML5, you can now semantically wrap your images and captions using the figure and figcaption elements. For all the examples, use the same HTML markup. Wrap the images and figcaption contents with a figure element. <figure> <img alt="nerd girl" src="img/img3.jpg"> <figcaption> <h3>I love this title!</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a href="#">Read More</a></p> </figcaption> </figure> The CSS for Demo 1 For the CSS, the figure element will have a relative positioning. In this case, the captions and the images inside can be stacked over each other via absolute positioning. Then, we will put some basic styles on each element. Notice that transform property – rotate on and transition property of the figcaption style are used. This will give a nice rotation and smooth effect for the caption. Some of the elements like H3 and paragraph tags will have a transition-delay property so that there will be a delay on the entrance of each elements for the caption. img { width: 100%; } figure { margin: 0; padding: 0; height: 300px; position: relative; display: block; cursor: pointer; overflow: hidden; border: 3px solid #fff; } figure:hover figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); top: 0; } figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); opacity: 0; position: absolute; height: 100%; width: 100%; top: -100%; background: rgba(0,0,0,.5); color: #fff; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; -ms-transition-delay: .5s; transition-delay: .5s; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } figcaption h3 { font-family: 'Open sans'; font-weight: 400; color: #f3b204; padding: 10px 20px; margin-bottom: 0; position: relative; left: 100%; margin-top: 37px; font-size: 30px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s; } figcaption p { font-family: 'Open sans'; padding: 10px 20px; margin-bottom: 0; margin-top: 20px; position: relative; left: 100%; font-size: 13px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s; -webkit-transition-delay: 1.3s; -moz-transition-delay: 1.3s; -o-transition-delay: 1.3s; -ms-transition-delay: 1.3s; transition-delay: 1.3s; } figure:hover h3,figure:hover p { left: 0; } figcaption a { color: #fff; border: 2px solid #fff; padding: 4px 10px; text-decoration: none; } figcaption a:hover { color: #4f5856; background: #fff; } The CSS for Demo 2 Using the same property as above for the figure, figcaption and some basic elements, remove the transform property – rotation to from the figcaption element and the transition-delay property to all of the elements except to the figcaption element. As a result, you will have smooth fading hover effects. img { width: 100%; } figure { margin: 0; padding: 0; height: 300px; position: relative; display: block; cursor: pointer; overflow: hidden; border: 3px solid #fff; } figure:hover figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); opacity: 1; top: 0; } figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); opacity: 0; position: absolute; height: 100%; width: 100%; background: rgba(0,0,0,.5); color: #fff; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; -ms-transition-delay: .5s; transition-delay: .5s; } figcaption h3 { font-family: 'Open sans'; font-weight: 400; color: #f3b204; padding: 10px 20px; margin-bottom: 0; position: relative; righ: 100%; margin-top: 37px; font-size: 30px; } figcaption p { font-family: 'Open sans'; padding: 10px 20px; margin-bottom: 0; margin-top: 20px; position: relative; left: 100%; font-size: 13px; } figure:hover h3,figure:hover p { left: 0; } figcaption a { color: #fff; border: 2px solid #fff; padding: 4px 10px; text-decoration: none; } figcaption a:hover { color: #4f5856; background: #fff; } The CSS for Demo 3 For the third demo, create a zooming effect for the image. For the image element, use the transform property – scale to change the size of the image when the mouse-over state is triggered. We will also put the transition-delay and transition properties on both figcaption and image elements. img { width: 100%; } figure { margin: 0; padding: 0; height: 300px; position: relative; display: block; cursor: pointer; overflow: hidden; border: 3px solid #fff; } figure:hover figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); opacity: 1; top: 0; } figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); opacity: 0; position: absolute; height: 100%; width: 100%; background: rgba(0,0,0,.5); color: #fff; -webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; -ms-transition: all .9s ease; transition: all .9s ease; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; -ms-transition-delay: .5s; transition-delay: .5s; } figure img { -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -o-transition: all 1.5s; -ms-transition: all 1.5s; transition: all 1.5s; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; -ms-transition-delay: .5s; transition-delay: .5s; } figure:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } figcaption h3 { font-family: 'Open sans'; font-weight: 400; color: #f3b204; padding: 10px 20px; margin-bottom: 0; position: relative; righ: 100%; margin-top: 37px; font-size: 30px; } figcaption p { font-family: 'Open sans'; padding: 10px 20px; margin-bottom: 0; margin-top: 20px; position: relative; left: 100%; font-size: 13px; } figure:hover h3,figure:hover p { left: 0; } figcaption a { color: #fff; border: 2px solid #fff; padding: 4px 10px; text-decoration: none; } figcaption a:hover { color: #4f5856; background: #fff; } The CSS for Demo 4 Lastly, for this demo, create cool sliding effect. You will have almost similar CSS, like the third demo. This time, you will be adding a top property position on the figcaption but without the rotation. img { width: 100%; } figure { margin: 0; padding: 0; height: 300px; position: relative; display: block; cursor: pointer; overflow: hidden; border: 3px solid #fff; } figure:hover figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); opacity: 1; top: 0; } figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); opacity: 0; position: absolute; height: 100%; width: 100%; top: 250px; background: rgba(0,0,0,.5); color: #fff; -webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; -ms-transition: all .9s ease; transition: all .9s ease; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; -ms-transition-delay: .5s; transition-delay: .5s; } figcaption h3 { font-family: 'Open sans'; font-weight: 400; color: #f3b204; padding: 10px 20px; margin-bottom: 0; position: relative; righ: 100%; margin-top: 37px; font-size: 30px; -webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; -ms-transition: all .9s ease; transition: all .9s ease; } figcaption p { font-family: 'Open sans'; padding: 10px 20px; margin-bottom: 0; margin-top: 20px; position: relative; left: 100%; font-size: 13px; -webkit-transition: all .9s ease; -moz-transition: all .9s ease; -o-transition: all .9s ease; -ms-transition: all .9s ease; transition: all .9s ease; } figure:hover h3,figure:hover p { left: 0; } figcaption a { color: #fff; border: 2px solid #fff; padding: 4px 10px; text-decoration: none; } figcaption a:hover { color: #4f5856; background: #fff; } Conclusion And that’s it! I hope you enjoyed and learned something on this tutorial. I am hoping that you also got inspired to design more amazing image caption hover effects using CSS3 transform and transition-delay property.

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610