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

@m_gorban · Регистрация: 26.08.2013

Author24 — интернет-сервис помощи студентам

Задача вот какая:
нужно сделать вот такое меню:

но у меня ни как не получается заменить маркер на картинку чтобы оно потом выглядело корректно,
есть я ставлю "галку" на маркер - то не получается сделать обводку маркеру:

, если ставлю маркер в виде "галка" + обводка, то маркер поднимается вверх, между каждым пунктом располагается расстояние, и все выгялдит криво.. вот так:

Подскажите пожалуйста как можно сделать такое меню?

Добавлено через 8 минут
в добавление к теме прошу вас помочь мне и с таким вот меню когда маркер разный:

я сделал его в виде таблицы, но клиента это не устраивает...принципиально хочет чтобы был в виде списка в две колонки..

@aj17 · 21.07.2014, 15:32

Покажите вашу разметку html/css
Но одно могу сказать подобное реализовать очень просто, самый простой способ это сделать картинку сразу с бордюром справа (то есть картинка с галочкой и палочкой серенькой справа). Ну а пунктам меню дать

CSS

1	padding-left:ширина вашей картинки+нужный отступ;

и им же присвоить

CSS

1	background:url(/путь.png) left center;

@vovandr · 21.07.2014, 15:35

Такие вещи делаются через background. Для " галки" сделайте background:url('path_to_your_image') 0 50% no-repeat.
Для флагов создайте css спрайт и задайте правильный background-poistion для нужных пунктов.

@aj17 · 21.07.2014, 15:39

По колонкам может это вам подойдет:

HTML5

<ul class="new_list">
    <li><a href="#"></a>Страна</li>
    <li><a href="#"></a>Страна</li>
    <li><a href="#"></a>Страна</li>
    <li><a href="#"></a>Страна</li>
    <li><a href="#"></a>Страна</li>
    <li><a href="#"></a>Страна</li>
</ul>

CSS

.new_list
    {
        width:400px;
    }
    .new_list li
    {
        float: left;
        width:200px;
    }

@m_gorban · 21.07.2014, 15:46 **[ТС]**

у меня сейчас вот так:

HTML5

<div class="leftblok">
            <ul>
                <li><a href="#">Бронирование авиабилетов</a></li>
                <li><a href="#">Бронирование жд билетов</a></li>
                <li><a href="#">Бронирование гостиниц</a></li>
                <li><a href="#">Аренда замков, вилл</a></li>
                <li><a href="#">Аренда автомобилей</a></li>
                <li><a href="#">Обучение зарубежом</a></li>
                <li><a href="#">Оформление виз</a></li>
                <li><a href="#">Советы туристам</a></li>
                <li><a href="#">Полезные советы</a></li>
                <li><a href="#">Рекламные туры</a></li>
                </ul>
                </div>

стиль:

CSS

.leftblok ul{
    list-style-image:url(images/marker1.png);
}
 
.leftblok li {
    width:250px;
    height:30px;
    border:1px #eae9e9 solid;
}

@aj17 · 21.07.2014, 16:04

Лучше сделайте как я вам написал, картинку с помощью свойства background расположите с левой стороны пункта меню)
Ну или же нужно добавить span и ему уже задать все необходимые параметры типа border-right background и размеров со свойством display:inline-block;

@m_gorban · 21.07.2014, 16:46 **[ТС]**

т.е. в картинку вложить не только галку, но и обводку вокруг пункта?

Добавлено через 25 минут
не получается... ни в какую

не становится оно ровно как надо...

@vovandr · 21.07.2014, 16:52

HTML5

<div class="leftblok">
            <ul>
                <li><a href="#">Бронирование авиабилетов</a></li>
                <li><a href="#">Бронирование жд билетов</a></li>
                <li><a href="#">Бронирование гостиниц</a></li>
                <li><a href="#">Аренда замков, вилл</a></li>
                <li><a href="#">Аренда автомобилей</a></li>
                <li><a href="#">Обучение зарубежом</a></li>
                <li><a href="#">Оформление виз</a></li>
                <li><a href="#">Советы туристам</a></li>
                <li><a href="#">Полезные советы</a></li>
                <li><a href="#">Рекламные туры</a></li>
                </ul>
                </div>

CSS

.leftblok li {
    width:250px;
    height:30px;
    border:1px #eae9e9 solid;
   list-style: none;
  background: url('http://findicons.com/files/icons/2117/nuove/128/camera_test.png') 0 50% no-repeat;
  background-size: 20px; /* для вашей картинки это правило уберите */
}
.leftblok a{
  line-height: 30px;
  text-decoration: none;
  display: block;
  padding-left: 30px;
}

Демо http://codepen.io/anon/pen/yjABb

@m_gorban · 21.07.2014, 17:11 **[ТС]**

vovandr супер!
Получилось!..

а можете и со вторым меню мне так же помочь? ) Очень прошу...

@vovandr · 21.07.2014, 17:15

m_gorban во втором меню лучше сделать спрайт из картинок. Вы спрайты делать умеете?

@m_gorban · 21.07.2014, 17:16 **[ТС]**

нет.. вот даже не разу не сталкивался с тамик

@vovandr · 21.07.2014, 17:31

Как один из вариантов:

HTML5

<div class="country">
            <ul>
                <li><a href="#"><span class="flag flag-country1" href="#"></span>страна 1</a></li>
                  
                 <li><a href="#"><span class="flag flag-country2" href="#"></span>страна 2</a></li>
                 <li><a href="#"><span class="flag flag-country3" href="#"></span>страна 3</a></li>
                <li><a href="#"><span class="flag flag-country4" href="#"></span>страна 4</a></li>
                <li><a href="#"><span class="flag flag-country5" href="#"></span>страна 5</a></li>
            
                </div>

CSS

ul {list-style: none;}
.flag {width: 16px; height: 11px; background: url("http://static.flag-sprites.com/i/flags.png") no-repeat 0 0; margin-right: .3em; display: inline-block;}
 
.flag-country1 {background-position: -224px 0;}
.flag-country2{background-position: -240px -66px;}
.flag-country3{background-position: 0 -66px;}
.flag-country4{background-position: -16px -66px;}
.flag-country5{background-position: -32px -66px;}

Демо http://codepen.io/anon/pen/nlaAr
То есть используется одна большая картинка с кучей флагов. И так как у нас span имеет строго определенный размер по высоте и ширине, мы с помощью background-position просто двигуем эту картинку

@m_gorban · 21.07.2014, 17:51 **[ТС]**

что-то у меня пошло не так

Название: mPdDTsv.png
Просмотров: 93

Размер: 6.0 Кб

где я ошибся? http://codepen.io/anon/pen/GkdLa

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

@vovandr · 21.07.2014, 17:55

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

CSS

background-position: -224px 0;
background-position: -208px 0;
background-position: -208px -11px;
background-position: -208px -22px;

и так далее

@m_gorban · 21.07.2014, 18:23 **[ТС]**

нет, я использую свою картинку

Добавлено через 21 минуту
флажки я выровнял! Спасибо!!! ))
не получается только поставить линию под страной.. такую чтобы везде она была одинаковой длины..
Как это сделать?

@vovandr · 21.07.2014, 18:44

Как вариант:

HTML5

<ul class="country">
                    <li><a href="#"><span class="flag flag-country1" href="#"></span><em>Австрия</em></a></li>
                    <li><a href="#"><span class="flag flag-country2" href="#"></span><em>Индия</em></a></li>
                    <li><a href="#"><span class="flag flag-country3" href="#"></span><em>Венгрия</em></a></li>
                    <li><a href="#"><span class="flag flag-country4" href="#"></span><em>Колумбия</em></a></li>
                    <li><a href="#"><span class="flag flag-country5" href="#"></span><em>Доминикана</em></a></li>
                    <li><a href="#"><span class="flag flag-country1" href="#"></span><em>Мальдивы</em></a></li>
                    <li><a href="#"><span class="flag flag-country2" href="#"></span><em>Египет</em></a></li>
                    <li><a href="#"><span class="flag flag-country3" href="#"></span><em>Турция</em></a></li>
                    <li><a href="#"><span class="flag flag-country4" href="#"></span><em>Иордания</em></a></li>
                    <li><a href="#"><span class="flag flag-country5" href="#"></span><em>Шри Ланка</em></a></li>                    
                </ul>    
</div>

CSS

.country{
    width:300px;
}
 
.country li{
    float: left;
  list-style: none;
    width:150px;
}
.country em{
  display: inline-block;
  width: 126px;
  position: relative;
}
.country em:after{
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom:1px solid #eae9e9;
  display: block;
  left: 0;
  right: 24px;
}
.country a{
    color:#44484f;
     display: block;
    line-height:2;
  text-decoration: none;
}
 
.flag {width: 16px; 
  height: 11px; 
  background: url("http://static.flag-sprites.com/i/flags.png") no-repeat 0 0; 
  margin-right: 8px; 
  display: inline-block;
}
 
.flag-country1 {background-position: -224px 0;}
.flag-country2{background-position: -240px -66px;}
.flag-country3{background-position: 0 -66px;}
.flag-country4{background-position: -16px -66px;}
.flag-country5{background-position: -32px -66px;}

http://codepen.io/anon/pen/LptGf

Добавлено через 8 минут
Хотя можно было и не добавдять em а спозиционировать псевдо элемент к li. Ну да ладно уже

@m_gorban · 21.07.2014, 19:05 **[ТС]**

ПОЛУЧИЛОСЬ! ))))
только текст почему стал курсивом и никак не меняется

@vovandr · 21.07.2014, 19:06

Сообщение от m_gorban

только текст почему стал курсивом и никак не меняется

.country em{font-style: normal;}

@m_gorban · 21.07.2014, 19:20 **[ТС]**

понял де беда... изменил ))Спасибо ограмедное за помощь!

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

HTML5

            <div class="count1">
                <ul class="country">
                    <li><a href="#"><span class="flag flag-country1" href="#"></span><em>Австрия</em></a></li>
                    <li><a href="#"><span class="flag flag-country2" href="#"></span><em>Индия</em></a></li>
                    <li><a href="#"><span class="flag flag-country3" href="#"></span><em>Венгрия</em></a></li>
                    <li><a href="#"><span class="flag flag-country4" href="#"></span><em>Колумбия</em></a></li>
                    <li><a href="#"><span class="flag flag-country5" href="#"></span><em>Доминикана</em></a></li>
                    <li><a href="#"><span class="flag flag-country1" href="#"></span><em>Мальдивы</em></a></li>
                    <li><a href="#"><span class="flag flag-country2" href="#"></span><em>Египет</em></a></li>
                    <li><a href="#"><span class="flag flag-country3" href="#"></span><em>Турция</em></a></li>
                    <li><a href="#"><span class="flag flag-country4" href="#"></span><em>Иордания</em></a></li>
                    <li><a href="#"><span class="flag flag-country5" href="#"></span><em>Шри Ланка</em></a></li>                          
                </ul>                      
            </div>
            <div>
                <p style="padding-left:183px; padding-top:50px;"><a href="#" class="link-style">Все страны</a></p>
            </div>
            <div class="banner">
           
                <a href="#"><img src="https://www.cyberforum.ru/images/skidka.png" alt="" /></a>
            </div>

но теперь остальные блоки располагаются справа.. а не с новой строки...
из-за чего это может быть?

@vovandr · 21.07.2014, 19:23

Поставьте первому же тегу после списка (насколько я понял это параграф у вас) clear: both;

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	21.07.2014, 17:15	10
	m_gorban во втором меню лучше сделать спрайт из картинок. Вы спрайты делать умеете? 0

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

Решение

Решение

@m_gorban 0 / 0 / 0 Регистрация: 26.08.2013 Сообщений: 15
		1
	Как сделать такое вертикальное меню? 21.07.2014, 15:28. Показов 4789. Ответов 20 Метки нет (Все метки) Задача вот какая: нужно сделать вот такое меню: но у меня ни как не получается заменить маркер на картинку чтобы оно потом выглядело корректно, есть я ставлю "галку" на маркер - то не получается сделать обводку маркеру: , если ставлю маркер в виде "галка" + обводка, то маркер поднимается вверх, между каждым пунктом располагается расстояние, и все выгялдит криво.. вот так: Подскажите пожалуйста как можно сделать такое меню? Добавлено через 8 минут в добавление к теме прошу вас помочь мне и с таким вот меню когда маркер разный: я сделал его в виде таблицы, но клиента это не устраивает...принципиально хочет чтобы был в виде списка в две колонки.. 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	21.07.2014, 15:35	3
	Такие вещи делаются через background. Для " галки" сделайте background:url('path_to_your_image') 0 50% no-repeat. Для флагов создайте css спрайт и задайте правильный background-poistion для нужных пунктов. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	21.07.2014, 16:04	6
	Лучше сделайте как я вам написал, картинку с помощью свойства background расположите с левой стороны пункта меню) Ну или же нужно добавить span и ему уже задать все необходимые параметры типа border-right background и размеров со свойством display:inline-block; 0

@m_gorban 0 / 0 / 0 Регистрация: 26.08.2013 Сообщений: 15
	21.07.2014, 16:46 [ТС]	7
	т.е. в картинку вложить не только галку, но и обводку вокруг пункта? Добавлено через 25 минут не получается... ни в какую не становится оно ровно как надо... 0

@m_gorban 0 / 0 / 0 Регистрация: 26.08.2013 Сообщений: 15
	21.07.2014, 17:11 [ТС]	9
	vovandr супер! Получилось!.. а можете и со вторым меню мне так же помочь? ) Очень прошу... 0

@m_gorban 0 / 0 / 0 Регистрация: 26.08.2013 Сообщений: 15
	21.07.2014, 17:16 [ТС]	11
	нет.. вот даже не разу не сталкивался с тамик 0

@m_gorban 0 / 0 / 0 Регистрация: 26.08.2013 Сообщений: 15
	21.07.2014, 17:51 [ТС]	13
	что-то у меня пошло не так где я ошибся? http://codepen.io/anon/pen/GkdLa Добавлено через 1 минуту и еще один момент, как можно сделать линию под странами определенной длины, вот как здесь: 0

@m_gorban 0 / 0 / 0 Регистрация: 26.08.2013 Сообщений: 15
	21.07.2014, 18:23 [ТС]	15
	нет, я использую свою картинку Добавлено через 21 минуту флажки я выровнял! Спасибо!!! )) не получается только поставить линию под страной.. такую чтобы везде она была одинаковой длины.. Как это сделать? 0

@m_gorban 0 / 0 / 0 Регистрация: 26.08.2013 Сообщений: 15
	21.07.2014, 19:05 [ТС]	17
	ПОЛУЧИЛОСЬ! )))) только текст почему стал курсивом и никак не меняется 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	21.07.2014, 19:06	18
	Сообщение от m_gorban только текст почему стал курсивом и никак не меняется .country em{font-style: normal;} 1

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	21.07.2014, 19:23	20
	Поставьте первому же тегу после списка (насколько я понял это параграф у вас) clear: both; 1