CSS and JavaScript are two indispensable elements for any Web site, also for any web designers and web developers. Sometimes, they come up with some problems, or a few technical problems.
But the good news you need to know that the stronger growth of the Internet, web designers and web developers, every day, always find the solutions and tips for these problems, and share them together. This JavaScript article give you 45 tips and tricks to solve CSS, JavaScript problems quickly. If you know more, you can share it at here.
- Demo
- Enlarge
- Reload
- New window
Generate your business videos by AI with voice or just text
Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers.
CSS Navigation Menus
CSS 3D Meninas
"I've
took the classic paint The Maids of Honour (Las Meninas) and created a
CSS pseudo-3D / Parallax effect. It is pure CSS, no JavaScript or Flash
is involved. It has been tested and is working on Internet Explorer 8,
Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it
validates, too.
Sproing! - Make An Elastic Thumbnail Menu
"In
an ongoing attempt to offer alternative methods to spruce up menus,
I've pieced together an elastic thumbnail menu. It magnifies menu items
when they are hovered over and menu items expand upwards.
How to Create Simple and Effective Sub Navs with Definition Lists
"When
we need simple and effective on-page navigation, to either jump to
content on the page or flip to another view, we use the dl element. Its
sub elements, the dt and dd, make it very easy for us to create inline
links with a clear label. Here we're going to share with you a fast,
lightweight method for how we'll use CSS to do it."
Sticky SideNav Layout with CSS
Learn
how to create a fixed sidenav layout for your blog or website. Having a
fixed sidenav comes in handy when dealing with blog style websites
where the content is extremely tall and there is a need for good amount
of scrolling. The fixed navigation allows the user to cruise through
the content without scrolling back up to the top to navigate through
the rest of the site.
Unobtrusive Dropdown Page Changer
Using
a <select> dropdown menu to create navigation isn't as common as
it once was, but it's still around. It got ripped on pretty good for
being an inaccessible / obtrusive. Indeed a lot of the scripts you'll
find out there for creating a menu like this are this way. Bummer.
Let's make one that works with or without JavaScript.
CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip
CSS-based
navigation / pagination bar without JavaScript. There is a tooltip on
hover for the 'previous' and 'next' page's bullets that makes
navigation easier.
How to Code an Overlapping Tabbed Main Menu
Main
navigation menu is that part of a website design that makes the whole
site look lively and complete. But the most common type of navigation
menu style still being used a lot is the tabbed navigation menu. Here
is a tutorial on how to code an overlapping tabbed menu.
Solution For Very Long Dropdown Menus
"I like to be confident with post titles, but the reality in this case is a possible
solution for very long dropdowns. The problem with long dropdowns is
that the dropdown itself can go below the "fold" of the website. That
is, below the visible area of the browser window. So in order to access
those menu items down below, you need to scroll your browser window.
For those of us with scroll wheels of some kind on our mice (mouses?),
it's not a big deal. For those without, those lower menu items are
totally inaccessible, because to use the browser scrollbar means
mousing off the menu (and probably having it close)."
Mega Drop Down Menu w/ CSS & jQuery
When
used properly, mega drop down menus can be quite efficient for large
scale websites. Let's experiment with different ways of implementing
this technique. A tutorial by Soh Tanaka, Smashing Magazine's regular
author.
- Sent (0)
- New