Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 38
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

menyПривіт всім відвідувачам Zura – Blog, сьогодні до вашої уваги ще один корисний елемент, який може стати в нагоді для одного з ваших проектів, це красиве горизонтальне меню, написане на стилях CSS.

Публікація які стосувались меню викладалась раніше, правда ще 2014 році, то горизонтальне меню також відображалось за рахунко стилів  CSS, але якщо меню в цій публікації, рівняти з тим меню, про яке  говорилось в одній з минулих публікацій.

До речі назва того меню “buttonize.min.css”, то виглядає цей “buttonize.min.css” таким собі навіть і простеньким тяжко назвати порівняно з цим горизонтальним меню, можна навіть і сказати що ніяким.

Викладалась тоді публікація про горизонтальне меню, з назвою “buttonize.min.css”, і викладалась саме тоді, коли лише починав знайомитись з веб дизайном, зрозуміло що багато тоді варіантів в мене не було, мета в мене була навчитись додавати таке меню до свого тестового сайту, і в випадку успіху, все описати яким чином додається цей елемент.

Нещодавно вирішив напрямок публікацій знову зорієнтувати на свій тестовий сайт, адже на ньому протестував вже багато різних корисних скриптів, і різних цікавих елементів, але публікації про ці елементи не викладались мною.

meny2

meny3

Причини різні, основна це “букси” яким я приділяв майже весь вільний час, хоча і нудно на “буксах”, але вони приносили дохід, і до речі доволі таки не поганий, трошки менший як з реклами, але дохід, правда працювати потрібно, робота то однотипна, не тяжка, хоча і нудна, про те як є дохід.

Пропали зараз “букси”, говорять тимчасово, весною все відновиться, хоча тим самим тепер появився час на публікації, майже не дивлюсь я телевізор, едині канали якими цікавився це “Футбол”, на жаль на них оператор підняв вже ціну, тепер вже шістдесять гривень в місяць виходить, з такою ціною хай йдуть “в широкую”, я тепер спробую варіант з кардшарінгом.

Зараз безліч в неті можна знайти сайти, де нададуть таку можливість, а ціни то просто смішні за шарінг, правда більшість тепер сучасне обладнання вимагають, це тюнер з підтримкою інтернет зєднання, вартість коло девяносто зелених, через комп уже ніхто майже не підключається, можливо до весни, я щось придумаю.

До речі в кого тарілка, і користується послугами супутникових провайдерів, “махніть рукою”, колись вартість “шарінгу” була майже такою як вартість провайдера “Viasat”, маю на увазі місячну плату, каналів можливо на шарінгу було більше отримати, але по корисності, навряд чи.

А коштів, щоб підключитись до “шарінгу”, потрібно було витратити чи мало, інтернет швидкість тоді було кілобайтною, тому через нет не проходило, ну хіба як платити за високу швидкість, але плата тоді хоча б за швидкість пять мегабіт була такою, що набагато дешевше виходило навіть взяти самий дорогий пакет від провайдера.

Залишалось вибирати інший варіант, з двома тюнерами, їх потрібно було переробляти, а за це лишні сто “баксів” викидати, в цілому не дуже вигідний тоді був цей спосіб, а зараз в мережі таких хто надає таку послугу як кардшарінг, безліч появилось, хоча навіть і без шарінгу в онлайні тепер можна також “кучу” каналів передивлятись.

Тяжко зрозуміти власників “Екстра тв” і  “Viasat”, вони що ситуацію не знають, розраховувати тільки на “темну” масу користувачів, це ті кому ці всі “хитрощі” не відомі, ну таке, (жираф большой ему видней), але за шістдесять гривників в місяць, за два канали, це занадто вже багато.

Знову я відхилився від основної теми, отож часу в мене зараз на веб дизайн появилось багато, точніше вільного появилось, а його то потрібно на щось витрачати, веб дизайн прийнятний для мене варіант, нікому поки що не розробляю нічого, і щоб не втрачати навиків, вирішив пошукати якусь не погану “менюшку”, для тестового сайту.

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

Потрібно всього то коди з стилів CSS, і блок <div>, з індентифікатором який зєднює стилі, підігнати під дизайн свого сайту, і меню вже є в наявності. Що тут сказати на вид меню набагато краще за попереднє, мені дуже сподобалось, як найду можливісь посидіти, то й на Zura – Blog його впаяю.

Ну і далі вже про саме меню, особливо мені сподобався вигляд, це підменю, дуже оригінальне, при наведенні курсора миші на кнопку, випадає у вигляді холітаючої (підвіски), оригінально дивиться, і додати таке меню до свого проекту дуже просто.

Ітак я звісно що буду орієнтуватись по своєму тестовому сайті, спочатку правда викладу оригінальний код, а потім код який буде вже “підігнаний” під мій тестовий сайт, отож оригінальний код, це код який я скопіював і вставив в новий документ.

Та в принципі чого я буду “тормозити”, ось внизу посилання на сторінку від самих авторів меню, а на сторінці коди від авторів, і вигляд меню, так що оригінальні коди самі зможите отримати.

http://codepen.io/sethabbott/pen/cewzF

meny4

до речі там я ще пару подібних “штучок” знайшов, так що можливо щось корисне від них також ще  зявиться на Zura — Blog, отож це меню також має назву, називається “CSS Swinging Panel Menu”, переходите за посиланням вище, вставляєте в верхню пошукову панель браузера, і клацаєте на іконку “лупа”, вона означає пошук.

Зверніть увагу, в верхній панелі крім пошуку в кожному браузері, присутня також можливісь надати пошук через одну з пошукових систем, а вони то якраз видають похожі варіанти, і якщо навіть знаходять той сайт, то сторінку рідко, тому це посилання шукаєте тільки через пошук браузера, (іконка у вигляді лупи) там якраз адреса, яка точно вас виведе на ту сторінку.

Якщо просто перейти на цей сайт, тоді знайти на ньому сторінку з цим меню буде тяжко, по перше вимагають реєстрацію, можливо щоб скачувати “исходник”, але на сайті бачу і коди викладені також, так що можна обходитись без “исходников”.

Отож, якщо вас не влаштовує код який знаходиться на zura – blog, то на сторінці авторів меню той самий, запускаєте редактор щоб створити новий документ з розширенням html, або і іншим розширенням, можливо ваші сторінки працюють на рнр, хоча для тестування коду звісно що варто виставити розширення html, для чого ще й локальний сервер запускати, щоб тільки протестувати код.

І в документі, звичайно якщо для тестування, тоді коди стилей CSS і блок “div” з індентифікатором, доцільніше додавати на одну сторінку, потім якщо тестування пройде успішно, створюєте окреми файл для стилей CSS.


Код  сторінки з горизонтальним меню.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zura - blog | meny</title>
<style>
	* {
  	margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		padding: 30px;
		font-family: "Helvetica Neue", helvetica, arial;
		background: url('вказується фон сторінки, якщо у вас свій фон то можите видалити цей рядок');
	}

	#container {
		position: relative;
		width: 500px;
	}

	#container:after {
		content: "";
		display: block;
		clear: both;
		height: 0;
	}

	#menu {
		position: relative;
		float: left;
		width: 100%;
		padding: 0 20px;
		border-radius: 3px;
		box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
		background: #ccc;
	}

	#menu, #menu ul {
		list-style: none;
	}

	#menu > li {
		float: left;
		position: relative;
		border-right: 1px solid rgba(0,0,0,.1);
		box-shadow: 1px 0 0 rgba(255,255,255,.25);
		perspective: 1000px;

	}

	#menu > li:first-child {
		border-left: 1px solid rgba(255,255,255,.25);
		box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
	}

	#menu a {
		display: block;
		position: relative;
		z-index: 10;
		padding: 13px 20px 13px 20px;
		text-decoration: none;
		color: rgba(75,75,75,1);
		line-height: 1;
		font-weight: 600;
		font-size: 12px;
		letter-spacing: -.05em;
		background: transparent;
		text-shadow: 0 1px 1px rgba(255,255,255,.9);
		transition: all .25s ease-in-out;

	}

	#menu > li:hover > a {
		background: #333;
		color: rgba(0,223,252,1);
		text-shadow: none;
	}

	#menu li ul  {
		position: absolute;
		left: 0;
		z-index: 1;
		width: 200px;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		background: transparent;
		overflow: hidden;
		transform-origin: 50% 0%;
	}

	#menu li:hover ul {

		padding: 15px 0;
		background: #333;
		opacity: 1;
		visibility: visible;
		box-shadow: 1px 1px 7px rgba(0,0,0,.5);
		animation-name: swingdown;
		animation-duration: 1s;
		animation-timing-function: ease;

	}

	@keyframes swingdown {
		0% {
			opacity: .99999;
			transform: rotateX(90deg);
		}

		30% {
			transform: rotateX(-20deg) rotateY(5deg);
			animation-timing-function: ease-in-out;
		}

		65% {
			transform: rotateX(20deg) rotateY(-3deg);
			animation-timing-function: ease-in-out;
		}

		100% {
			transform: rotateX(0);
			animation-timing-function: ease-in-out;
		}
	}

	#menu li li a {
		padding-left: 15px;
		font-weight: 400;
		color: #ddd;
		text-shadow: none;
		border-top: dotted 1px transparent;
		border-bottom: dotted 1px transparent;
		transition: all .15s linear;
	}

	#menu li li a:hover {
		color: rgba(0,223,252,1);
		border-top: dotted 1px rgba(255,255,255,.15);
		border-bottom: dotted 1px rgba(255,255,255,.15);
		background: rgba(0,223,252,.02);
	}</style>
</head>

<body>
<div id="container">
<ul id="menu">
  <li><a href="#">Головна</a>
		<ul>
			<li><a href="#">Сторінка 1</a></li>
			<li><a href="#">Сторінка 2</a></li>
			<li><a href="#">Сторінка 3</a></li>
		</ul>
	</li>
	<li><a href="#">Портфоліо</a>
		<ul>
			<li><a href="#">Сторінка 1</a></li>
			<li><a href="#">Сторінка 2</a></li>
			<li><a href="#">Сторінка 3</a></li>
			<li><a href="#">Сторінка 4</a></li>
			<li><a href="#">Сторінка 5</a></li>
			<li><a href="#">Сторінка 6</a></li>
		</ul>
	</li>
	<li><a href="#">Клієнти</a>
		<ul>
			<li><a href="#">Сторінка 1</a></li>
			<li><a href="#">Сторінка 2</a></li>
			<li><a href="#">Сторінка 3</a></li>
		</ul>
	</li>
	<li><a href="#">Контакти</a>
		<ul>
			<li><a href="#">Сторінка 1</a></li>
			<li><a href="#">Сторінка 2</a></li>
			<li><a href="#">Сторінка 3</a></li>
		</ul>
	</li>
	<li><a href="#">Супровід</a></li>
</ul>
</div>
</body>
</html>

user_97

Перегляд прикладу меню


Ось сам код вище, правда вже з готовою сторінкою, сторінка повністю робоча, “Перегляд прикладу меню” — клацнувши на текст, появиться демонстрація такого меню, можна подивитись як виглядає меню, ну і  роздивляючись код авторів меню,  я побачив в ньому посилання на інший ресурс.

 background:url(‘http://subtlepatterns.com/patterns/white_carbonfiber.png’);

скоріш за все призначене для фону сторінки, перейду гляну, і справді по центру, маленький майже не замітний квадратик в один піксель, ну що ж, лишається скопіювати цей квадратик і зберегти файл з назвою і розширенням “white_carbonfiber.png”.

meny1

white_carbonfiber.png

Саме цей мікроскопічний  “квадратик” відображає фон сторінки, фон до речі мені приглянувся, вирішив застосувати такий фон для свого тестового сайту, у вас якщо свій фон в наявності то, в принципі в мому коді на цій сторінці його не буде вже, оскільки посилання на сторонній ресурс я вже видалив, але якщо у вас буде код з сайту авторів меню, то зверніть увагу.

На цей  рядок у коді сторінки

background: url(‘http://subtlepatterns.com/patterns/white_carbonfiber.png’);

адже саме цей рядок вказує на посилання на сторінку сайту “subtlepatterns.com”.

Вам воно на вашому сайті буде лишнє, якщо фон сподобався, тоді перейдіть на сторінку сайту “subtlepatterns.com”, скопіюйте картинку мікроскопічний ледь замітний “квадратик”, знаходиться на сторінці, в центрі.

Вигляд у мікроскопічного квадратика такий що ледь замітно, збережіть в себе цю мікроскопічну картинку, і вкажіть в кодах на сторінці вашого сайту адресу на файл з назвою “white_carbonfiber.png”, в такому разі у вас появиться такий самий фон, правда буде вже відображатись без посилання на сторінку сайту “subtlepatterns.com”.

В іншому випадку, фон може відображатись тільки за наявності посилання на сторінку сайту “subtlepatterns.com”, більшість з вас знають що стороннє посилання на чийсь сайт, зовсім не потрібне.

Ну що ж далі залишається мені вже вказати, як додати це меню до вашого сайту:

Зрозуміло, що ваш сайт не буде складатись з одної сторінки, тому зовсім не правильно буде для кожної сторінки прописувати код стилей CSS, тому для цього меню створюємо окремо файл з розшиенням CSS.

Де ви будете розміщувати файл, чи в кореневій папці сайту, чи в окремій, призначеній для зберігання файлів з розширенням  CSS, це все на ваш розсуд, але щоб меню відображалось на сторінках вашого сайту, на файл  потрібно правильно  вказати посилання.

В файлі повинен знаходитись тільки код стилей  CSS, це все що знаходиться в середині тегів <style></style>, ці рядки стосуються стилей CSS, створюєте окремий файл з розширенням CSS, вставляєте ці рядки коду, і на кожній сторінці прописуєте лінк.


Код стилей CSS

<style>
    * {
    margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        padding: 30px;
        font-family: "Helvetica Neue", helvetica, arial;
        background: url('');
    }

    #container {
        position: relative;
        width: 940px;
    }

    #container:after {
        content: "";
        display: block;
        clear: both;
        height: 0;
    }

    #menu {
        position: relative;
        float: left;
        width: 100%;
        padding: 0 20px;
        border-radius: 3px;
        box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
        background: #ccc;
    }

    #menu, #menu ul {
        list-style: none;
    }

    #menu > li {
        float: left;
        position: relative;
        border-right: 1px solid rgba(0,0,0,.1);
        box-shadow: 1px 0 0 rgba(255,255,255,.25);
        perspective: 1000px;

    }

    #menu > li:first-child {
        border-left: 1px solid rgba(255,255,255,.25);
        box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
    }

    #menu a {
        display: block;
        position: relative;
        z-index: 10;
        padding: 13px 20px 13px 20px;
        text-decoration: none;
        color: rgba(75,75,75,1);
        line-height: 1;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: -.05em;
        background: transparent;
        text-shadow: 0 1px 1px rgba(255,255,255,.9);
        transition: all .25s ease-in-out;

    }

    #menu > li:hover > a {
        background: #333;
        color: rgba(0,223,252,1);
        text-shadow: none;
    }

    #menu li ul  {
        position: absolute;
        left: 0;
        z-index: 1;
        width: 200px;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        background: transparent;
        overflow: hidden;
        transform-origin: 50% 0%;
    }

    #menu li:hover ul {

        padding: 15px 0;
        background: #333;
        opacity: 1;
        visibility: visible;
        box-shadow: 1px 1px 7px rgba(0,0,0,.5);
        animation-name: swingdown;
        animation-duration: 1s;
        animation-timing-function: ease;

    }

    @keyframes swingdown {
        0% {
            opacity: .99999;
            transform: rotateX(90deg);
        }

        30% {
            transform: rotateX(-20deg) rotateY(5deg);
            animation-timing-function: ease-in-out;
        }

        65% {
            transform: rotateX(20deg) rotateY(-3deg);
            animation-timing-function: ease-in-out;
        }

        100% {
            transform: rotateX(0);
            animation-timing-function: ease-in-out;
        }
    }

    #menu li li a {
        padding-left: 15px;
        font-weight: 400;
        color: #ddd;
        text-shadow: none;
        border-top: dotted 1px transparent;
        border-bottom: dotted 1px transparent;
        transition: all .15s linear;
    }

    #menu li li a:hover {
        color: rgba(0,223,252,1);
        border-top: dotted 1px rgba(255,255,255,.15);
        border-bottom: dotted 1px rgba(255,255,255,.15);
        background: rgba(0,223,252,.02);
    }</style>

 width: 940px; — шістнадцятий рядок, вказується ширина меню, виставляєте свою міняючи цифри.

 

<link rel=”stylesheet” type=”text/css” href=”css/style2.css”>

 

 

Для прикладу вище, це лінк з мого тестового сайту, отож зверніть увагу в коді на слово “href=” — далі вказується адреса, де знаходиться файл з кодом стилей CSS, в цьому рядку “css/style2.css”, вказана папка яка називається “css”, а в ній назва файлу “style2.css”.

 

Щоб це меню відображалось на кожній сторінці вашого сайту, потрібно на кожній сторінці правилно вказати посилання на цей файл.

 

Далі блок <div> з індентифікатором id=”container”, весь цей блок від <div> до </div> вставляєте в то місце, в кодах сторінок вашого сайту, або міняєте коди, де у вас повинно знаходитись горизонтальне меню, і все готово.

 


 

Код блок <div id=”container”>

<div id="container">
<ul id="menu">
  <li><a href="#">Головна</a>
        <ul>
            <li><a href="#">Сторінка 1</a></li>
            <li><a href="#">Сторінка 2</a></li>
            <li><a href="#">Сторінка 3</a></li>
        </ul>
    </li>
    <li><a href="#">Портфоліо</a>
        <ul>
            <li><a href="#">Сторінка 1</a></li>
            <li><a href="#">Сторінка 2</a></li>
            <li><a href="#">Сторінка 3</a></li>
            <li><a href="#">Сторінка 4</a></li>
            <li><a href="#">Сторінка 5</a></li>
            <li><a href="#">Сторінка 6</a></li>
        </ul>
    </li>
    <li><a href="#">Клієнти</a>
        <ul>
            <li><a href="#">Сторінка 1</a></li>
            <li><a href="#">Сторінка 2</a></li>
            <li><a href="#">Сторінка 3</a></li>
        </ul>
    </li>
    <li><a href="#">Контакти</a>
        <ul>
            <li><a href="#">Сторінка 1</a></li>
            <li><a href="#">Сторінка 2</a></li>
            <li><a href="#">Сторінка 3</a></li>
        </ul>
    </li>
    <li><a href="#">Супровід</a></li>
</ul>
</div>

Звичайно, прийдеться трошки посидіти над цим всім, адже зміни потрібно робити для кожної сторінки, але по іншому не вийде.

В принципі закругляюсь, оскільки по цьому горизонтальному меню все вказано, а надалі, якщо знайду якийсь цікавий елемент, то після всіх успішних тестувань, обовязково зявиться публікація по такому елементу.

На цьому все, до зустрічі !

Leave a Reply

Your email address will not be published. Required fields are marked *