Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)


Я записываю курсы!
  Курс валют

НБУ курс евро






Стильное навигационное меню.



Всем привет, сегодня мы в пошаговом порядке разберём очередное симпатичное навигационное меню.

Прежде, чем мы сможем создать эти опрятные функциональные возможности, мы создадим фундамент для основной работы. В вашем любимом кодовом редакторе, создайте ненумерованный список для своей навигации, затем импортируйте как jQuery, так и jQuery UI, через систему Google.

Шаг 1. Список

<html lang="en"> 
  <head> 
  <meta http-equiv="Content-Type" 
content="text/html; charset=utf-8"> 
  <title>SpasticNav  Plugin</title> 
  <link rel="stylesheet" href="
css/style.css" type="text/css" 
media="screen" /> 
  </head> 
  <body> 
  <div id="container"> 
  <ul id="nav"> 
  <li id="selected"><a href="#">Home</a></li> 
  <li><a href="#">About<
/a></li> 
  <li><a href="#">Blog<
/a></li>
  <li><a href="#">More About
 My Portfolio</a></li>
  <li><a href="#">Contact<
/a></li> 
  </ul> 
  </div> 
  <script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4/jquery.min.js" 
type="text/javascript"></script> 
  <script 
type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jqueryui/
1.7.2/jquery-ui.min.js"></script> 
  </body>
  </html> 

Отметьте, как мы сделали id="selected" к странице.

Мы должны решить, как лучше всего осуществить функциональные возможности. Чтобы учесть возможность многократного использования, мы упакуем этот небольшой подлинник в плагин:

$('#nav').spasticNav();

Так как мы решили построить плагин, давайте идти вперед и создадим новый файл и сошлемся на него. Мы назовем его jquery.spasticNav.js.

<script type="text/javascript" 
src="js/jquery.spasticNav.js"></script> 
    
<script type="text/javascript"> $('#nav').spasticNav(); </script>

Шаг 2. Плагин

(function($) { //Теперь, мы назовем наш плагин $.fn.spasticNav = function(options) { //Теперь, когда мы назвали наш плагин, следующий шаг должен создать варианты конфигурации. options = $.extend({ overlap : 20, speed : 500, reset : 1500, color : '#0b2b61', easing : 'easeOutExpo' }, options); return this.each(function() { var nav = $(this), currentPageItem = $('#selected', nav), blob, reset; // Теперь, когда мы объявили наши переменные, давайте создадим фактическую копию, так сказать. $('<li id="blob"></li>').css({ width : currentPageItem.outerWidth(), height : currentPageItem.outerHeight() + options.overlap, left : currentPageItem.position().left, top : currentPageItem.position().top - options.overlap / 2, backgroundColor : options.color }).appendTo(this); blob = $('#blob', nav); // Парения $('li:not(#blob)', nav).hover(function() { clearTimeout(reset); blob.animate( { left : $(this).position().left, width : $(this).width() }, { duration : options.speed, easing : options.easing, queue : false } ); }, function() { reset = setTimeout(function() { blob.animate({ width : currentPageItem.outerWidth(), left : currentPageItem.position().left }, options.speed) }, options.reset); }); }); }; }) (jQuery);

Шаг 3. CSS

И наконец на последок мы подключаем CSS для корректного отображения нашей меню.

Сначала давайте создадим элементы "nav" ul. Откройте свой style.css файл, и добавьте:

#nav {
  position: relative;
  background: #292929;
  float: left;
  }

Далее нам необходимо создать каждый пункт списка.

#nav li {
  float: left;
  list-style: none;
  border-right: 1px solid #4a4a4a;
  border-left: 1px solid black;
  }

Проходя, мы затем должны выставить правила в пределах нашего навигационного меню, в частности ссылкам.

#nav li a {
  color: #e3e3e3;
  z-index: 2;
  position: relative;
  cursor: pointer;
  float: left;
  font-size: 30px;
  font-family: helvetica, arial, sans-serif;
  text-decoration: none;
  padding: 30px 45px;
  width: 100%;
}

И не помешало бы тегам ul и li указать отступы

ul, li { 
  margin: 0; padding: 0; 
  } 

Последний шаг:

#blob { 
  border-right: 1px solid #0059ec; 
  border-left: 1px solid #0059ec; 
  position: absolute; 
  top: 0; 
  z-index : 1; 
  background: #0b2b61; 
  background: -moz-linear-gradient(top, #0b2b61, #1153c0); 
  background: -webkit-gradient(linear, left top,
 left bottombottom, from(#0b2b61), to(#1153c0)); 
  -moz-border-radius: 4px; 
  -webkit-border-radius: 4px; 
  -moz-box-shadow: 2px 3px 10px #011331; 
  -webkit-box-shadow: 2px 3px 10px #011331; 
  }

Ну вот и всё наше меню готово.



Больше информации читайте по теме:



Оценить статью:

Оценивая статью, Вы подсказываете нам насколько данная информация стала полезной именно для Вас. Мы ожидаем, прежде всего, оценку доступности материала для понимания и простоты его изложения. Дополнительные комментари, вопросы, дополнения и замечания Вы можете указать на странице От Вас

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Сантехник срочно
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок