0 / 0 / 0
Регистрация: 26.08.2013
Сообщений: 15
|
|
1 | |
Как сделать такое вертикальное меню?21.07.2014, 15:28. Показов 4789. Ответов 20
Метки нет (Все метки)
Задача вот какая:
нужно сделать вот такое меню: но у меня ни как не получается заменить маркер на картинку чтобы оно потом выглядело корректно, есть я ставлю "галку" на маркер - то не получается сделать обводку маркеру: , если ставлю маркер в виде "галка" + обводка, то маркер поднимается вверх, между каждым пунктом располагается расстояние, и все выгялдит криво.. вот так: Подскажите пожалуйста как можно сделать такое меню? Добавлено через 8 минут в добавление к теме прошу вас помочь мне и с таким вот меню когда маркер разный: я сделал его в виде таблицы, но клиента это не устраивает...принципиально хочет чтобы был в виде списка в две колонки..
0
|
21.07.2014, 15:28 | |
Ответы с готовыми решениями:
20
Как сделать вертикальное меню раскрывающимся и закрывающимся? Вертикальное-раздвижное меню (на CSS). Как сделать чтоб оно не перекрывало соседние обънкты? Как сделать такое меню ? Как сделать такое меню |
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
|
|||||||||||
21.07.2014, 15:32 | 2 | ||||||||||
Покажите вашу разметку html/css
Но одно могу сказать подобное реализовать очень просто, самый простой способ это сделать картинку сразу с бордюром справа (то есть картинка с галочкой и палочкой серенькой справа). Ну а пунктам меню дать
0
|
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
|
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
|
|||||||||||
21.07.2014, 15:39 | 4 | ||||||||||
По колонкам может это вам подойдет:
0
|
0 / 0 / 0
Регистрация: 26.08.2013
Сообщений: 15
|
|||||||||||
21.07.2014, 15:46 [ТС] | 5 | ||||||||||
у меня сейчас вот так:
0
|
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
|
|
21.07.2014, 16:04 | 6 |
Лучше сделайте как я вам написал, картинку с помощью свойства background расположите с левой стороны пункта меню)
Ну или же нужно добавить span и ему уже задать все необходимые параметры типа border-right background и размеров со свойством display:inline-block;
0
|
0 / 0 / 0
Регистрация: 26.08.2013
Сообщений: 15
|
|
21.07.2014, 16:46 [ТС] | 7 |
т.е. в картинку вложить не только галку, но и обводку вокруг пункта?
Добавлено через 25 минут не получается... ни в какую не становится оно ровно как надо...
0
|
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
|
|||||||||||
21.07.2014, 16:52 | 8 | ||||||||||
Сообщение было отмечено m_gorban как решение
Решение
1
|
0 / 0 / 0
Регистрация: 26.08.2013
Сообщений: 15
|
|
21.07.2014, 17:11 [ТС] | 9 |
vovandr супер!
Получилось!.. а можете и со вторым меню мне так же помочь? ) Очень прошу...
0
|
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
|
|
21.07.2014, 17:15 | 10 |
m_gorban во втором меню лучше сделать спрайт из картинок. Вы спрайты делать умеете?
0
|
0 / 0 / 0
Регистрация: 26.08.2013
Сообщений: 15
|
|
21.07.2014, 17:16 [ТС] | 11 |
нет.. вот даже не разу не сталкивался с тамик
0
|
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
|
|||||||||||
21.07.2014, 17:31 | 12 | ||||||||||
Как один из вариантов:
То есть используется одна большая картинка с кучей флагов. И так как у нас span имеет строго определенный размер по высоте и ширине, мы с помощью background-position просто двигуем эту картинку
0
|
0 / 0 / 0
Регистрация: 26.08.2013
Сообщений: 15
|
|
21.07.2014, 17:51 [ТС] | 13 |
что-то у меня пошло не так
где я ошибся? http://codepen.io/anon/pen/GkdLa Добавлено через 1 минуту и еще один момент, как можно сделать линию под странами определенной длины, вот как здесь:
0
|
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
|
||||||
21.07.2014, 17:55 | 14 | |||||
Если вы используете тот спрайт, ято я вам для демо сделал, то по горизонтали значение должно быть кратным 16, а по вертикали 11...
0
|
0 / 0 / 0
Регистрация: 26.08.2013
Сообщений: 15
|
|
21.07.2014, 18:23 [ТС] | 15 |
нет, я использую свою картинку
Добавлено через 21 минуту флажки я выровнял! Спасибо!!! )) не получается только поставить линию под страной.. такую чтобы везде она была одинаковой длины.. Как это сделать?
0
|
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
|
|||||||||||
21.07.2014, 18:44 | 16 | ||||||||||
Сообщение было отмечено m_gorban как решение
Решение
Как вариант:
Добавлено через 8 минут Хотя можно было и не добавдять em а спозиционировать псевдо элемент к li. Ну да ладно уже
1
|
0 / 0 / 0
Регистрация: 26.08.2013
Сообщений: 15
|
|
21.07.2014, 19:05 [ТС] | 17 |
ПОЛУЧИЛОСЬ! ))))
только текст почему стал курсивом и никак не меняется
0
|
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
|
|
21.07.2014, 19:06 | 18 |
1
|
0 / 0 / 0
Регистрация: 26.08.2013
Сообщений: 15
|
||||||
21.07.2014, 19:20 [ТС] | 19 | |||||
понял де беда... изменил ))Спасибо ограмедное за помощь!
Добавлено через 13 минут еще один маленький вопрос vovandr . у меня после этого списка было еще два блока:
из-за чего это может быть?
0
|
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
|
|
21.07.2014, 19:23 | 20 |
Поставьте первому же тегу после списка (насколько я понял это параграф у вас) clear: both;
1
|
21.07.2014, 19:23 | |
21.07.2014, 19:23 | |
Помогаю со студенческими работами здесь
20
Как сделать такое же меню? Нужно сделать вертикальное меню с раскрывающимися вкладками Как сделать такое выпадающее меню? Как сделать такое выпадающее меню? Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |