Как мне создать меню, которое выглядит следующим образом ...
Я не хочу использовать PSD изображения. Я бы предпочел использовать иконки из какого-то пакета, такого как FontAwesome, и иметь фоны / CSS, созданные в CSS.
Версия меню, в которой используется PSD для создания изображений всплывающей подсказки и последующего ее использования, можно найти здесь .
css
tooltip
css-shapes
ОБП
источник
источник
Ответы:
Спустя почти 3 года я наконец-то нашел время вернуться к этому и опубликовать улучшенную версию. Вы все еще можете просмотреть исходный ответ в конце для справки.
Хотя SVG может быть лучшим выбором, особенно сегодня, моя цель с этим состояла в том, чтобы оставить только HTML и CSS, без JS, без SVG, без изображений (кроме фона корневого элемента).
Демо 2015
Скриншоты
Chrome 43:
Firefox 38:
IE 11:
Код
HTML-код довольно прост. Я использую флажок, чтобы показать / скрыть меню.
Я использую Sass, чтобы сохранить эту логику и упростить изменение вещей при необходимости. Сильно прокомментировал.
Показать фрагмент кода
Оригинальный ответ
Моя попытка сделать что-то подобное с чистым CSS:
демонстрация
(нажмите на звезду)
Работает в Chrome, Firefox (немного странный эффект размытия при наведении), Opera (концы выглядят меньше) и Safari (концы выглядят меньше).
источник
:focus
путь» . На самом деле это довольно старый метод, я впервые увидел, что его использовал Стю Николс в своих экспериментах на cssplay.co.uk несколько лет назад. В CSS выше, это то,.button:focus + .tip
что делает трюк.Ана ответ: надрать задницу! Это серьезный CSS-фу.
Мое решение, возможно, не совсем то, на что вы надеетесь, но это еще одно возможное решение. Я сейчас работаю над интерфейсом компаса, который имеет похожий стиль дугообразных кнопок. Я решил разработать его, используя Raphael и SVG.
Я создал фигуру дуги в Illustrator, экспортировал для нее SVG, извлек определение пути для дуги из экспортированного файла SVG и использовал Рафаэля для создания моего интерфейса с ним.
Вот JSFiddle этого .
Вот JavaScript:
Вот связанный CSS:
источник
Еще один очень хороший способ - использовать JavaScript для позиционирования.
DEMO + TUTORIAL по созданию анимированного радиального меню
Преимуществом этого метода является то, что вы можете использовать любое количество элементов, и он будет продолжать позиционировать их в радиальном направлении, без необходимости изменения любого вашего CSS.
JavaScript в вопросе:
источник