HTML & CSS : Creating a dropdown navigation menu

-

Comments

Post a Comment

Popular posts from this blog

The latest trend in user interface: Flat Design

-
Image
Flat User Interface Design is a design language currently used in the creation of various graphical user interfaces. The  flat design  refers to a style of interface design which removes any stylistic design choices that gives the three dimensional effect and hence is focused upon the minimal use of simple elements,  flat colors and typography . The designers might refer this since it allows them to make the interface designs more streamlined and efficient. Designing Language Is Responsive It is easier to convey information while looking for visual appearance and approach. This designing language makes it is easy to create an interface which is responsive to various browsers in various devices. With lesser design elements, a  website will load faster and can be resized  easily and still have a sharp appearance in high definition screens. This designing language represents smaller data footprints which have a significant effect on the performance. ...
Read more

Cascade Style Sheet: Responsive Navigation Menu

-
Previously I wrote a tutorial on a way to create a mobile navigation for responsive style, currently I've discovered a replacement technique to provide a responsive menu while not having to use Javascript. It uses clean and linguistics HTML5 markup. The menu is aligned left, center or right. in contrast to the previous tutorial wherever it's clicked to toggle, this menu toggles on hover that is a lot of user friendly. It additionally has associate indicator to indicate the active/current menu item. It works on all mobile and desktop browsers together with web Explorer!
Read more

Animated Notification bubble icon with CSS3 keyframe animation

-
HTML <ul> <li><a href="">Dashboard</a></li> <li><a href="">Friends</a></li> <li> <a href="">Message <span>9</span> </a> </li> <li><a href="">Games</a></li> <li><a href="">Settings</a></li> </ul> CSS .animating{ animation: animate 1s cubic-bezier(0,1,1,0); } @keyframes animate{ from { transform: scale(1); } to { transform: scale(1.7); } } jQuery var counterValue = parseInt($('.bubble').html()); // Get the current bubble value function removeAnimation(){ setTimeout(function() { $('.bubble').removeClass('animating') }, 1000); } $('#decrease').on('click',function(){ counterValue--; // decrement $('.bubble').html(counterValue).addClass('animating'); // anima...
Read more