Товаров: 0 (0р.)

Меню из картинок css: Пример простого меню из картинок с CSS анимацией

Содержание

Пример простого меню из картинок с CSS анимацией

Продолжая изучать свойства анимации CSS3, решил применить полученные знания на практике — сделать какое-нибудь простенькое анимированное меню. В итоге получилось довольно симпатичное и очень простое меню с использованием иконок. Смысл его в том, что при наведении курсора картинка и тест плавно увеличиваются, как бы приближаясь к посетителю, анимация выполнена с помощью CSS3.
  Сразу смотрим:
DEMO
  Для реализации данного меню у себя на сайте или в блоге не нужно ничего дополнительно подключать, достаточно лишь добавить не большой HTML и короткий CSS коды. В Blogger-блоге можно использовать для этих целей стандартный гаджет HTML/JavaScript.
  Итак, по кодам. HTML для меню выглядит так:

<div>
 <div>
  <a href=»#»><img src=»…/image/home.png«>Главная</a>
  <a href=»#»><img src=»…/image/news.png«>Новости</a>
  <a href=»#»><img src=»

. ../image/photo.png«>Фотографии</a>
  <a href=»#»><img src=»…/image/music.png«>Музыка</a>
  <a href=»#»><img src=»…/image/docs.png«>Документы</a>
  <a href=»#»><img src=»…/image/fav.png«>Избранное</a>
 </div>
</div>

И стили CSS:

.macmenu {
 height: 128px; /*высота общего блока*/
}
.button {
 margin: 0 auto; /*выравнивание блока по центру*/
 width: 720px; /*ширина всего блока с меню*/
}
.button a img,
.button a {
 display: block;
 float: left;

 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 height: 70px;
 width: 70px;
}
.button a {
 margin: 5px 15px;
 text-align: center;
 color: #fff;
 font: normal normal 10px Verdana;
 text-decoration: none;
 word-wrap: normal; /*запрещает автоматически разрывать слова на перенос*/
}
.macmenu a:hover img {
 margin-left: -30%; /*смещает картинку левее, выравнивая ее по центру*/
 height: 128px;
 width: 128px;
}
.button a:hover {
 font: normal bold 14px Verdana;
}

Если меню нужно расположить вертикально, то CSS будет таким:

.macmenu {

 height: 720px; /*высота всего блока*/
}
.button {
 text-align: center;
 margin: 0 10px; /*внешние отступы*/
}
.button a img,
.button a {
 display: block;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 height: 70px;
 width: 70px;
}
.button a {
 margin: 15px 5px;
 text-align: center;
 color: #000;
 font: normal normal 10px Verdana;
 text-decoration: none;
 word-wrap: normal;
}
.macmenu a:hover img {
 margin-left: -30%;
 height: 128px;
 width: 128px;
}
.button a:hover {
 font: normal bold 14px Verdana;
 height: 128px; /*высота ссылки при наведении курсора*/
}


 Вот и все, размещаем и радуемся. Благодарю за внимание.

Анимированное меню для сайта — выпадающие картинки.

И так, для начала хотелось бы толкнуть праздничную речь в честь 14 февраля.

Так как сегодня просто офигенски замечательный праздник, спешу поздравить Вас — мои дорогие друзья, пусть солнца луч коснется ваших глаз! Пусть у вас всегда будет счастье на душе и радость в глазах!

Любви вам, удачи — и всего самого наилучшего!

Я сегодня встал с самого утра , и сразу же приступил к записи очередного видеоурока, урок получился хороший и качественный. Будет на чем набить вам руку.

Поэтому обязательно его посмотрите. Из этого урока вы узнаете — как создать анимированное меню с выпадающими картинками.

Это меню смотрится очень стильно и оригинально, ну и плюс, я покажу вам, как надо менять внешний вид этого меню и сами картинки.

Смотреть ДЕМО-версию.

Видео урок «Создание анимированного меню с выпадающими картинками»

Для комфортного обучения вам понадобится скрипт меню, скачать его вы сможете по ссылке ниже, так как файлик маленький — размещаю его у себя на хостинге:

Прямая ссылка на скрипт меню

Обратите внимание, что ниже идут ссылки на скачивание урока в высоком качестве. Если вы будете скачивать урок к себе на компьютер — скрипт скачивать не надо! Он идет в архиве видеоурока.

Ссылка на видеоурок по установке меню в высоком разрешении:

Скачать с Летитбит

Всего вам хорошего, ОЧЕНЬ СКОРО мы встретимся снова.

Ваш Валентин — Серж!

Ах да, в честь праздничка мужикам подарок:

Смотреть здесь.

ЗЫ: девушкам тоже будет интересно взглянуть, жду впечатлений

Анимированное меню для WordPress

Добавлено от Александра

Вот как осуществить это в WordPress (показано на примере шаблона world_of_business_bue028).

Итак во первых берёте вот этот код (из index.html):

<div>
<ul>
<li><a>Players</a></li>
<li><a>Cameras</a></li>
<li><a>TVs</a></li>
<li><a>Screens</a></li>
<li><a>Tools</a></li>
<li><a>Phones</a></li>
<li><a>Printers</a></li>
</ul>
</div>
<mce:script src="sys/jquery-1.3.2.js" mce_src="sys/jquery-1.3.2.js" type="text/javascript"></mce:script>
<mce:script src="sys/fancy.js" mce_src="sys/fancy.js" type="text/javascript"></mce:script>

И вставляете этот код в файл header.php вашего шаблона сразу после открывающего тега <body>. Далее в этом же файле header.php в этой части кода

<div>
<div></div>
</div>

Оставляете только  <div></div> а остальное убираете. Далее прописываете вот эту строчку

<link rel="stylesheet" href="sys/fancy.css" type="text/css" charset="utf-8"/>

где-нибудь в <head> (я вставлял сразу после <head profile=»http://gmpg.org/xfn/11″>)

Всё, файл header.php сохраняете.

Далее открываете файл style.css. В нём находите следующее:

.Main
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}

И там меняете параметр top, тоесть будет так:

.Main
{
position: absolute;
width: 100%;
left: 0;
top: 50px;
}

Сохраняете файл style.css. Теперь закидываете папку sys (которую скачали с mega-css.com) в корень вашего сайта (вы можете закинуть его куда угодно, но тогда надо будет прописать путь к скриптам и файлу стилей)

Всё. Теперь всё готово. Настраиваете всё как говорит Сергей в видео и получаете рабочее меню.

Установка Меню на CMS MaxSite! Видео

Скачать видео по установке.

HTML+CSS меню с пиктограммами, объединяющими 2 картинки



У меня есть 2 вопроса (больше похоже на 1.5)

1) Как правильно было бы изменить меню на первой картинке, чтобы оно выглядело так же, как на второй? Поскольку я поместил и картинку, и текст в один и тот же тег <a> , у меня возникли проблемы с белой рамкой (значки 30x30px, вокруг них нет прозрачного пространства или чего-то еще) :

HTML:

<div>
    <div class= "main">

        <div>
            <a href="#"><img src="logo.png"></a>
        </div>

        <div> 
            <a href="#"><img src="stovyklae.png"><h3>stovykla</h3></a>
            <a href="#"><img src="klubase.png"><h3>klubas</h3></a>
            <a href="#"><img src="elparde.png"><h3>el. parduotuvė</h3></a>
            <a href="#"><img src="kontaktaie.png"><h3>kontaktai</h3></a>
        </div>

        <div>
            <a href="#"><img src="yttop.png"></a>
            <a href="#"><img src="ftop.png"></a>
        </div>

    </div>
</div>

CSS:

h3{
        display:inline-block;
        text-transform: uppercase;
        text-decoration: none;
        color: black;
        margin-left:10px;
        margin-right:10px;
        font-size:14px;

    }

.logoHeader{
        margin-left:15px;
        float:left;
        margin-bottom: 20px;
        margin-top:15px;
    }

    .socialIconsWrapHeader{

        float:right;
        margin-top:15px;
        margin-right:20px;
    }

    .socialIconsWrapHeader a{
        margin:0px 10px 0px 10px;
    }

    .menuPicHeader{
        float:left;
        margin:20px 0px 0px 130px;
        padding-left:10px;
    }

    .menuPicHeader a{   
        padding-top:20px;
        padding-bottom:2px;
    }

2) мне было интересно, что я должен использовать, чтобы получить текст на картинке, как показано здесь:

Должен ли я разрезать картинку пополам, взять немного

div и приклеить его к нижней части картинки, используя серую половину в качестве фона? Или как-то просто написать поверх <a> ?

HTML:

<div> 
    <a href="#"><img src="pic1.png"></a> 
    <a href="#"><img src="pic2.png"></a>
</div>

CSS:

.rightCol1{
    float:right;
    margin-right:30px;
    margin-top:10px;
}
html css image menu border
Поделиться Источник GytisK     23 июня 2014 в 13:06

3 ответа

  • Выпадающее меню со строками + картинки

    Я использую выпадающее меню , и я помещаю в него только строки, но я хочу, когда я нажимаю на панель действий в виджете выпадающего меню, что когда список вариантов падает, я вижу не только строки, но и картинки для каждого выбора, я пытался найти его, но я не нахожу что-то релевантное о том, как…

  • HTML CSS стиль меню UL

    Небольшой вопрос о том, как добиться некоторого стиля в меню HTML / CSS UL. У меня есть стандартное меню UL, но у меня есть некоторые проблемы с тем, чтобы понять, как добиться определенного внешнего вида стиля. Здесь показано меню UL в его нынешнем виде: http://jsfiddle.net/WMQqt / (HTML) <ul…


1

для второго

<div> 
    <a href="#"><img src="pic1.png"><span>your text</span></a> 
    <a href="#"><img src="pic2.png"><span>your text</span></a>
</div>

CSS:

.rightCol1{
    float:right;
    margin-right:30px;
    margin-top:10px;
}
.rightCol1 a {display:inline-block;position:relative;height:200px;width:100px;}
.rightCol1 a span {display:block;width:100px;height:70px;position:absolute;bottom:0;left:0;z-index:99;background:#333}

Поделиться budamivardi     23 июня 2014 в 13:11

Поделиться Geoffrey Burdett     23 июня 2014 в 13:26


0

Вы можете иметь больший контроль над позиционированием элементов, если установите для их родительского позиционирования значение ‘relative’, а затем установите для них абсолютное позиционирование. Это позволяет использовать верхнюю, левую или правую части для установки абсолютного положения дочерних объектов по отношению к их родительским объектам .

У меня не было возможности попробовать это, но что-то вроде этого должно сработать:

.menuPicHeader { position: relative; } 
.menuPicHeader a { position: absolute; top: 0; }

Поделиться AardvarkApostrophe     23 июня 2014 в 13:13

Похожие вопросы:


SlidingTabLayout только с пиктограммами

Следуя этому примеру, я смог создать SlidingTabLayout только с пиктограммами,но я хотел бы центрировать их. Нужно ли создавать пользовательское представление или есть другие решения? Любая помощь…


HTML CSS Меню Вкладок

Я работаю с Google Engine для класса, и у меня возник вопрос о css меню с вкладками. Я нашел учебник для меню с вкладками, вот ссылка на него, если это имеет значение: http://www.marcofolio.net/css/…


многоуровневое меню с css &html?

Я хочу создать многоуровневое меню с чистым css & html. положение меню должно контролироваться css. Кто-нибудь может мне помочь?


Выпадающее меню со строками + картинки

Я использую выпадающее меню , и я помещаю в него только строки, но я хочу, когда я нажимаю на панель действий в виджете выпадающего меню, что когда список вариантов падает, я вижу не только строки,…


HTML CSS стиль меню UL

Небольшой вопрос о том, как добиться некоторого стиля в меню HTML / CSS UL. У меня есть стандартное меню UL, но у меня есть некоторые проблемы с тем, чтобы понять, как добиться определенного…


Как сделать css-меню независимым от количества пунктов меню?

Я хочу, чтобы css-ширина меню была бы 100% родительского элемента. Но иногда меню состоит из 4 пунктов, иногда из 5 пунктов, и я хочу, чтобы меню было независимым от этого. Посмотрите картинки. 1…


CSS анимация меню с пиктограммами

Всем доброе утро. У меня есть небольшой проект, который я хотел бы сделать в CSS без JavaScript, если это возможно. Можно ли создать элемент, где при наведении курсора на родительский элемент рядом…


Выпадающее меню HTML + CSS

Пытаюсь попрактиковаться в создании скользящего вниз меню с html и css. Моя единственная проблема заключается в том, как элементы списка перекрываются с пунктом меню. Как заставить меню скользить за…


Мега выпадающее меню с пиктограммами

У меня есть мега выпадающее меню с большими значками против каждого пункта меню. Есть ли в меню BOLT опция URL, где я мог бы сохранить url этого значка и вывести это значение Img URL в цикле? main:…


HTML CSS округлое меню

Я ищу, но не могу найти, как создать такое округлое меню на изображении. Возможно ли это только с html и css? От 1 до 4 — это кнопки, любой подобный пример поможет.

10 бесплатных навигационных меню на HTML5 и CSS3

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

1. Элегантное и стильное темное меню на CSS3  
Горизонтальное меню, которое легко можно приспособить под ваши нужды. Это довольно шустрое адаптивное выпадающее CSS3 меню с иконками.


2. Креативное CSS3 меню с анимацией  
Действительно удачное меню на CSS3 с набором различных стилей и эффектов.

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

4. Плоское вертикальное меню бирюзового цвета
Это красивое боковое меню навигации — просто один образец из 50+ примеров CSS3 navigation menu с сайта css3menu.com, которые можно скачать бесплатно. Такое очаровательное навигационное меню нельзя было не включить в коллекцию.

5. Навигационное меню с вкладками
Ничего необычного. Это CSS3 меню навигации с вкладками (Tabbed Navigation) Легковесное меню с приятным дизайном, которое легко реализовывать.


6. Круговое меню CSS 3 (CSS3 Wheel Menu)
Уверен, вы уже встречали нечто подобное на других веб-проектах или на сайтах с примерами навигации. Тут вы можете бесплатно скачать исходники меню и создать свое фантастическое, креативное круговое меню.

7. CSS3 Slideout Menu
SlideOut menu с эффектами затухания картинок и анимации, создающими эффектные переходы.

8. Выпадающее меню на чистом CSS  
Экспериментируя с :target pseudo class вы можете создать чисто css выпадающее меню. Меню разработано полностью на CSS и HTML, никаких картинок или javascript. Сделано просто и подойдет для начинающих вебмастеров.

9. CSS 3D Dropdown Concept
Это 3D menu из серии: меню для сайта с использованием интересных анимационных эффектов.

Ролловер меню на CSS

Вот такое симпатичное ролловер-меню мы сейчас станем делать.

Если вы уже пытались что-то подобное изобразить в визуальном редакторе вроде Дримвьювера от Макромедии, то заметили, что там все построено на заковыристом Java-скрипте, и в коде это выглядит просто устрашающе.

Мы же используем всего лишь парочку картинок-заготовок, обычный немаркированный список и немножко css.

Для начала нарисуем две картинки:

Это две части одной закладки меню. Правая делается такой длинны, чтобы при выбранном размере шрифта, на картинке помещалось самое длинное слово из всего списка разделов. Например, «супермегакулфорумблинваще!».

Каждая из картинок состоит из двух частей, одна под другой. Верхняя часть — исходное состояние, нижняя — активная, при наведении мышки.

Принцип довольно простой и изящный: в листе стилей мы зададим разным состояниям различные координаты изображения.

То есть, картинка загружается вся целиком, но на странице мы изначально видим только верхнюю часть. Когда мы подводим к кнопке мышку, то как бы «выскакивает» нижняя часть.

Итак, картинки готовы. В листе стилей запишем следующий код:

#menu {
width: 860px;
height: 39px;
margin: 0 auto;
background: #69c;
font: 90% "Comic Sans MS", Verdana, Arial, sans-serif;
line-height: 1.8em;
clear: both;
}
#menu ul {
padding: 5px 10px 0 30px;
list-style: none;
}
#menu li {
display:inline;
}
#menu a {
float: left;
background: url(images/tableft.gif) no-repeat left top;
padding: 0 0 0 4px;
}
#menu a span {
float: left;
background: url(images/tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
color: #fff;
}
#menu a:hover span {
color: #FF9834;
}
#menu a:hover {
background-position: 0% -42px;
}
#menu a:hover span {
background-position: 100% -42px;
}
#menu li.active {
float: left;
color: #FF9834;
background: url(images/tableft.gif) no-repeat left top;
background-position: 0% -42px;
padding: 0 0 0 4px;
}
#menu li.active span {
float: left;
background: url(images/tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
background-position: 100% -42px;
}

Разберем запись подробно. Ширина блока меню 860 пикселей, высота 39 пикселей, авто-выравнивание по центру монитора, синий фон и очистка с обоих сторон, чтобы ни справа, ни слева больше ничего лишнего не вылезло.

Дальше зададим списку ul поля и запретим отображение маркеров.

Далее мы укажем пунктам списка li расположение «в линию», иначе по-умолчанию браузеры всегда складывают их в столбик.

А вот следующие два правила весьма интересны. В обоих указаны стили для отображения ссылок, но во втором появилось странное слово span. Зачем это?

Дело в том, что нам нужно привязать наши изображения кнопок к тэгам в виде фона. В данном случае тэг у нас один — <a>.

Привязывать фон можно только к стартовому тэгу. К </a> уже ничего не привяжешь.

Поэтому мы и ввели дополнительный тэг span. Его еще называют нейтральным, потому как он может быть использован везде и сам по себе не несет какой либо значимой нагрузки.

Замечу также, что этот тег не является блочным элементом. Не пытайтесь заменить им тэг div.

Таким образом, мы привязали первую картинку (как фон) к тэгу a, а вторую к span. Причем для первой указали расположение слева вверху и запретили ей повторяться, а второй — справа вверху, и тоже без повтора.

Поля тут тоже заданы не абы как. Сначала мы указали левой картинке отступить от левого края на 4 пиксела, то есть как раз на ширину картинки. Если этого не сделать, то правая картинка, которая заведомо шире, просто «съест» левую, потому что названия разделов у нас все-таки не очень длинные.

Что касается полей для правой картинки, то мы их задали такими, чтобы справа от имени раздела оставалось столько же пространства, сколько и слева (а иначе браузер «подожмет» слово под обрез). Вобщем экспериментируйте и увидите. 🙂

Для ссылок задали белый цвет (белый на зеленом — обожаю просто!). А для активных — оранжевый на белом.

Следующие два правила как раз приказывают нашим картинкам спрятать верх и показать низ при наведении на них мышкой. Сделано это при помощи позиционирования.

Для левой картинки мы указали позицию в 0% (то есть крайнее левое положение) и минус 42 пикселя. То есть мы просто «отняли» у нее верхнюю часть. А так как картинка изначально загружена на страницу полностью, то она и покажет нам нижнюю часть.

Для правой картинки мы указали, соответственно, 100% позицию (крайнюю справа) и тоже минус 42 пиксела.

Возникает вопрос: почему мы сразу не видим на странице целые картинки? А потому, что в самом начале для нашего блока менюшек мы задали высоту всего в 39 пикселей (можно и 42, но так как браузеры по разному считают отступы, то мы чуток перестраховались).

То есть, получилось что-то вроде окошка. Помните советские фильмы про Шерлока Холмса? Там в самом начале идут хитроумные титры в виде целого поля буковок? На них наводится черный трафарет с прорезями, и получаются осмысленные слова.

Вот примерно на таком же принципе сделано и наше меню. Все просто! 🙂

Два других правила мы написали для активного раздела. Это тоже понятно — активный раздел не должен быть ссылкой, но должен ясно показывать, что он в данный момент активен. То есть выглядеть так, словно на ссылку навели мышку.

Тут мы тоже приказываем картинкам хитро выглядывать нижней частью, но пристегнули их уже не к тэгам ссылок, а к тэгам строк списка — li.

Не забываем везде указывать обтекание слева — (float: left;). Иначе глюки неизбежны.

Вот вроде бы и все. Но IE все-таки браузер с характером, и наше красивое меню, как-то некрасиво искажает. 🙁 В данном уроке не видно, но вот на собранной целиком странице получалась эдакая щелка между меню и основным блоком.

Это как раз происходит потому, что IE (в отличие от других браузеров) по-своему высчитывает размеры полей и отступов. На такое безобразие хитрые верстальщики придумали не менее хитрый болт, называемый хаком.

То есть спецом для IE в листе стилей делается приписка (зачастую с указанием версии IE): «…сему поганцу показывать мою гениальную менюху вот так: (и тут дополнительное правило)…».

Такой хак можно вписать в основной лист стилей, а можно пристегнуть отдельным листом, дав на него соответствующую ссылку. Мы так и поступим, и пристегнем к странице еще один css, обозвав его просто ie.css. В нем мы запишем следующее:

#menu a span {
padding: 4px 20px 4px 10px;
}
#menu li.active span {
padding: 4px 20px 4px 10px;
}

Как видите, в отличие от основного листа, здесь мы указали нижнее поле на один пиксель меньше (4 вместо 5). Вот и вся трабла.

Ну и наконец код самой страницы (тут только менюха, все остальные, положенные для страницы тэги, опущены):

<div>
<ul>
<li><a href="#" title="Главная"><span>Главная</span></a></li>
<li><a href="#" title="Факты"><span>Факты</span></a></li>
<li><a href="#" title="Байки"><span>Байки</span></a></li>
<li><a href="#" title="Классика"><span>Классика</span></a></li>
<li><a href="#" title="О летучести"><span>О летучести</span></a></li>
</ul>
</div>

Enjoy! 🙂

UPD от 24.09.2018: Так как статья была написана в дремучем (по меркам Интернета) 2007 году, то по-сути стала уже неактуальна.

С тех пор многое изменилось. Уже никто не делает такие извращения с картинками и пр. Сейчас используют новое правило из арсенала CSS3 под названием border-radius:. Достаточно прописать вот такую простую строчку:

border-radius: 5px 5px 0 0;

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

3 простых и быстрых техники CSS для обрезки картинок

В этой статье мы расскажем вам о 3 быстрых и простых методах CSS, которые вы cможете использовать, чтобы показать только часть картинки на вашей страничке.

Все использованные здесь методы, фактически нуждаются только в паре строчек CSS кода. Однако, это не обрезание в прямом смысле этого слова (CSS пока не может сделать этого), мы просто скрываем и показываем только ту часть картинки, которую мы хотим увидеть.

Эти методики могут быть очень полезны, если вы хотите привести картинку к определенному размеру, то есть хотите создать, например, её превьюшку (уменьшенная копия изображения) в секции новостей или что-то подобное.

Техника 1 — использование отрицательных полей (

Negative Margins) Посмотреть пример
По этой технике картинку необходимо поместить в родительский элемент, в нашем случае, это параграф (тэг <p>) . Родительский абзац должен быть плавающим(floating) элементом (или с заданной шириной). Эта техника не будет работать на элементах с атрибутом «в полную ширину» (full width).

Затем мы задаем отрицательные поля для всех четырех сторон: верх(top), право(right), низ(bottom) и лево(left). Отрицательные поля определяют: насколько срезано в каждом направлении наше изображение, находящееся в родителе(параграфе). Получаем только часть от первоначальной картинки — обрезок. Затем, когда мы заменяем родительское свойство overflow на hidden, мы скрываем поля, которые находятся за нашим обрезком. Цель достигнута. Вам, правда, придется повозиться со значениями, чтобы по-настоящему почувствовать, как это работает.

Итак, HTML выглядит примерно так:

<p><a href=»#» ><img src=»img.jpg» alt=»css template» /></a></p>

И CSS:

.crop{

float:left;

margin:.5em 10px .5em 0;

overflow:hidden; /* this is important */

border:1px solid #ccc;

}

/* input values to crop the image: top, right, bottom, left */

.crop img{

        margin:-41px -156px -40px -30px;

}

Техника 2 — использование абсолютного позиционирования (

Absolute Positioning) Посмотреть пример

Если вам не охота использовать отрицательные поля, мы предлагаем использовать технику №2. Она включает в себя родителя (абзац), у которого определенные ширина и высота. У данного абзаца свойство позиционирование (position) задано как relative. Ширина и высота задают размеры отображаемого поля. А картинке, размещенной внутри абзаца, свойство позиционирования (position) задано как absolute. Потом мы можем с помощью свойств верх(top) и лево(left) располагать картинку, как захотим, в процессе определяя: какую часть изображения показывать, а какую — нет.

HTML идентичен коду из предыдущей техники:

<p><a href=»#» title=»»><img src=»img.jpg» alt=»» /></a></p>

и CSS:

.crop{

float:left;

margin:.5em 10px .5em 0;

overflow:hidden; /* this is important */

position:relative; /* this is important too */

border:1px solid #ccc;

width:200px;

height:120px;

}

.crop img{

position:absolute;

top:-40px;

left:-50px;

}

Техника 3 — использование свойства нарезки (

Clip Property) Посмотреть пример
Эта техника должна быть самой легкой, так как свойство нарезки (clip property) определяет часть элемента, которую надо показать. Это звучит, как совершенное решение, но есть одна загвоздка: резанный (clipped) элемент должен позиционироваться абсолютно. Чтоб была возможность использовать элемент, нам придется добавить дополнительный элемент, вычислить размер видимой области изображения, добавить этот размер родителю, пустить в ход родителя… Куча работы, не так ли?

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

Однако нельзя оставить не упомянутой свойство нарезки. И так снова код…

HTML:

<div><a href=»#» title=»»><img src=»img.jpg» alt=»css template» /></a></div>

Вот и CSS:

.crop{

float:left;

position:relative;

width:200px;

height:120px;

border:1px solid #ccc;

margin:.5em 10px .5em 0;

}

.crop img{

margin:0;

position:absolute;

top:-40px;

left:-50px;

clip:rect(40px 250px 160px 50px);

}

Заключение

Если вы будете внимательно просматривать примеры один за другим, вы заметите, что они абсолютно идентичны. Это еще раз доказывает, что есть множество путей для достижения одного и того же в CSS.

Что бы выбрал я для этого специфического эффекта?
Я бы использовал технику под номером 1 — отрицательные поля. Это простейшая и самая быстрая из всех вместе взятых. Плюс, когда вы захотите что-нибудь изменить, вам не придется менять родительские значения: просто измените отрицательные поля, и родительский элемент сам «приспособится».

Мы надеемся, что вам понравилась статья и вы готовы добавить её в закладки.)


Возможно, Вам будет интересно ↓↓↓

Как редактировать меню в Joomla

Меню – это важный модуль сайта Joomla, без которого сайт нельзя считать полноценным. Без меню пользователи не смогли бы сориентироваться на ресурсе, и не знали бы как перейти в другой раздел. Навигационное меню – это подобие карты сайта, которая аккуратно выложена на странице. Бывает различное меню: горизонтальное, вертикальное, всплывающее и т. д.

В данной статье мы разберем как создать тот или иной тип навигации и добавить его к себе на сайт Джумла.

Как добавить новый пункт меню

Начинать освоение настроек движка Джумла следует с самых азов. Создать новый пункт навигационного меню – это как раз одна из самых простых задач, которую очень легко осуществить. Чтобы изменить меню и любой другой модуль (скрыть, активировать или удалить его), вам необходимо зайти в админку движка. Для этого введите доменное имя вашего сайта, а в конце допишите /administrator. Потом введите данные для входа, которые вы указывали при установке Joomla.

После входа вы увидите, что в административной панели есть свое собственное меню. И в нем есть раздел под названием “Меню”. Перейдите в него. Перед вами выпадет всплывающее окно после наведения на “Менеджер меню”. Нажмите “Создать меню”. Этот пункт и нужен, чтобы добавить новый раздел навигации. Вам необходимо указать, как будет называться новый пункт меню, а также его тип. Учтите, что тип – это произвольное название, которое нужно скорее для вас, чем для самого движка. После указания данных, сохраните настройки.

Только что созданное меню Joomla пока что будет пустым. Вам нужно добавить хоть один пункт, чтобы наполнить модуль содержимым. Для этого пройдите в созданное вами меню и нажмите “Создать”, чтобы сгененировать новый пункт. Точно так же, как и при создании самого меню, вам необходимо прописать название и тип пункта. Не забудьте выбрать тип материала. Далее сохраняете внесенные изменения и пункт закрепляется за выбранным меню для Joomla. Теперь при наведение на раздел “Меню” во всплывающем окне появится еще одно наименование – это созданная вами только что навигация.

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

Дело в том, что горизонтальное и вертикальное меню для Joomla уже предустановлены в настройках. Просто эти элементы называются по-другому. Горизонтальное именуется, как главное, а вертикальное, как верхнее меню. Так что, чтобы добавить то же горизонтальное меню, необходимо просто наполнить этот модуль материалами и опубликовать на сайте. Учтите, что в некоторых версиях названия меню могут отличаться. Обычно, горизонтальное всегда указывается, как main menu, а вот вертикальное может именоваться, как меню пользователя.

Как сделать выпадающее меню

Чтобы у вас на сайте активировалось выпадающее меню, нужно лишь изменить настройки в админке. Для этого перейдите в модуль менюшки, у которой есть подпункты. Обычно выпадающие пункты активируют с горизонтальным главным меню. Итак, убедитесь, что у выбранной менюшки есть свои подпункты. Теперь перейдите в настройки и нажмите “Да” возле пункта “Показывать подпункты меню”. Этого действия вполне достаточно, чтобы модуль начал отображать выпадающее содержимое в виде кликабельных подпунктов. Выпадающее меню можно изменить, если вы скачаете другой модуль, либо попробуйте сделать это самостоятельно при помощи редактуры CSS.

Как скрыть меню

Иногда меню для Joomla необходимо сделать скрытым. Надобность скрыть какой-либо пункт или всю категорию возникает тогда, когда вы еще не закончили работу над разделом. Некоторые используют возможность скрыть меню для предоставления платного доступа только для посвященных. В общем, цели могут быть у всех разные, но способ реализации этой задачи один и тот же.

Чтобы скрыть всю менюшку или отдельные подпукнты, необходимо для начала их создать. Сделать это можно через упомянутый раздел “Меню” в админке. Все, что вам нужно сделать, чтобы скрыть содержимое меню – это активировать его, но не публиковать. То есть виртуально созданные категории и пункты уже заработают, но поскольку модуль вы не разместили на сайте, он отображаться не будет. Вот такой вот простой способ, как скрыть менюшку!

Как изменить шрифт менюшки

Шрифт во многом определяет оформление всего сайта. Если в менюшке будет некачественный, неразборчивый или неказистый шрифт, пользователи этого явно не оценят. Многие задаются вопросом, как изменить шрифт в Joomla, но не многие находят решение. А все потому, что в админке вы такой функции не найдете. Вам придется копаться в самом шаблоне.

Тема оформления сайта имеет определенный внешний вид, потому что так прописано в коде составляющих файлов. Стиль определяет файл формата CSS. Именно в нем прописан шрифт, и именно при помощи него вы сможете его отредактировать. Для начала вы должны добраться в коде до необходимого элемента. Рекомендуется установить в браузер расширение, которое позволит вам просматривать код страницы. В Гугл Хроме эта функция установлена по умолчанию.

Итак, находите код элемента меню сначала при помощи браузера. Далее переходите в админку Джумла в раздел “Расширения” и “Менеджер шаблонов”. Через эту вкладку вы сможете изменить CSS установленной темы оформления. Находите участок, ответственный за шрифт и прописываете свои значения возле параметров размера, типа, прозрачности, цвета и т. д. Только так вы сможете поменять шрифт в Джумла для отдельных элементов. Со временем научитесь, и это не будет казаться вам какой-нибудь сложностью.

Как сделать менюшку с картинками

Необычное меню всегда притягивает внимание пользователей, так как они уже устали от распространенных стереотипных менюшек. Хороший способ выделиться на фоне других – это сделать меню с категориями в виде изображений. Звучит здорово, но с этим вам еще предстоит помучиться.

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

Чтобы добавить картинки к пунктам меню, вам необходимо перейти в настройки навигации в админке. Найдите там пункт “Параметры отображения ссылки” для каждого пункта. И вместо того, чтобы придумывать заголовки, возле формы “Изображение ссылки” нажмите “Выбрать” и загрузите предварительно добавленную в медиа-менеджер картинку. И обязательно поставьте “Нет” возле пункта “Создать заголовок”. Сделайте аналогично для каждой категории. Все, теперь у вас есть полноценное меню из картинок!

Как создать меню с изображениями и ярлыками (HTML и CSS)?

У меня небольшая проблема, я пытался создать меню, объединяющее элементы с изображением и другие элементы с метками, как на прикрепленном изображении, но это не работает.

На следующем изображении показано, как обстоят дела в настоящее время. С ошибкой.

Я пробовал использовать этот код, но мой «элемент изображения» не стоит рядом с «элементом ярлыка»:

  .sprite-icons {
  фон: url (../images/icons/sprite-icons_menu.png) без повтора вверху слева;
    -webkit-transition: легкость всего 0.3s;
    -о-переход: легкость всего 0,3 с;
    -moz-transition: легкость всего 0.3s;
    ширина: 33 пикс; высота: 30 пикселей;
}

.sprite-icons.icon_home {
  фоновая позиция: 0px 0px;
 }
 
 .icon_home: hover {
  background-position: -48px 0px;
 }
 
.sprite-icons.icon_home_active {
  background-position: -48px 0px;
}

.sf-menu {
нижняя граница: сплошной черный 1px;
тип-стиль-список: нет;
высота строки: 1.0;
выравнивание текста: центр;
отступ: 10px 10px 8px 10px;
плыть налево;
ширина: 99%;
}

.sf-menu a {
текстовое оформление: нет;
цвет: # 606060;
-webkit-transition: легкость всего 0.3s; -о-переход: легкость всего 0,3 с; -moz-transition: легкость всего 0.3s;
}

.sf-menu a: hover {
цвет: #ffffff;
цвет фона: # ee1c24;
отступ: 10px 6px 6px 6px;

}

.sf-menu li {
дисплей: встроенный;
отступ: 20 пикселей;
}

Как я могу это решить?

[решено] Мое меню скрывается за изображениями? HTML CSS JQuery

Почему ничего не отображается?

Хорошее меню вы говорите; а вы забыли дать тексты для якорей в меню! Все оно пустое, поэтому на экране вы ничего не видите.

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



 

  
  
   Ползунок адаптивного изображения полной ширины

Теперь ваши пункты меню появятся на вашем экране.После того, как вы зададите соответствующие стили для списка меню, у вас будет изысканное меню, которое вам нужно!

Добавление изображений в ваше Divi Mega Menu

Мы любим взаимодействовать с изображениями в Интернете. Собственно, мы этого и ожидаем. Pinterest, Facebook и Instagram продолжают доказывать это. Имея это в виду, имеет смысл по возможности добавлять изображение на свой веб-сайт. А добавление изображений в мегаменю — еще одна прекрасная возможность дать вашим пользователям необходимое взаимодействие.

Добавление изображений в мегаменю — отличное решение для улучшения навигации по вашему сайту.Мега-меню позволяют пользователям видеть больше ссылок одновременно, не беспокоясь о прокрутке, наведении курсора и запоминании содержимого вашего меню. Изображения также улучшают меню, привлекая их внимание, чтобы еще больше упростить процесс навигации.

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

Наслаждайтесь!

Реализация дизайна с Divi

Создание мегаменю

Для начала мы должны сначала создать меню.В этом примере я создаю один пункт главного родительского меню под названием «Мега-меню» с четырьмя подпунктами подменю под ним. Каждый из четырех пунктов подменю имеет три пункта подменю. Вот разбивка для наглядности:

На панели администратора WordPress перейдите в Внешний вид → Меню .Щелкните , создайте новое меню и дайте ему имя (должно быть что-то вроде «Mega Menu»).

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

Чтобы добавить настраиваемую ссылку, нажмите, чтобы открыть настраиваемые ссылки, и добавьте свой URL-адрес и текст ссылки. Повторите этот процесс для всех ссылок.

Примечание. В этом примере я просто добавляю хэштег (#) в текстовое поле URL-адреса, чтобы служить имитацией ссылки, которая ни на что не ссылается.

Теперь создайте еще одну ссылку, которая будет служить ссылкой мегаменю. Я назвал его «Мега Меню», чтобы прояснить это. Это ссылка, которая будет отображать ваше мегаменю при наведении курсора.

Превратить ваше меню в мегаменю довольно просто. Все, что вам нужно сделать, это добавить класс css к основному элементу Mega Menu, который вы только что создали.

Для этого щелкните стрелку справа от пункта мегаменю, чтобы открыть дополнительные параметры конфигурации. Найдите текстовое поле с надписью «Классы CSS» и введите «мегаменю.”

Если вы не видите текстовое поле «Классы CSS», перейдите на вкладку «Параметры экрана» в правом верхнем углу экрана «Меню».

Убедитесь, что в разделе «Показать дополнительные свойства меню» установлен флажок «Классы CSS».

После добавления ссылок в меню прокрутите вниз до пункта «Настройки меню» в нижней части экрана меню и выберите «Основное меню» в качестве места отображения. Теперь ваше меню должно выглядеть так.

Теперь организуйте / перетащите четыре пункта меню (каждый с тремя собственными подпунктами), чтобы они стали подпунктами главной родительской ссылки Mega Menu.

Теперь ваше меню должно выглядеть так:

Нажмите «Сохранить» в меню

Теперь давайте посмотрим, как выглядит мегаменю на действующем сайте.

Добавление изображений в мегаменю

Теперь, когда меню готово, пора добавить изображения.

Начните с получения четырех изображений. Эти изображения должны относиться к четырем подпунктам подменю («О нас», «Услуги», «Наша работа» и «Связаться с нами»). Я выбрал свой на сайте unsplash.com.

Используйте фоторедактор, чтобы уменьшить и обрезать каждое изображение, чтобы оно имело ширину 500 пикселей и высоту 300 пикселей.

Добавьте / перетащите их в медиатеку WordPress.

Теперь вернитесь на страницу меню в WordPress Admin.

В этом примере верхняя ссылка в моем первом столбце — «О нас». Щелкните стрелку справа от пункта «О нас». В поле «Метка навигации» добавьте нужное изображение с помощью тега html img непосредственно перед текстом «О нас». Тег изображения должен выглядеть следующим образом:

 ”Alternate

Чтобы найти URL-адрес изображения, перейдите в Медиа → Библиотека .Щелкните изображение, которое хотите добавить. Во всплывающем окне «Сведения о вложении» найдите URL-адрес в разделе справа, выделите его, затем используйте ctrl + c, чтобы скопировать его в буфер обмена.

Теперь вернитесь к настройке пункта меню «О нас» на странице меню и замените текст «Вставить URL-адрес изображения», вставив URL-адрес вашего изображения с помощью ctrl + v.

Прежде чем покинуть параметры конфигурации для пункта меню «О нас», найдите текстовое поле «Классы CSS» и введите класс «мега-ссылка».

Это позволит нам позже добавить немного индивидуального стиля.

Повторите этот процесс, чтобы добавить следующие три изображения в каждый из пунктов подменю вместе с классом «мега-ссылка». (В этом примере остались три элемента: «Услуги», «Наша работа» и «Свяжитесь с нами».)

Зайдите на свой сайт и наведите указатель мыши на ссылку мегаменю. Теперь ваше мегаменю должно выглядеть так:

Обратите внимание, что при наведении курсора на каждое из изображений они имеют эффект затухания вместе с элементом подменю непосредственно под ним.Это связано с тем, что изображение является частью этой ссылки, поэтому щелчок по нему приведет вас к соответствующему URL-адресу.

Последние штрихи

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

В WordPress Admin перейдите в Divi → Параметры темы . Прокрутите вниз до настраиваемого поля css и введите следующий css:

 .mega-link> a {
    выравнивание текста: центр;
    размер шрифта: 20 пикселей! важно;
    текст-преобразование: прописные буквы;
    font-weight: 400! важно;
    межбуквенный интервал: 3 пикселя;
}

.mega-link> a img {
    нижнее поле: 8 пикселей;
    -webkit-border-radius: 5 пикселей;
    -moz-border-radius: 5 пикселей;
    радиус границы: 5 пикселей;

}

Сохранить изменения

Окончательный результат

Готово!

У вас есть мегаменю Divi с изображениями без использования плагина. Воспользуйтесь этим дополнением для своего текущего сайта или следующего проекта, чтобы улучшить навигацию. Этот вид меню особенно хорошо работает для сайтов электронной коммерции, которые содержат много контента и требуют изображений товаров.Надеюсь, что вы найдете ее полезной.

Больше Divi Awesomeness каждый день

Надеюсь, вам понравился этот урок. Мы публикуем новый пост в блоге Divi каждый день. Если у вас есть запрос на обучение, обязательно оставьте его для нас в разделе комментариев ниже.

Не забудьте подписаться на нашу рассылку новостей по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатный подарок Divi!

Menu Image, Icons made easy — плагин для WordPress

Описание

Легко добавить изображение или значок в пункт меню.Создание лучшего меню веб-сайта.
Управляет положением изображения или значка, а также его размером.

С плагином Menu Image вы можете сделать больше, проверьте некоторые функции:

Ссылки
Связанные плагины

Что говорят люди!

Простота использования и хорошая поддержка авторов
Этот плагин — хорошее решение для простого включения изображения в меню. Отличная поддержка от автора плагина!

@ dwoolworth824

Лучший плагин для добавления логотипа в вашу навигацию
Я определенно рекомендую этот плагин, если вам нужно добавить логотип в вашу навигацию в WordPress.Оказываемая поддержка — это 5 звезд!

@ manmade1

Скриншоты

Установка

  1. Загрузить изображение меню в каталог / wp-content / plugins /
  2. Активируйте плагин через меню «Плагины» в WordPress.
  3. Перейдите в / wp-admin / nav-menus.php
  4. Отредактируйте существующий элемент меню или добавьте новый элемент меню и просто загрузите изображение, чем нажмите Сохранить меню
  5. Смотрите ваше меню на сайте
  6. (только для пользователей WMPL) Перейдите в WPML> WP Menus Sync и щелкните Sync

FAQ

Как установить изображение меню?

Проверьте эту статью по следующей ссылке

Как включить изображение меню?

Проверьте эту статью по следующей ссылке

Как добавить значки в пункты меню?

Проверьте эту статью по следующей ссылке

Как добавить собственный CSS в изображение меню?

Проверьте эту статью по следующей ссылке

Обзоры

Мне нравится этот плагин.Использовал это много раз. И поддержка НЕВЕРОЯТНАЯ. Настоятельно рекомендуется. A +++

Когда вы нажимаете радио, чтобы выбрать значок (вместо изображения), вся вкладка безвозвратно зависает. Windows 10, Chrome [последняя версия].

Я использую изображение меню как основу всего моего сайта. Недавно у меня возникли проблемы с изображением меню, и команда помощи в Menu image быстро вернулась ко мне и сразу же решила проблему.Отличный сервис за отличную вилку 🙂

Работает очень хорошо и был бы рад добавить 5 звезд, но плагин рассылает WP Admin сообщения об обновлении, и после закрытия они возвращаются снова и снова. Учитывая удаление, поскольку это бесполезно на клиентских сайтах.

Не работает. Иконки нельзя выбрать.

J’aime bien ce plugin, позволяет добавлять изображения в меню.

Посмотреть все 111 отзывов

Авторы и разработчики

«Изображение меню, простые значки» — это программа с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов

История изменений

3.0.4

  • Fix — Добавить новый стиль CSS

3.0.3

  • Исправление — Удаление стиля, влияющего на меню Elementor

3.0.2

  • Fix — Загрузка Dashicons, когда пользователь не вошел в систему
  • Fix — Общие улучшения

3.0,1

  • Новое — Добавить RTL CSS в настройках администратора
  • Исправление — Настройки размера изображения не сохранялись
    • Исправление
  • — Избегайте разметки HTML в элементах без значков или изображений
  • Fix — Удалить FontAwesome Enqueue

3,0

  • Новое — Новый дизайн настроек
  • New — Предварительный просмотр пункта меню в настройках
  • Новое — можно добавить иконки FontAwesome
  • Новое — Возможность добавления значков DashIcons
    • Улучшение
  • — Обновление Freemius SDK
    • Улучшение
  • — Очистка кода

2.9,7

  • Fix — Исправить проблему с отображаемым заголовком выше и ниже
    • Улучшение
  • — Обновление Freemius SDK до версии 2.4.0.1

2,9,6

  • Fix — Устранение проблемы совместимости с WordPress 5.4.

2,9,5

  • Fix — Удалить ненужный фильтр.
  • Fix — Отрегулируйте CSS для заголовка ниже.

2,9,4

  • Fix — Ошибка дублирования изображений.

2.9.3

  • New — Добавлена ​​совместимость с Max Megamenu.
  • New — Добавить новый фильтр для изменения разметки изображения
  • Fix — Опустите параметры изображения меню, чтобы они находились ниже настроек WordPress.
  • Fix — Обновить ссылку на мобильное меню.
  • Fix — Перемещение ресурсов CSS и JS.

2,9,2

  • Новое — Включите фреймворк Freemius.
  • Новое — Панель настроек.
  • Новое — Возможность включить / отключить изображение при наведении.
  • Новое — Параметры для изменения нестандартных размеров изображения.

2.9,1

  • Исправить предыдущее неработающее обновление. Извините за это, все ошибаются.
  • Удалите атрибуты srcset и sizes изображений.
  • Добавить автотесты для просмотра изображений.

2.9.0

  • Обновить копию административной части относительно новой версии WP.
  • Исправить URL-адрес поддержки.
  • Исправить предупреждение php.
2.8.0
  • Используйте фильтры ядра nav_menu_link_attributes , nav_menu_item_title для добавления изображения и класса вместо фильтра walker_nav_menu_start_el .
  • Прекращение поддержки версии ядра <4.4.0.

Как выравнивать и перемещать изображения с помощью CSS

Изображения могут легко выравниваться и перемещаться с помощью CSS . Они могут быть выровнены по , и с плавающей точкой , чтобы изображения можно было размещать в определенных местах на странице. То, как вы хотите отображать изображения, будет определять, выровняете ли вы изображение или плаваете.

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

Плавающее изображение позволит тексту обтекать изображение, как в обычной книге или газете. Изображения также можно перемещать, чтобы они отображались на вашем сайте горизонтально. Это хорошо для отображения изображений в виде галереи. В следующих разделах объясняется, как перемещать и выравнивать изображения с помощью CSS.

Выровнять по левому, центру и правому краю

Изображения можно выравнивать по левому, правому и центру с помощью тега div и встроенного стиля CSS. Текст НЕ ОБРАТЫВАЕТ вокруг изображений, которые просто выровнены. Ниже объясняется, как выровнять изображения влево, вправо и по центру с помощью CSS.

Выровнять по левому краю

Строка кода ниже предназначена для выравнивания изображения по левому краю.

По центру

Следующая строка кода предназначена для центрирования изображения.

Выровнять по правому краю

Следующая строка кода содержит атрибут CSS для выравнивания по правому краю.

Плавающие изображения с использованием CSS

Плавающие изображения позволяют изображениям выравниваться по горизонтали друг с другом и позволяют тексту обтекать изображение. Далее будет объяснено горизонтальное выравнивание изображений и плавающих изображений вокруг текста.

Плавающие изображения слева для переноса текста

Nunc pulvinar lacus id purus ultrices id sagittis neque convallis.Nunc vel libero orci. Vivamus at dolor a nibh aliquet luctus. Duis imperdiet mi id lorem pellentesque tempus. Ut quis felis posuere tellus feugiat ultrices. Praesent id мучитель non tellus viverra placerat. Vivamus euismod nisi a leo interdum molestie ornare tellus conctetur.

Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Proin faucibus convallis elit. Maecenas rhoncus arcu at arcu.Proin libero. Proin adipiscing. В quis lorem vitae elit consctetuer pretium. Nullam ligula urna, adipiscing nec, iaculis ut, elementum non, turpis. Fusce pulvinar.

Важно! Плавающие изображения будут перекрывать друг друга, если плавающее не очищено. Убедитесь, что вы помещаете четкий код с плавающей запятой после каждого раздела, в котором плавает ваше изображение. Ниже приведен код для очистки ваших плавающих объектов.

Вот пример:

 
  Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.

Плавающие изображения, право на перенос текста

Пеллентеск маттисовый портвейн. Maecenas condimentum iaculis ligula, sit amet scelerisque nibh aliquam in. Quisque ornare gravida est ut fermentum. Нам вененатис прециум еним, в лаорет нибх тристик сидеть амет.

Nullam cursus varius tellus, id laoreet magna hendrerit at.Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Aenean sed turpis. Pellentesque обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem eros, ornare ut, Commodo eu, tempor nec, risus. Donec laoreet dapibus ligula. Praesent orci leo, bibendum nec, ornare et, nonummy in, elit. Donec interdum feugiat leo. Vestibulum ante ipsum primis в faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat ullamcorper ipsum.

Плавающие изображения влево по горизонтали

Будет использоваться тот же код, что и раньше (см. Ниже). Изображения просто помещаются одно за другим, чтобы они плавно перемещались по горизонтали.

Плавающие изображения, встроенные друг в друга, — хороший способ отобразить ваши изображения в виде галереи. На этом мы завершаем, как выровнять и плавающие изображения с CSS . Присоединяйтесь к нашему сообществу сейчас, чтобы получить специализированную помощь по HTML и дизайну, специальным предложениям хостинга и многому другому! В следующем уроке мы покажем вам, как создать простое выпадающее меню CSS.У нас также есть полезная статья о внешних, внутренних и встроенных стилях CSS

.

Нужна дополнительная помощь по CSS? Ознакомьтесь с нашим введением в руководство по CSS!

Как добавить изображения в меню Divi

Как добавить изображения в меню Divi — Учебное пособие от Pee-Aye Creative

Из этого туториала Вы узнаете, как добавлять изображения в меню Divi, в выпадающее подменю или даже в мегаменю и применять стили с помощью CSS.

Добавление изображений в меню Divi

Мы живем в визуальном мире, и изображения составляют большую его часть. При создании веб-сайтов мы все знаем, насколько важны изображения, чтобы передать чувства, информацию или добавить красоты. Почему бы не добавить изображения в меню Divi? Это краткое руководство покажет вам, как добавлять изображения в любое меню Divi или WordPress.

Где и зачем добавлять изображения в меню Divi

Вы даже можете добавлять изображения в главное меню, но подменю и мегаменю были бы идеальными местами.Вы даже можете добавить изображение, которое ссылается на продукт или сообщение в блоге!

Добавить изображение в меню Divi

На панели управления WordPress перейдите в Внешний вид> Меню . Здесь вы либо создадите новое меню, либо добавите изображение к существующему. Выберите меню, в которое вы хотите добавить изображение, и найдите «Пользовательские ссылки», в списке под «Добавить элементы меню».”

Затем добавьте хэштег # в поле URL: и нажмите «Добавить в меню».

Разместите пункт меню настраиваемых ссылок под выбранным вами пунктом меню главного уровня. Разверните переключатель пункта меню. Мы собираемся добавить изображение в пункт меню пользовательской ссылки, используя код изображения HTML. Скопируйте и вставьте приведенный ниже фрагмент кода в поле Navigation Label .

  Альтернативный текст

Теперь не забудьте нажать синюю кнопку сохранения в меню.Последний шаг — добавление правильного URL-адреса изображения во фрагмент кода. Для этого нам нужно перейти в Media Library и либо загрузить новую фотографию, либо использовать существующую.

Выберите изображение, которое хотите добавить в меню Divi, и откроются настройки мультимедиа WordPress. Найдите внизу ссылку «Копировать» и скопируйте этот URL.

Теперь вернитесь в меню, куда вы вставили HTML-код изображения на предыдущем шаге. Вам необходимо заменить текст «Вставьте URL-адрес изображения сюда» на ссылку, которую вы только что скопировали.

ПРИМЕЧАНИЕ. Вы можете связать это изображение с другой страницей двумя способами. Либо добавьте URL-адрес страницы в поле URL-адреса (показанное на изображении выше), либо вы можете выполнить весь этот учебник с обычной ссылкой на страницу вместо настраиваемой ссылки.

Молодец! Вы добавили изображение в свое меню Divi.

Не забудьте на сохранить меню ! А теперь иди взгляни!

Стилизация изображения в меню Divi

На данный момент изображение есть и работает.Но вы можете изменить стиль. Если вы используете это, как мы показали в подменю, то лучшее, что я могу порекомендовать, — это наш учебник по Как стилизовать раскрывающееся меню подменю Divi . Это даст вам много идей.

Добавить класс CSS к изображению

Есть несколько способов настроить таргетинг изображения с помощью CSS, но я хочу сделать это как можно проще для вас. Снова зайдите в меню и найдите в верхнем углу экрана что-то под названием «Параметры экрана». Выберите это и найдите параметр под названием «Классы CSS». Убедитесь, что это выбрано.

В пункте меню с изображением вы увидите новое поле с именем CSS Class (необязательно) . Добавьте к этому класс. В моем примере я использовал «pa-menu-image» , чтобы было проще.

Примените собственный CSS к изображению в меню Divi

Теперь мы можем применять к изображению собственные стили CSS.Здесь нет правильного или неправильного, поэтому просто делайте то, что вам нужно, чтобы добиться желаемого вида. Вот некоторые предложения.

  / * добавляем закругленную границу к изображению * /
.pa-menu-image img {
радиус границы: 10 пикселей;
}

/ * убираем отступ вокруг изображения * /
.pa-menu-image a {
заполнение: 0! важно;
}

/ * убираем эффект полупрозрачного наведения * /
.pa-menu-image a: hover {
непрозрачность: 1! важно;
}

Используя этот код, теперь это будет выглядеть так:

44 год

Последнее обновление: 7 окт.2020 г., 18:19

Вот и все!

Надеюсь, вам понравилось узнать, как добавлять изображения в меню Divi.Поделитесь своими мыслями в комментариях ниже. Если вы найдете ценность в этом типе сообщений, , пожалуйста, подпишитесь на , потому что у нас есть тонн обучающих программ, которые нужно опубликовать !

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

Нельсон — владелец компании Pee-Aye Creative Co в прекрасном штате Пенсильвания.Он любит помогать малому бизнесу, исследовать, создавать веб-сайты с Divi и обучать других.

Оставить отзыв!

Комментируя, вы соглашаетесь с нашей Политикой в ​​отношении комментариев для блогов и YouTube.

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

У нашего видео есть просмотры! Присоединяйтесь к подписчикам и наслаждайтесь видео-уроками!

Посетите наш канал

{«id»: null, «mode»: «button», «open_style»: «in_modal», «currency_code»: «USD», «currency_symbol»: «$», «currency_type»: «decimal», «blank_flag_url» «:» https: \ / \ / www.peeayecreative.com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /blank.gif «,» flag_sprite_url «:» https: \ / \ / www.peeayecreative .com \ / wp-content \ / plugins \ / tip-jar-wp \ / \ / assets \ / images \ / flags \ /flags.png «,» default_amount «: 500,» top_media_type «:» none «,» Feature_image_url «: false,» Feature_embed «:» «,» header_media «: null,» file_download_attachment_data «: null,» recurring_options_enabled «: true,» recurring_options «: {» never «: {» selected «: true,» after_output «: «Только один раз»}, «еженедельно»: {«selected»: false, «after_output»: «каждую неделю»}, «ежемесячно»: {«selected»: false, «after_output»: «каждый месяц»}, » ежегодно «: {» selected «: false,» after_output «:» Каждый год «}},» strings «: {» current_user_email «:» «,» current_user_name «:» «,» link_text «:» Оставить отзыв «, «complete_payment_button_error_text»: «Проверьте информацию и попробуйте еще раз», «payment_verb»: «Pay», «payment_request_label»: «Pee-Aye Creative», «form_has_an_error»: «Пожалуйста, проверьте и исправьте ошибки выше», «general_server_error»: » Что-то сейчас не работает.Повторите попытку. «,» Form_title «:» Pee-Aye Creative «,» form_subtitle «: null,» currency_search_text «:» Страна или валюта здесь «,» other_payment_option «:» Другой способ оплаты «,» manage_payments_button_text «:» Управление ваши платежи «,» thank_you_message «:» Спасибо за поддержку! Неделя за неделей нас поддерживают такие люди, как вы! «,» Payment_confirmation_title «:» Pee-Aye Creative «,» Receipt_title «:» Ваша квитанция «,» print_receipt «:» Распечатать квитанцию ​​»,» email_receipt «:» Электронная почта Квитанция «,» email_receipt_sending «:» Квитанция об отправке… «,» email_receipt_success «:» Квитанция по электронной почте успешно отправлена ​​»,» email_receipt_failed «:» Не удалось отправить квитанцию ​​по электронной почте. Повторите попытку. «,» Receive_payee «:» Paid to «,» receive_statement_descriptor «:» Это будет отображаться в вашей выписке как «,» receive_date «:» Date «,» Receaction_transaction_id «:» Идентификатор транзакции «,» Receaction_transaction_amount » : «Amount», «Refund_payer»: «Refund from», «login»: «Войдите, чтобы управлять своими платежами», «manage_payments»: «Manage Payments», «transaction_title»: «Your Transactions», «transaction_title»: » Квитанция транзакции «,» transaction_period «:» Период действия «,» scheme_title «:» Ваши планы «,» scheme_title «:» Управление планом «,» scheme_details «:» Сведения о плане «,» scheme_id_title «:» Идентификатор плана «,» scheme_payment_method_title «:» Способ оплаты «,» scheme_amount_title «:« Сумма плана »,« scheme_renewal_title »:« Дата следующего продления »,« scheme_action_cancel »:« Отмена плана »,« scheme_action_cant_cancel »:« Отмена в настоящее время недоступна.»,» scheme_action_cancel_double «:» Вы уверены, что хотите отменить? «,» scheme_cancelling «:» Отмена плана … «,» scheme_cancelled «:» План отменен «,» scheme_failed_to_cancel «:» Не удалось отменить план » , «back_to_plans»: «\ u2190 Вернуться к планам», «update_payment_method_verb»: «Обновить», «sca_auth_description»: «У вас есть ожидающий платеж за продление, требующий авторизации.», «sca_auth_verb»: «Авторизовать платеж за продление», «sca_authing_verb «:» Авторизация платежа «,» sca_authed_verb «:» Платеж успешно авторизован! «,» Sca_auth_failed «:» Авторизация невозможна! Пожалуйста, попробуйте еще раз.»,» login_button_text «:» Войти «,» login_form_has_an_error «:» Пожалуйста, проверьте и исправьте ошибки выше «,» uppercase_search «:» Search «,» lowercase_search «:» search «,» uppercase_page «:» Page «,» lowercase_page «:» page «,» uppercase_items «:» Items «,» lowercase_items «:» items «,» uppercase_per «:» Per «,» lowercase_per «:» per «,» uppercase_of «:» Of «,» lowercase_of » : «of», «back»: «Вернуться к планам», «zip_code_placeholder»: «Zip \ / Почтовый индекс», «download_file_button_text»: «Загрузить файл», «input_field_instructions»: {«tip_amount»: {«placeholder_text»: «Сколько бы вы хотели дать чаевых?», «Initial»: {«struction_type »:« normal », «struction_message»: «Сколько вы бы хотели дать чаевые? Выбирайте любую валюту.»},» пусто «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Сколько вы хотите дать чаевые? Выберите любую валюту. «},» Invalid_curency «: {«struction_type»: «error», «struction_message «:» Выберите допустимую валюту. «}},» Повторяющийся «: {» placeholder_text «:» Повторяющийся «,» начальный «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Как часто вы хотели бы это делать? «},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Как часто вы будете хотите дать это? «},» empty «: {«struction_type»: «error», «struction_message «:» Как часто вы хотели бы это делать? «}},» name «: {» placeholder_text «:» Имя по кредитной карте «,» initial «: {«struction_type»: «normal», «struction_message «:» Введите имя, указанное на вашей карте.»},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Введите имя на вашей карте. «},» пустой «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Пожалуйста введите имя на своей карточке. «}},» privacy_policy «: {» terms_title «:» Условия использования «,» terms_body «: null,» terms_show_text «:» Просмотреть условия «,» terms_hide_text «:» Скрыть условия «, «начальный»: {«тип_инструкции»: «нормальный», «сообщение_инструкции»: «я согласен с условиями.»}, «не отмечен»: {«тип_ инструкции»: «ошибка», «сообщение_инструкции»: «пожалуйста, примите условия .»},» проверено «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» я согласен с условиями. «}},» электронная почта «: {» текст_пространства «:» Ваш адрес электронной почты «,» начальный «: {«тип_инструкции»: «нормальный», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «успех»: {«тип_инструкции»: «успех», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «пусто»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Введите свой адрес электронной почты»}, «не_адрес_почты_почты»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Убедитесь, что вы ввели действительный адрес электронной почты»} }, «note_with_tip»: {«placeholder_text»: «Ваша заметка здесь… «,» начальный «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Прикрепите примечание к своей подсказке (необязательно) «},» пусто «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции » : «Прикрепите примечание к своей подсказке (необязательно)»}, «not_empty_initial»: {«struction_type «:» normal «, «struction_message»: «Приложите примечание к своей подсказке (необязательно)»}, «save»: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Сохранение примечания … «},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Примечание успешно сохранено! «},» ошибка «: { «тип_инструкции»: «ошибка», «сообщение_инструкции»: «Невозможно сохранить примечание примечания в это время.Повторите попытку. «}},» Email_for_login_code «: {» placeholder_text «:» Ваш адрес электронной почты «,» initial «: {«struction_type»: «normal», «struction_message «:» Введите свой адрес электронной почты для входа. «} , «успех»: {«тип_инструкции»: «успех», «сообщение_инструкции»: «Введите адрес электронной почты для входа.»}, «пустой»: {«тип_инструкции»: «ошибка», «сообщение_инструкции»: «Введите адрес электронной почты для входа. «},» empty «: {«struction_type»: «error», «struction_message «:» Введите адрес электронной почты, чтобы войти в систему. «}},» login_code «: {» initial «: {«struction_type»: «normal», «struction_message «:» Проверьте свою электронную почту и введите код для входа.»},» успех «: {» тип_инструкции «:» успех «,» сообщение_инструкции «:» Проверьте свою электронную почту и введите код входа. «},» пусто «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «: «Проверьте свою электронную почту и введите код входа.»}, «Empty»: {«struction_type «:» error «, «struction_message»: «Проверьте свою электронную почту и введите код входа.»}}, «Stripe_all_in_one»: {» initial «: {«struction_type»: «normal», «struction_message «:» Введите здесь данные вашей кредитной карты. «},» empty «: {«struction_type»: «error», «struction_message «:» Введите данные вашей кредитной карты здесь.»},» успех «: {» тип_инструкции «:» нормальный «,» сообщение_инструкции «:» Введите здесь данные своей кредитной карты. «},» недопустимое_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» номер карты не является действительным номером кредитной карты. «},» invalid_expiry_month «: {«struction_type»: «error», «struction_message «:» Срок действия карты недействителен. «},» invalid_expiry_year «: {«struction_type»: «error», «struction_message «:» Срок действия карты недействителен. «},» invalid_cvc «: {» command_type «:» error «, «struction_message»: «Код безопасности карты недействителен.»},» неверное_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Неверный номер карты. «},» неполное_число «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» карточка номер неполный. «},» incomplete_cvc «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Код безопасности карты неполный. «},» неполное_экспири «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Срок действия карты неполный. «},» Incomplete_zip «: {» command_type «:» error «, «struction_message»: «Почтовый индекс карты не указан.»},» expired_card «: {» statement_type «:» error «, «struction_message»: «Срок действия карты истек.»}, «invalid_cvc»: {«struction_type «:» error «, «struction_message»: «Безопасность карты неверный код. «},» неверный_zip «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Не удалось проверить почтовый индекс карты. «},» недействительный_expiry_year_past «: {» тип_инструкции «:» ошибка «,» сообщение_инструкции «:» Срок действия карты истек «},» card_declined «: {«struction_type»: «error», «struction_message «:» Карта отклонена.»},» Отсутствует «: {» Тип_инструкции «:» ошибка «,» Сообщение_инструкции «:» У клиента нет карты, с которой производится оплата. «},» Ошибка_работки «: {» Тип_инструкции «:» ошибка «,» инструкция_message «:» Произошла ошибка при обработке карты. «},» invalid_request_error «: {» statement_type «:» error «, «struction_message»: «Невозможно обработать этот платеж, попробуйте еще раз или используйте альтернативный метод.»}, «invalid_sofort_country»: {«struction_type «:» error «, «struction_message»: «SOFORT не принимает страну выставления счета.Попробуйте другую страну. «}}}},» Fetched_oembed_html «: false}

{» date_format «:» F j, Y «,» time_format «:» g: ia «,» wordpress_permalink_only «:» https: \ / \ /www.peeayecreative.com \ / how-to-add-images-to-your-divi-menu \ / «,» all_default_visual_states «:» наследовать «,» modal_visual_state «: false,» user_is_logged_in «: false,» stripe_api_key «:» pk_live_51EARn4E3j6GcARDR3oo6L91XPb3rfnNl9j6ieomgjlZjVvj7nCzKCTphxwu38s20syRaBKveuT5NFmm4fZqUHOPe00fugbEkRDc «, https://support.bypeeayecreative.com \ / wp-admin \ /admin.php? page = tip-jar-wp & mpwpadmin1 = welcome & mpwpadmin_lightbox = do_wizard_health_check «,» close_button_url «:» https: \ / \ / www.peeayecreative.com \ / wp-content \ / плагины \ / tip-jar-wp \ / \ / assets \ / images \ /closebtn.png «}

Как создавать и использовать спрайты изображений CSS

Метод

CSS-спрайтов — это способ уменьшить количество HTTP-запросов, выполняемых для ресурсов изображений, путем объединения изображений в один файл.

Что такое Sprite

Спрайты — это двухмерные изображения, которые состоят из объединения небольших изображений в одно большое изображение с заданными координатами X и Y.

Чтобы отобразить отдельное изображение из комбинированного изображения, вы можете использовать свойство CSS background-position , определяющее точное положение отображаемого изображения.

Преимущество использования CSS Image Sprite

Веб-страница с множеством изображений, в частности, с множеством небольших изображений, таких как значки, кнопки и т. Д.загрузка может занять много времени и генерировать несколько запросов к серверу.

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

Примечание: Уменьшение количества HTTP-запросов имеет большое влияние на сокращение времени отклика, что делает веб-страницу более отзывчивой для пользователя.

Ознакомьтесь с приведенными ниже примерами, и вы увидите одно видимое отличие; когда вы впервые наводите указатель мыши на значки браузера в версии без спрайтов, изображение при наведении появляется через некоторое время, это происходит из-за того, что изображение при наведении курсора загружается с сервера при наведении указателя мыши, поскольку обычные изображения и изображения при наведении курсора два разных изображения.

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

Использование техники CSS-спрайтов, продемонстрированной в: [ПРИМЕР — B]; нам удалось уменьшить количество HTTP-запросов на 9 и общий размер файлов изображений на 38,2 КБ по сравнению с [ПРИМЕР — A] ;. Это довольно большое улучшение для такого небольшого примера. Представьте, что вы могли бы сделать на полноценном веб-сайте.

Весь процесс создания этого примера объясняется ниже.

Создание изображения Sprite

Мы создали этот спрайт, объединив 10 отдельных изображений в одно изображение (mySprite.png). Вы можете создать свой собственный спрайт, используя любой инструмент для редактирования изображений, который вам нравится.

Совет: Для простоты мы использовали все значки одинакового размера и поместили их близко друг к другу для облегчения расчета смещения.

Отображение значка из изображения Sprite

Наконец, используя CSS, мы можем отобразить только ту часть спрайта изображения, которая нам нужна.

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

 .sprite {
    фон: url ("images / mySprite.png") no-repeat;
}

Теперь мы должны определить класс для каждого элемента, который мы хотим отобразить. Например, для отображения значка Internet Explorer в виде спрайта изображения будет использоваться код CSS.

  .ie {
    ширина: 50 пикселей; / * Ширина иконки * /
    высота: 50 пикселей; / * Высота иконки * /
    дисплей: встроенный блок; / * Отображение значка как встроенного блока * /
    background-position: 0 -200 пикселей; / * Положение фона значка в спрайте * /
}

Теперь возникает вопрос, как мы получили эти значения пикселей для background-position ? Давайте разберемся.Первое значение — это горизонтальное положение , а второе — это вертикальное положение фона. Поскольку левый верхний угол значка Internet Explorer касается левого края, его расстояние по горизонтали от начальной точки, т. Е. Верхний левый угол спрайта изображения, составляет 0 , а поскольку он расположен на 5-й позиции , , поэтому его вертикальное положение расстояние от начальной точки спрайта изображения составляет 4 X 50 пикселей = 200 пикселей , потому что высота каждого значка составляет 50 пикселей .

Чтобы отобразить значок Internet Explorer, мы должны переместить его верхний левый угол в начальную точку, то есть в верхний левый угол спрайта изображения (mySprite.png). Кроме того, поскольку этот значок расположен на вертикальном расстоянии 200 пикселей , нам нужно будет сдвинуть все фоновое изображение (mySprite.png) по вертикали вверх на 200 пикселей , что требует от нас применения значения как отрицательного числа, которое составляет -200 пикселей , потому что отрицательное значение заставляет его двигаться вертикально вверх, тогда как положительное значение перемещает его вниз.Однако для этого не требуется смещение по горизонтали, поскольку перед левым верхним углом значка Internet Explorer нет пикселей.

Совет: Просто поиграйте со значением свойства background-position в следующих примерах, и вы быстро узнаете, как работают смещения.

Создание меню навигации с помощью CSS Image Sprite

В предыдущем разделе мы узнали, как отобразить отдельный значок из спрайта изображения.Это самый простой способ использования спрайтов изображений, теперь мы идем на шаг вперед, создавая меню навигации с эффектом опрокидывания , как показано в [ПРИМЕР — B].

Здесь мы будем использовать то же изображение спрайта (mySprite.png) для создания нашего меню навигации.

Базовый HTML для навигации

Мы начнем с создания нашего меню навигации с неупорядоченным списком HTML.

Применение CSS в навигации

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

Шаг 1. Сброс структуры списка

По умолчанию неупорядоченные списки HTML отображаются с маркерами. Нам нужно будет удалить маркеры по умолчанию, установив для атрибута list-style-type значение none .

  ul.menu {
    тип-стиль-список: нет;
}
ul.menu li {
    отступ: 5 пикселей;
    размер шрифта: 16 пикселей;
    семейство шрифтов: "Trebuchet MS", Arial, sans-serif;
}

Шаг 2: Установка общих свойств для каждой ссылки

На этом этапе мы установим все общие свойства CSS, которые будут использоваться всеми ссылками.Например, цвет , фоновое изображение , отображение , заполнение и т. Д.

  ul.menu li a {
    высота: 50 пикселей;
    высота строки: 50 пикселей;
    дисплей: встроенный блок;
    отступ слева: 60 ​​пикселей; / * Чтобы отсеять текст от фонового изображения * /
    цвет: # 3E789F;
    фон: url ("images / mySprite.png") no-repeat; / * Поскольку все ссылки имеют одно и то же фоновое изображение * /
}

Шаг 3. Установка состояния каждой ссылки по умолчанию

Теперь мы должны определить класс для каждого элемента меню, потому что каждый элемент в спрайте изображения имеет разные background-position .Например, значок Firefox размещается в начальной точке, то есть в верхнем левом углу спрайта изображения, поэтому нет необходимости сдвигать фоновое изображение. Следовательно, вертикальное и горизонтальное положение фона в этом случае будет равно 0. Точно так же вы можете определить положение фона для других значков в спрайте изображения.

  ul.menu li.firefox a {
    background-position: 0 0;
}
ул.menu li.chrome a {
    фоновая позиция: 0 -100 пикселей;
}
ul.menu li.ie a {
    background-position: 0 -200 пикселей;
}
ul.menu li.safari a {
    фоновая позиция: 0 -300 пикселей;
}
ul.menu li.opera a {
    фоновая позиция: 0 -400 пикселей;
}

Шаг 4. Добавление состояний наведения ссылок

Добавление состояний наведения происходит по тому же принципу, что и добавление указанных выше ссылок. Просто переместите их верхний левый угол в начальную точку (т.е. верхний левый угол) спрайта изображения, как мы сделали выше. Вы можете просто вычислить background-position , используя следующую формулу:

Вертикальное положение при наведении = Вертикальное положение нормального состояния - 50 пикселей

Поскольку изображения при наведении курсора находятся чуть ниже состояния по умолчанию, а высота каждого значка равна 50 пикселей. Состояние наведения значков также не требует горизонтального смещения, поскольку перед их левым верхним углом нет пикселей.

  ul.menu li.firefox a: hover {
    background-position: 0-50 пикселей;
}
ul.menu li.chrome a: hover {
    background-position: 0 - 150 пикселей;
}
ul.menu li.ie a: hover {
    background-position: 0 - 250 пикселей;
}
ul.menu li.safari a: hover {
    background-position: 0 -350px;
}
ul.menu li.opera a: hover {
    background-position: 0 -450px;
}

Готово! Вот наш окончательный код HTML и CSS после объединения всего процесса:

  



 Пример меню навигации спрайтов 
<стиль>
    ул.menu {
        тип-стиль-список: нет;
    }
    ul.menu li {
        отступ: 5 пикселей;
        размер шрифта: 16 пикселей;
        семейство шрифтов: "Trebuchet MS", Arial, sans-serif;
    }
    ul.menu li a {
        высота: 50 пикселей;
        высота строки: 50 пикселей;
        дисплей: встроенный блок;
        отступ слева: 60 ​​пикселей; / * Чтобы отсеять текст от фонового изображения * /
        цвет: # 3E789F;
        фон: url ("images / mySprite.png") no-repeat; / * Поскольку все ссылки имеют одно и то же фоновое изображение * /
    }
    ul.menu li.firefox a {
        background-position: 0 0;
    }
    ул.menu li.chrome a {
        фоновая позиция: 0 -100 пикселей;
    }
    ul.menu li.ie a {
        background-position: 0 -200 пикселей;
    }
    ul.menu li.safari a {
        фоновая позиция: 0 -300 пикселей;
    }
    ul.menu li.opera a {
        фоновая позиция: 0 -400 пикселей;
    }
    ul.menu li.firefox a: hover {
        background-position: 0-50 пикселей;
    }
    ul.menu li.chrome a: hover {
        background-position: 0 - 150 пикселей;
    }
    ul.menu li.ie a: hover {
        background-position: 0 - 250 пикселей;
    }
    ул.menu li.safari a: hover {
        background-position: 0 -350px;
    }
    ul.menu li.opera a: hover {
        background-position: 0 -450px;
    }
.

No related posts.

alexxlab

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *