КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Выпадающее меню на чистом CSS

Всем привет :) Давайте-ка сделаем выпадающее меню безо всяких там скриптов на чистом css + будем по клику на разделах подгружать контент из файлов методом load() библиотеки jQuery. итак, почнэмо. Делаем ненумерованый список ul в блоке nav (HTML5), и в тег li после ссылки мы ещё вложим один список ul. Для примера я сделал только один li вложеным, можете если нужно по тому же принципу делать хоть все) И в этом списке тож один li будет содержать ul-список.
<li>
  <a>Статьи</a>
  <ul>
    <li class="html"><a>HTML</a></li>
    <li class="css"><a>CSS</a></li>
    <li class="php"><a>PHP</a></li>
    <li>
      <a>jQuery</a>
      <ul>
        <li class="jquery"><a>jQuery UI</a></li>
        <li class="ajax"><a>Ajax</a></li>
      </ul>
    </li>
  </ul>
</li>
Теперь напишем стили:
nav ul{
  display: inline-table;
  position: relative;
}

nav ul ul{display: none;}

nav ul li:hover > ul{display: block;}

nav ul li{float: left;}

nav ul li a{
  display: block;
  padding: 0px 27px;
}

nav ul ul{
  position: absolute;
  top: 100%;
}

nav ul ul li{
  float: none;
  position: relative;
}

nav ul ul ul{
  position: absolute;
  top: 0; left: 100%;
}
Спецом убрал все цвета, отступы и прочее чтобы было яснее. inline-table для nav ul делаем для того чтобы блок nav занимал ширину текста и отступов, а не растягивался на всю ширину экрана. Чтоб можно было позиционировать вложенные списки, даём nav ul position:relative. Изначально вложенные списки скрыты (display:none), при наведении на элемент списка nav ul li дочернему элементу ul присуждаем почётное звание display:block. Position: absolute и отступ сверху 100% чтобы элемент выпал из общей картины и разместился точно под элементом списка li. И потом li этого списка (скрытого) точно таким же макаром даём position: relative, а ul внутри него position: absolute; top: 0; left: 100%; чтоб сдвинуть его влево на всю его ширину.. Можно рисовать цвета, радиусы и отступы как угодно, только не трогайте нулевой padding:
nav ul li a{padding: 0px 27px;}
С этим разобрались, теперь при клике на списке будем подгружать контент из файлов в блок header. Пишем простенький jQuery-скрипт:
$(function(){
  $('header').load('content/php.php');
  $('body').on('click','ul li', function(){
    var linkname = $(this).attr('class');
    var link     = 'content/'+linkname+'.php';
     $('header').load(link);
  });
});
Создадим папку content, в которой будут лежать наши файлы. Изначально грузим в header содержимое файла php.html. Составляем запрос к серверу на файлы при клике на ul li. Я дал каждому элементу списка класс, совпадающий с названием файла, это нам понадобится для того чтобы определить ссылку на запрашиваемый файл: просто получаем аттрибут класс и формируем ссылку:
var link = 'content/'+linkname+'.php';
после чего грузим контент выбраного файла в блок header:
$('header').load(link);
Для того чтобы вы видели, что можно в подгружаемых файлах выполнять скрипты, текст "Всё прошло удачно" выведен через метод text() jQuery:
<h2 class="h2"></h2>
<script>
  $('.h2').text('всё прошло удачно');
</script>
И выполняется также PHP:
$start = microtime(true);
$time = microtime(true) - $start;
  echo "скрипт выполнялся: $time";
Изначально когда были файлы в формате HTML, PHP код не работал.. Код в сапогах, сказочный персонаж программистов :) Крепких вам нервов с этим со всем.
2015.04.20 224

Программисты на работе общаются двумя фразами: "непонятно" и "вроде работает".
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика