24.08.2009 - 40 коммент.
CSS-HTML-Ajax, Креатив → Анимированная навигация с CSS и jQuery
Сделайте навигацию своего сайта интересной. Смотрим пример ниже (картинка кликабельна).
Создаем само меню:
<ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> |
Далее, таблицу стилей:
ul#topnav { margin: 0; padding: 0; list-style: none; float: left; font-size: 1.1em; } ul#topnav li{ margin: 0; padding: 0; overflow: hidden; float: left; height:40px; } ul#topnav a, ul#topnav span { padding: 10px 20px; float: left; text-decoration: none; color: #fff; background: url(a_bg.gif) repeat-x; text-transform: uppercase; clear: both; width: 100%; height: 20px; line-height: 20px; } ul#topnav a{ color: #555; background-position: left bottom; } ul#topnav span{ background-position: left top; } |
Подгружаем jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> |
И, собственно, сам скрипт:
$(document).ready(function() { $("#topnav li").prepend("<span></span>"); $("#topnav li").each(function() { var linkText = $(this).find("a").html(); $(this).find("span").show().html(linkText); }); $("#topnav li").hover(function() { $(this).find("span").stop().animate({ marginTop: "-40" }, 250); } , function() { $(this).find("span").stop().animate({ marginTop: "0" }, 250); }); }); |
Вот собственно и всё, смотрим пример.
40 коммент.
An engrossing discourse is worth remark. I judge that you should create writer on this matter, it strength not be a bias soul but mostly fill are not sufficiency to mouth on specified topics. To the succeeding. Cheers like your ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет.
An newsworthy word is designer mention. I imagine that you should write more on this topic, it mightiness not be a bias bailiwick but generally fill are not enough to mouth on specified topics. To the succeeding. Cheers like your ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет.
I am not sure where you are getting your info, but great topic. I needs to spend some time learning more or understanding more. Thanks for fantastic info I was looking for this ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет for my mission.
I got what you plan, thanks for putting up. Woh I am cheerful to chance this website through google. Thanks For Share ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет.
I got what you impart, thanks for swing up. Woh I am cheerful to hear this website through google. Thanks For Share ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет.
Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is magnificent, let alone the content!. Thanks For Your article about ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет .
An engrossing communicating is couturier note. I anticipate that you should make more on this topic, it might not be a sacred refer but generally people are not enough to communicate on specified topics. To the succeeding. Cheers like your ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет.
Wow, awesome blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is excellent, as well as the content!. Thanks For Your article about ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет .
Wow, fantastic blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is great, as well as the content!. Thanks For Your article about ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет .
I like this blog so much, bookmarked .
Awesome website. Bookmarked it and shown my friends!
Awesome layout! How did you get that layout?
An interesting discussion is well worth comment. I do think that you need to publish more on this topic, may possibly not be a taboo topic but in most cases people are not enough to speak on such topics. To the next. Cheers
ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет I was suggested this web site by my cousin. I'm not sure whether this post is written by him as no one else know such detailed about my difficulty. You're wonderful! Thanks! your article about ÐÐ½Ð¸Ð¼Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð½Ð°Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñ†Ð¸Ñ Ñ CSS и jQuery » ÐŸÑƒÐ±Ð»Ð¸ÐºÐ°Ñ†Ð¸Ñ Â» Mix-Up → Креатиff так и прет Best Regards Justin Veronica
Hello there, You've done an incredible job. I’ll definitely digg it and personally recommend to my friends. I'm sure they'll be benefited from this website.
I appreciate an unbelievable put up, will see one's others posts. many thanks for your ideas for this, I soon became a bit strike by this article. Many thanks again! You earn a terrific time. Displays the beauty through wonderful report here. I do think that if a greater number of people thought about it like that, they'd have a better time period receive the hold ofing the issue.
Hello there, just became alert to your blog through Google, and found that it's truly informative. I am gonna watch out for brussels. I will appreciate if you continue this in future. Many people will be benefited from your writing. Cheers!
<a href="http://www.cartridgeprinter.co.uk/epson-p50-ink-cartridge.html" rel="nofollow">http://www.cartridgeprinter.co.uk/epson-p50-ink-cartridge.html</a>
hello You're website is very much well designed. can I question what theme you is using? john f.
Although I am not in agreement with all the things you stated, it is an intriguing point of view.
After days of angry exchanges between Paris and London, both sides called for a ceasefire. A senior British diplomatic source said: "I hope all this calms down soon, as it is not in anyone's interest for it to continue. That, I believe, is why the French prime minister called Nick Clegg on Friday afternoon [to build bridges]."
Thank you for the sensible critique. Me and my neighbor were just preparing to do a little research about this. We got a grab a book from our local library but I think I learned more from this post. I am very glad to see such wonderful information being shared freely out there.
very good post, i definitely love this website, keep on it
Garlic herb just like rainy dirt, nevertheless, certainly not overly moist. Provide them with a couple of fertilizer. Start constructing a berry keep right now. Promote your own collect on the side of the road. I’ll stop pertaining to tomato greens, while not lemonade.
Observed your post very fascinating in fact. I seriously enjoyed examining it therefore you make pretty some good factors. I am going to bookmark this web site to the long term! Relly good post.
I really like what you've done with the thmeme but I was asking myself if you are the one that created it or you just bought it and customized it?
Discovered your write-up really interesting without a doubt. I seriously really enjoyed reading it so you make really some fantastic factors. I am going to bookmark this internet site for your long run! Relly good content.
Found your write-up very interesting indeed. I genuinely liked looking at it and you simply make fairly some good factors. I'll bookmark this web page to the long term! Relly excellent post.
Discovered your short article pretty exciting without a doubt. I seriously liked studying it therefore you make fairly some excellent points. I will bookmark this website with the upcoming! Relly good content.
I seriously understand why Alarming Web Game submit. I’ve been recently hunting around because of this! Thank goodness I came across the idea online. You’ve produced my day! Thanks again.
Greeting from over the sea. detailed blog I must return for more.
A unique note..!!
Observed your article incredibly exciting in fact. I definitely liked looking at it and also you make pretty some great details. I will bookmark this web-site with the future! Relly excellent report.
Located your article pretty appealing in truth. I actually appreciated looking at it so you make quite some great points. I am going to bookmark this website with the long run! Relly great write-up.
I had a CRAZY amount of fun creating my Cruise in Chartreuse board. Now I am noticing that fabulous hue everywhere. Many thanks for the inspiration!
Hey! Quick question that's totally off topic. Do you know how to make your site mobile friendly? My site looks weird when browsing from my iphone4. I'm trying to find a template or plugin that might be able to correct this problem. If you have any recommendations, please share. Appreciate it!
Hello there! Do you know if they make any plugins to safeguard against hackers? I'm kinda paranoid about losing everything I've worked hard on. Any suggestions?
"Nice post… Real nice style and design and superb subject matter, absolutely nothing else we need : D…."
I simply want to mention I am newbie to blogs and absolutely savored you're web site. Very likely I’m likely to bookmark your site . You really come with great article content. Regards for sharing your webpage.
Wow that was unusual. I just wrote an really long comment but after I clicked submit my comment didn't show up. Grrrr... well I'm not writing all that over again. Anyway, just wanted to say excellent blog!
Оставить комментарий
Категории
Свежие комментарии
- Julianne Botkin к записи Анимированная навигация с CSS и jQuery
- Milan Toniatti к записи Анимированная навигация с CSS и jQuery
- Jennie Calico к записи Анимированная навигация с CSS и jQuery
- fruit mocking party к записи Анимированная навигация с CSS и jQuery
- fruit mocking party к записи Анимированная навигация с CSS и jQuery
Свежие записи
Популярные запросы
Облако меток
cms css drupal flash HTML javascript jquery mysql Photoshop php phpMyAdmin rss SEO sql tumblr twitter xhtml Дизайн Креатив бесплатно блог веб 2.0 вебдизайн вебсайт вектор выпадающее меню галерея движок иконки картинка картинки кисти меню микроблог на русском редактор сервис скрипт сми социальные сети файлы хостинг шаблон шрифты эффект