Медиа запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Их используются в тех случаях, когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Иными словами, это конструкции, которые позволяют определять какие стили необходимо использовать на веб-странице, а какие нет на основании определённых условий.

Недавно один из подписчиков на моём YouTube канале попросил дать код выпадающего меню, который я использовал при создании своего блога на Blogger (https://dnikweb.blogspot.com/). Это меню реализовано на HTML и CSS. Думаю, что внести нужные правки в этот код вам не составит труда и вы сможете настроить красивое выпадающее меню на любом своём сайте.

Код CSS:

#navigation { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#0091d6; }
#navigation ul { left: -9999px; position: absolute; top: -9999px; z-index: 9; }
#navigation li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 145px; }
#navigation li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color:#0091d6; }
#navigation li a:hover{ background-color:#0091d6; }@-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }
#navigation li > a:hover { -moz-animation-name: animation1; -

moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#navigation li:hover > a { z-index: 4; }
#navigation li:hover ul.sub-menu { padding: 0; left: 0; top: 35px; width: 200px; }
#navigation ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }
#navigation ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#0091d6; }
#navigation ul li a:hover{ background:#067ece; }@-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }@-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } }
#navigation li:hover ul li { -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
#navigation li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; }
#navigation li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; }
#navigation li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }
#navigation li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; }
#navigation li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
#navigation li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; }
#navigation li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }
#navigation li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }

Код HTML:

<ul id='navigation'>
<li><a href='https://d-nik.pro'>Главная</a></li>
<li><a href='#' class="disabled">Joomla!</a>
<ul class='sub-menu'>
<li><a href='#'>Руководство Joomla! 3</a></li>
<li><a href='#'>Руководство Joomla! 4</a></li>
<li><a href='#'>Руководство VirtueMart</a></li>
<li><a href='#'>Расширения Joomla!</a></li>
<li><a href='#'>Joomla! Программирование</a></li>
</ul>
</li>
<li><a href='#' class="disabled">Веб-разработка</a>
<ul class='sub-menu'>
<li><a href='#'>Заметки по HTML и CSS</a></li>
<li><a href='#'>Заметки по Javascript</a></li>
<li><a href='#'>Заметки по PHP</a></li>
<li><a href='#'>Заметки по MySQL</a></li>
<li><a href='#'>Заметки по Bootstrap</a></li>
</ul>
</li>
<li><a href='#' class="disabled">Веб-дизайн</a>
<ul class='sub-menu'>
<li><a href='#'>Adobe Photoshop</a></li>
<li><a href='#'>Картинки и иконки</a></li>
</ul>
</li>
<li><a href='#'>Офис</a>
<ul class='sub-menu'>
<li><a href='#'>MS Word</a></li>
<li><a href='#'>MS Excel</a></li>
</ul>
</li>
<li><a href='#' target="_blank">Видео уроки</a></li>
</ul>

Почта в OpenServer

Здравствуйте друзья.

В этом уроке я покажу вам как настроить почту в OpenServer.

Дело в том, что когда мы тестируем сайт на локальном сервере, и пытаемся отправить письмо через форму обратной связи, то на почту сайта (нужный нам E-Mail) письма не приходят.

Такая же ситуация, когда мы пытаемся реализовать отправку почты в PHP. На реальный Email почта не приходит.

По умолчанию, в Google с целью обеспечить максимальную безопасность аккаунта, доступ сторонних приложений отключен. А также, в настройках пересылки отключен протокол IMAP (доступ к Gmail других приложений по этому протоколу).

Код JavaScript:

<SCRIPT LANGUAGE="JavaScript">
	var lat=new Array("q","w","e","r","t","y","u","i","o","p","[","]","a","s","d","f","g","h","j","k","l",";","'","z","x","c","v","b","n","m",",",".","/");
	var cyr=new Array("й","ц","у","к","е","н","г","ш","щ","з","х","ъ","ф","ы","в","а","п","р","о","л","д","ж","э","я","ч","с","м","и","т","ь","б","ю",".");

	var latcap=new Array("Q","W","E","R","T","Y","U","I","O","P","{","}","A","S","D","F","G","H","J","K","L",":","'","Z","X","C","V","B","N","M","<",">","?","#","$","^","&",'@');
	var cyrcap=new Array("Й","Ц","У","К","Е","Н","Г","Ш","Щ","З","Х","Ъ","Ф","Ы","В","А","П","Р","О","Л","Д","Ж","Э","Я","Ч","С","М","И","Т","Ь","Б","Ю",",","№",";",":","?",'"');

	function translate1(tex)
	{
		var buf=tex;
		var i;
		for (i=0;i<latcap.length;i++)
			{
			if (tex.charCodeAt(0) < 128)
				buf=replace(buf,latcap[i],cyrcap[i],1,0);
			else
				buf=replace(buf,cyrcap[i],latcap[i],1,0);
			}

		for (i=0;i<lat.length;i++)
			{
			if (tex.charCodeAt(0) < 128)
				buf=replace(buf,lat[i],cyr[i],1,0);
			else
				buf=replace(buf,cyr[i],lat[i],1,0);
			}

		tex=buf;
		return tex;
		}

		function replace(target,oldTerm,newTerm,caseSens,wordOnly) {

			var work = target;
			var ind = 0;
			var next = 0;

			if (!caseSens) {
				oldTerm = oldTerm.toLowerCase();
				work = target.toLowerCase();
			}

			while ((ind = work.indexOf(oldTerm,next)) >= 0) {
				if (wordOnly) {
				var before = ind - 1;
				var after = ind + oldTerm.length;
				if (!(space(work.charAt(before)) && space(work.charAt(after)))) {
					next = ind + oldTerm.length;
					continue;
				}
				}
				target = target.substring(0,ind) + newTerm +
				target.substring(ind+oldTerm.length,target.length);
				work = work.substring(0,ind) + newTerm +
				work.substring(ind+oldTerm.length,work.length);
				next = ind + newTerm.length;
				if (next >= work.length) { break; }
			}

			return target;

		}

</SCRIPT>

Форма:

<FORM METHOD="POST">
			<p><textarea style="width:100%;" name="text2" cols="20" rows="10" wrap="virtual"></textarea></p>
			<p><input type="button" class="btn btn-success" value="Конвертировать" onclick="document.forms[0].text2.value=translate1(document.forms[0].text2.value);">
			<input type="button" class="btn btn-danger" value="Очистить" onclick="document.forms[0].text2.value='';"></p>
		</FORM>

Наши рекомендации

Сollaborator

Hosting Ukraine

АВТОРИЗАЦИЯ