free jQuery & CSS templates
In this section you have direct download links to various templates & direct code to copy paste to use these CSS and the magic jquery plugin.
Basic templates
-
Standard home
This is a classic template for a home page.
Header with horizontal & drop down menu, content with a carrousel and some blocs. -
Article : 2 cols
This is a classic template for an article.
Header with horizontal & drop down menu, content with an edit col & rightcol. -
3 cols (navigation col)
This is a classic template for a page with a navigation column at the left.
Header with horizontal & drop down menu, content with an navigation col, edit col & rightcol.
Evolved templates
These one are some templates I did in 2 minutes that uses more the advanced limit/align features. If you created some, don't hesitate to send them
-
Navigation & advertising remains in the screen
When the user scrolls, the navigation & ads that were about to go out of the screen
remains on top and go back in place if the user scrolls back.
-
Footer down the screen if page small
Tired of having the footer in the middle of the screen if the page is too small ? With magic jQuery, you have the solution in 2 lines
-
Web Layout : Magic jQuery as Layout Manager
You want to have a regular app layout : resizable fixed header, resizable leftcol and footer down the screen ? here you have
Direct online links to test the system
To test Super CSS 2000
In the header of your page add the code :
- <link type="text/css" rel="stylesheet" rev="stylesheet" media="screen" href="http://jquery-css.com/_css/default.css" />
- <!--[if IE]>
- <link type="text/css" rel="stylesheet" rev="stylesheet" media="screen" href="http://jquery-css.com/_css/ie.css" />
- <![endif]-->
- <!--[if IE 6]>
- <link type="text/css" rel="stylesheet" rev="stylesheet" media="screen" href="http://jquery-css.com/_css/ie6.css" />
- <![endif]-->
To test Magic jQuery
before the </body> tag : copy the following lines or (better) copy the files locally and link to the local copies.
- <script type="text/javascript"
- var overrideResizable = true; //override resizable function of jQuery UI (if used) to resize in all directions
- </script>
- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
- <script type="text/javascript" src="http://www.jquery-css.com/js/magic.min.js" ></script>
- <script type="text/javascript" >
- $(document).ready(function () {
- //your code here
- });
- </script>
Link to the Magic jQuery only file ( without dependencies included : hoverIntent & baresize)
- <script type="text/javascript" src="http://www.jquery-css.com/js/magic.latest.min.js" ></script>