Главная » Файлы » Прочие скрипты » jQuery

Стильное многоуровневое горизонтальное меню на css и jQuery
23.06.14, 11:56:03

Скачать файл




Красивое стильное меню, которое очень удачно впишется в тёмные дизайны

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<link href="/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="/css/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />

  <!--[if lt IE 7]>  
  <script type="text/javascript" src="/js/jquery.js"></script>  
  <script type="text/javascript" src="/js/jquery.dropdown.js"></script>  
  <![endif]-->


Следующий код в то место, где будет само меню:
Код
<ul id="nav" class="dropdown dropdown-horizontal">
<li id="n-home"><a href="#">Home</a></li>
<li id="n-music"><a href="#" class="dir">Music</a>
<ul>
<li class="first"><a href="#" class="dir">Artists</a>
<ul>
<li class="first"><a href="#">Browse All Artists</a></li>
<li><a href="#">MTV.com Picks</a></li>
<li><a href="#">Most Popular Artists</a></li>
<li><a href="#">New Artists</a></li>
<li><a href="#">Artist Photos</a></li>
<li><a href="#">A.D.D. Bio</a></li>
<li><a href="#">First Ladies</a></li>
</ul>
</li>
<li><span class="dir">Music Videos</span>
<ul>
<li class="first"><a href="#">MTV.com Video Picks</a></li>
<li><a href="#">Video Premieres</a></li>
<li><a href="#">Most Popular Videos</a></li>
<li><a href="#">Playlists</a></li>
<li><a href="#">Top Videos by Year</a></li>
<li><a href="#">Live Performances</a></li>
<li><a href="#">The Big Ten</a></li>
<li><a href="#">Headbangers Ball</a></li>
<li><a href="#">Playlibs</a></li>
<li><a href="#">Subterranean</a></li>
<li><a href="#">Sucker Free</a></li>
<li><a href="#">Video Remixer</a></li>
</ul>
</li>
<li><a href="#">Your Music on MTV?</a></li>
<li><a href="#" class="dir">Lyrics</a>
<ul>
<li class="first"><a href="#">Search for Lyrics</a></li>
<li><a href="#">Play Lyrics Game</a></li>
</ul>
</li>
<li><span class="dir">Music Blogs</span>
<ul>
<li class="first"><a href="#">Buzzworthy Blog</a></li>
<li><a href="#">Headbangers Blog</a></li>
<li><a href="#">Play | Rhapsody Blog</a></li>
<li><a href="#">Subterranean Blog</a></li>
<li><a href="#">Sucker Free Blog</a></li>
<li><a href="#">You R Here Blog</a></li>
</ul>
</li>
<li><span class="dir">Music Shows</span>
<ul>
<li class="first"><a href="#">Dew Circuit Breakout</a></li>
<li><a href="#">Discover & Download</a></li>
<li><a href="#">MTV Live</a></li>
<li><a href="#">Spankin' New Music Week</a></li>
<li><a href="#">TRL</a></li>
<li><a href="#">Unplugged</a></li>
<li><a href="#">Yo! MTV Raps</a></li>
</ul>
</li>
<li><span class="dir">Songs</span>
<ul>
<li class="first"><a href="#">The Leak |<br/>Album Previews</a></li>
<li><a href="#">Free Downloads</a></li>
<li><a href="#">MTV Radio</a></li>
<li><a href="#">Listen on Rhapsody</a></li>
</ul>
</li>
<li><span class="dir">Genres</span>
<ul>
<li class="first"><a href="#">Rock</a></li>
<li><a href="#">Pop</a></li>
<li><a href="#">Hip-Hop</a></li>
<li><a href="#">Soul/R&B</a></li>
<li><a href="#">Indie</a></li>
</ul>
</li>
<li><a href="#">Billboard Charts</a></li>
</ul>
</li>
<li id="n-shows"><a href="#" class="dir">Shows</a>
<ul>
<li class="first"><a href="#"><strong>TV Schedule</strong></a></li>
<li><a href="#">MTV Shows Gossip</a></li>
<li><a href="#">Show Photos</a></li>
<li><a href="#">Be on MTV</a></li>
<li><a href="#"  
target="_blank">Shop MTV Shows</a></li>
</ul>
</li>
<li id="n-news"><a href="#" class="dir">News</a>
<ul>
<li class="first"><a href="#">News Main</a></li>
<li><span class="dir">Headlines</span>
<ul>
<li class="first"><a href="#">Breaking News</a></li>
<li><a href="#">Music News</a></li>
<li><a href="#">Movie News</a></li>
<li><a href="#">Video Game News</a></li>
<li><a href="#">World/National News</a></li>
</ul>
</li>
<li><a href="#">Video Updates & Interviews</a></li>
<li><a href="#">Newsroom Blog</a></li>
<li><span class="dir">Live Music Coverage</span>
<ul>
<li class="first"><a href="#">Your Uploads</a></li>
<li><a href="#">You R Here Blog</a></li>
</ul>
</li>
<li><span class="dir">MTV Reporters</span>
<ul>
<li class="first"><a href="#">Liz Hernandez</a></li>
<li><a href="#">Tim Kash</a></li>
<li><a href="#">Kurt Loder</a></li>
<li><a href="#">John Norris</a></li>
<li><a href="#">SuChin Pak</a></li>
<li><a href="#">Sway</a></li>
</ul>
</li>
<li><a href="#">Video Games Blog</a></li>
<li><a href="#">Street Team '08</a></li>
<li><a href="#">Hottest MCs</a></li>
<li><a href="#">News Alerts</a></li>
</ul>
</li>
<li id="n-movies"><span class="dir">Movies, Games & More</span>
<ul>
<li class="first"><a href="#" class="dir">Movies</a>
<ul>
<li class="first"><a href="#">Movies Main</a></li>
<li><a href="#">2008 Movie Awards</a></li>
<li><a href="#">Movies News</a></li>
<li><a href="#">Movies Blog</a></li>
<li><a href="#">Trailers</a></li>
<li><a href="#">Kurt Loder Film Reviews</a></li>
<li><a href="#">Summer Movies</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Red Carpet & On Set Photos</a></li>
<li><a href="#">MTV Movies Shop</a></li>
</ul>
</li>
<li><a href="#" class="dir">Video Games</a>
<ul>
<li class="first"><span class="dir">Features</span>
<ul>
<li class="first"><a href="#">Rock Band</a></li>
<li><a href="#">The Dime</a></li>
<li><a href="#">Hot Trailers</a></li>
<li><a href="#">The G-Hole</a></li>
<li><a href="#">Trailers and Game Videos</a></li>
<li><a href="#">Podcast</a></li>
</ul>
</li>
<li><a href="#" class="dir">News</a>
<ul>
<li class="first"><a href="#">Multiplayer Blog</a></li>
<li><a href="#">Multiplayer Video</a></li>
<li><a href="#">Games News</a></li>
</ul>
</li>
<li><a href="#">Gamer's Week</a></li>
</ul>
</li>
<li><a href="#" class="dir">Online Games</a>
<ul>
<li class="first"><a href="#">Action Games</a></li>
<li><a href="#">Brain Games</a></li>
<li><a href="#">Classic Games</a></li>
<li><a href="#">MTV Original Games</a></li>
</ul>
</li>
<li><a href="#">Activism</a></li>
<li><a href="#" class="dir">Mobile</a>
<ul>
<li class="first"><span class="dir">MTV Shows</span>
<ul>
<li class="first"><a href="#">A.D.D. Bio</a></li>
<li><a href="#">Beavis and Butthead</a></li>
<li><a href="#">The Hills</a></li>
<li><a href="#">Kaya</a></li>
<li><a href="#">MTV2</a></li>
<li><a href="#">mtvU</a></li>
<li><a href="#">Run's House</a></li>
<li><a href="#">Sucker Free on MTV</a></li>
<li><a href="#">TRL</a></li>
<li><a href="#">Yo Momma</a></li>
</ul>
</li>
<li><a href="#">Ringtones</a></li>
<li><a href="#">Graphics</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Alerts</a></li>
<li><a href="#">Video</a></li>
</ul>
</li>
<li><a href="#">Contest & Sweepstakes</a></li>
</ul>
</li>
  </ul>
  <br clear="all">


Осталось лишь залить два скрипта из прикреплённого архива в папку js два стиля в папку css и все картинки в папку images

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: CSS, стильное, горизонтальное, на, JQuery, Меню, Многоуровневое
Просмотров: 403 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: