Galeria y recurss
Se filtran las imágenes dependiendo del menu
Al dar clic cambia la cabeza
Al dar cloc se expande
Menú que cambia el fondo
Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements.
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.
Ultimos Comentarios
yennit dijo:
gracias por los codigos, nos ha ayudado demasiado... :D
Eduard dijo:
Buenos dias este tipo de menu lo encuentro muy adecuado para una web que me gustaria desarrollar, seria posible hacer ...
gio dijo:
ya lo adapte ami sitio pero no puedo agregar imagenes podrian ayudarme para ver que hay que cambiar y que parametros modificar ...
alex dijo:
la pagina no se encuantra vigente.
Nestor dijo:
¿es personalizable en el sentido de mostrar mas de 4 imagenes en fila?
lks dijo:
Las aplicaciones son gratuitas, cualquier duda consulta la pagina del autor
drbafle dijo:
Como puedo modificar este script para que no me cargue las fotos desde picasa? he estado mirando la parte de la URL de picasa, ...
Create a Fast and Simple Toggle View Content with jQuery![]()
![]()
Introduction
This would be a simple, quick and easy tutorial. The reason I make this tutorial is for my upcoming post which will show you the plugins and scripts that I used in my most recent project. It's going to be a really useful post and make sure you won't miss it :)
This script is fairly straight forward. What it does is using the UL list and allow user to toggle to display the content of LI items. This is a really useful user interface feature that it helps designers to save space and build a less complicated user interface. It eliminates redundant element and allow user view the content only when they want to see it.
And...... this is how it will look like:
1. HTML
It consists of UL list and the rest is quite self-explanatory.
<ul id="toggle-view"> <li> <h3>Title 1</h3> <span>+</span> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </div> </li> <li> <h3>Title 2</h3> <span>+</span> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </div> </li> <li> <h3>Title 3</h3> <span>+</span> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p> </div> </li> </ul>2. CSS
I used the minimum CSS code to style this tutorial. The most important thing is, we have to make sure the P is hidden by default.
#toggle-view { list-style:none; font-family:arial; font-size:11px; margin:0; padding:0; width:300px; } #toggle-view li { margin:10px; border-bottom:1px solid #ccc; position:relative; cursor:pointer; } #toggle-view h3 { margin:0; font-size:14px; } #toggle-view span { position:absolute; right:5px; top:0; color:#ccc; font-size:13px; } #toggle-view .panel { margin:5px 0; display:none; }3. Javascript
This would be one of my shortest jQuery code! We attach click event to the LI item and everytime a user click on the item check if P tag is visible. If it's hidden, show it otherwise hide it. Also, it will change the html value for the SPAN to either plus or negative sign.
$(document).ready(function () { $('#toggle-view li').click(function () { var text = $(this).children('div.panel'); if (text.is(':hidden')) { text.slideDown('200'); $(this).children('span').html('-'); } else { text.slideUp('200'); $(this).children('span').html('+'); } }); });Conclusion
I hope you will like this quick and short tutorial! :) stay tuned for my upcoming post!
![]()
![]()
AdvertisementIncredible online 640-816 dumps training programs & BCP-420 help you in pass 640-553 exam regarding 642-617. We offer best quality 650-987 training tools for your success.
Show Some Love, Spread This Post!
Ultimos Comentarios
yennit dijo:
gracias por los codigos, nos ha ayudado demasiado... :D
Eduard dijo:
Buenos dias este tipo de menu lo encuentro muy adecuado para una web que me gustaria desarrollar, seria posible hacer ...
gio dijo:
ya lo adapte ami sitio pero no puedo agregar imagenes podrian ayudarme para ver que hay que cambiar y que parametros modificar ...
alex dijo:
la pagina no se encuantra vigente.
Nestor dijo:
¿es personalizable en el sentido de mostrar mas de 4 imagenes en fila?
lks dijo:
Las aplicaciones son gratuitas, cualquier duda consulta la pagina del autor
drbafle dijo:
Como puedo modificar este script para que no me cargue las fotos desde picasa? he estado mirando la parte de la URL de picasa, ...
Galeria y recurss
Description
Free CSS Drop-Down Menu Framework was first released back in June, 2008. Since then it has struck the audiences with its perfect cross browser performance and wide variety of drop-down menu transformations and themes. As the internet changes this project remains a steady advocate of purely CSS driven solutions.
- Modular, with themes. Not only HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent. What is more, creating a new theme is easy when you have the best hosting plan for your site.
- Easily deployable. The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML or HTML5 format.
- Easily transformable. Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.
- Cross browser. Configurations available for Windows Internet Explorer 7 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later, Google Chrome, etc.
- Super Fast. Having the above mentioned features it is not affected by any disturbances whatsoever.
- Continuous development. The project is constantly revised and improved.
- No JavaScript whatsoever!
Se filtran las imágenes dependiendo del menu
Creating a “Filterable” Portfolio, una atractiva practica basada en jQuery para filtrar categorías. Posee un efecto simple pero llamativo y fue desarrollada pensando en la creación de porfolios personales. Suponiendo que tengamos 5 categorías principales: Diseño, Desarrollo, Webs, CMS, logos, Grafica. Una vez que se hace clic sobre una de las categorías del menú de navegación, solo se mostraran las imágenes que formen parte de esa sección, el resto desaparecerá y permanecerá oculto. Otra forma muy interesante para hacer aun más atractivo nuestros porfolios.
Ver demo - Mas Info y Descarga Creating a “Filterable” PortfolioJavaScript:$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
Al dar clic cambia la cabeza
Una de las tendencias en el diseño web es el uso dinámico de imágenes o la implementación de Banners rotativos utilizando efectos denominados “slideshow”. Existen diversas formas de lograr estos efectos, y una de ellas, Tabbed Content Rotator, una bonita practica basada en jQuery que nos permitirá integrar imágenes, texto y navegación, en una serie de pestañas rotativas. Una idea muy interesante para presentar productos y servicios.
Ver Demo – Mas Info Tabbed Content Rotator – Descarga
Al dar cloc se expande
Animated Drop Down Menu with jQuery, un bonito menú desplegable basado en jQuery y Css. Muy práctico para ubicarlo en la sección superior de nuestro header, ya que ocupa muy poco lugar y a su vez lograra llamar la atención de los usuarios. Me recuerda mucho al menú de NETTUTS como a todos los de la red de Envato.
Uso
Realizar las llamadas correspondientes desde nuestro encabezado < head>JavaScript:<script type="text/javascript" src="jsfiles/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('img.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');
});
$('ul.menu_body li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
});
$('ul.menu_body li a').mouseout(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
});
</script>agregar estilo
CSS:ul, li{margin:0; padding:0; list-style:none;}
.menu_head{border:1px solid #998675;}.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li.alt{background:#362f2d;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}nuestro Menu
HTML:<img src="images/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>Mas Info Animated Drop Down Menu with jQuery,
Menú que cambia el fondo
Last updated on May 31, 2012 Originally published on July 24, 2010 by malihu, under Plugins, Templates & web apps.
Animated page scrolling to specific id within the document with jquery. Article contains a jquery plugin you can use for simple “back to top” links or complex single-page websites menus, as well as a single-page CSS template with additional features.
Page scroll to id plugin
Download the archive which contains the plugin files, as well as examples and a single-page css template. Extract files and upload jquery.malihu.PageScroll2id.js to your web server.
Include jquery, jquery UI and jquery.malihu.PageScroll2id.js in your html document
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script src="jquery.malihu.PageScroll2id.js"></script>The code above can be inserted inside the head tag or at the very bottom of your document, before the closing body tag (which is normally recommended for better performance). We’re using Google’s CDN to get jquery and jquery UI libraries (why?).
What these files do
jquery is the javascript library used by the Page scroll to id plugin (I’m making the crazy assumption here that you do know what jquery is. In case you don’t, here it is).
jquery UI (jQuery User Interface) extends jquery library and provides animation easing (you can make your own custom jquery UI bundle if you wanna cut down the size, see http://jqueryui.com/download).
jquery.malihu.PageScroll2id.js is our plugin file
Call mPageScroll2id function on window load (after the inclusion of the plugin files), either in the head or body tag
<script> (function($){ $(window).load(function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id(); }); })(jQuery); </script>Note that we’re wrapping our jquery code with (function($){ ... })(jQuery);. This ensures no conflict between jquery and other libraries using $ shortcut. See Using jQuery with Other Libraries for more info. We also use window load ($(window).load()) so the code executes after all page elements are fully loaded.
The a[rel='m_PageScroll2id'] selector used here means that the plugin will apply to any anchor element with m_PageScroll2id rel attribute value (e.g. <a href="#targetID" rel="m_PageScroll2id">link</a>).
When we click <a href="#targetID" rel="m_PageScroll2id">link</a>, the page will scroll to the element with id="targetID" within the document. So all that’s left to do, is create your unique id sections (e.g. <div id="myID">Section</div>) and the links that point to these sections within your page (e.g. <a href="#myID" rel="m_PageScroll2id">Go to section</a>).
You can change the function call selector to anything you want (an id, class name etc.). For instance, if you want the script to apply to all links with class name “myClass”, you simply do:
$("a.myClass").mPageScroll2id();You can also have multiple selectors by inserting comma separated values. For example the following applies to a)every anchor element that’s inside a container with an id of navigationMenu, b)every link with href attribute value #top and c)every link with rel attribute value m_PageScroll2id
$("#navigationMenu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id();That’s all you need to use the plugin. The code below is a most basic html example of a single-page using it:
<!DOCTYPE HTML> <html> <head> <style> #section_1,#section_2,#section_3{ height:1000px; } </style> </head> <body id="top"> <ul class="navigation-menu"> <li> <a href="#section_1" rel="m_PageScroll2id">section 1</a> </li> <li> <a href="#section_2" rel="m_PageScroll2id">section 2</a> </li> <li> <a href="#section_3" rel="m_PageScroll2id">section 3</a> </li> </ul> <div id="section_1"> Section 1 content </div> <div id="section_2"> Section 2 content </div> <div id="section_3"> Section 3 content </div> <a href="#top" rel="m_PageScroll2id">Back to top</a> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script src="jquery.malihu.PageScroll2id.js"></script> <script> (function($){ $(window).load(function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id(); }); })(jQuery); </script> </body> </html>Configuration
mPageScroll2id function can get the following option parameters in order to customize its behavior and basic functionality:
scrollSpeed: IntegerScroll animation speed, value in milliseconds autoScrollSpeed: BooleanAuto-adjust animation speed according to element position, values: true, false scrollEasing: StringScroll animation easing type when page is idle, see jquery UI easing for all available easing types scrollingEasing: StringScroll animation easing type when page is animated, see jquery UI easing for all available easing types callback: function(){}User custom callback function to run after a scrolling animation is completed. Example: callback:function(){ alert("callback"); } pageEndSmoothScroll: BooleanEnd of page smooth scrolling (if bottom elements are too short), values: true, false layout: StringPage layout defines scrolling direction, values: vertical, horizontal, auto
Settinglayout: "auto"scrolls page both horizontally an vertically. See the demoAn example of defining these options parameters and their default values is as follows
$("a[rel='m_PageScroll2id']").mPageScroll2id({ scrollSpeed:1300, autoScrollSpeed:true, scrollEasing:"easeInOutExpo", scrollingEasing:"easeInOutCirc", callback:function(){}, pageEndSmoothScroll:true, layout:"vertical" });Deep linking
There are many solutions for deep linking. The code below is an example of Page scroll to id plugin combined with Asual’s jquery address plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script src="jquery.malihu.PageScroll2id.js"></script> <!-- include jquery address plugin --> <script src="jquery.address-1.4.min.js"></script> <script> (function($){ $(window).load(function(){ /* call both mPageScroll2id and address functions on our selector */ $("a[rel='m_PageScroll2id']").mPageScroll2id().address(); /* call "externalChange" method of jquery address plugin to scroll page on browser back/forward */ $.address.externalChange(function(event){ if(event.value){ var eVal=event.value.replace("/",""); if(eVal===""){ eVal="top"; } /* call "history" method of mPageScroll2id and pass jquery address hash value */ $().mPageScroll2id("history",{ scrollTo:eVal }); } }); }); })(jQuery); </script>By calling the “externalChange” method of jquery address plugin and passing its returned value via Page scroll to id “history” method, the page will scroll to the corresponding id each time we hit browser’s back/forward buttons or change the url in the address bar. Deep linking demo
- May 31, 2012
- Developed jquery plugin out of the original Animate page to id script
Created single-page CSS templateLicense
You are free to use, study, improve and modify this script wherever and however you like.
This work is licensed under a Creative Commons Attribution 3.0 Unported License.
Wordpress plugins are licensed under GNU General Public License.Donating helps greatly in developing and updating free software and running this blog :)