Круговое размещение ссылок с помощью JQuery

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


Разноцветное меню


Воспользуемся плагином Extreme, чтобы расположить элементы по кругу. Скачать его можно здесь.
Создайте на своем сайте два блока «HTML-код». В первый скопируйте код плагина.
<script>
$.fn.extremes = function(options) {
    var defaults = {
        diameter: false,
        background: false
    };
    var options = jQuery.extend(defaults, options);
    return this.each(function() {
      var diagram = $(this);
      // Apply a rotation to offset awkward initial states
      // 'this' is the selector
       diagram.css({
         position: "relative"
       });
       if (defaults.rotate) {
         diagram.css({
           '-webkit-transform': "rotate(" + options.rotate + "deg)",
           '-moz-transform': "rotate(" + options.rotate + "deg)",
           '-ms-transform': "rotate(" + options.rotate + "deg)",
           '-o-transform': "rotate(" + options.rotate + "deg)",
           'transform': "rotate(" + options.rotate + "deg)",
           });
       }
       var elements = $(this).children();
       var length = elements.length;
       $(this).css({
         "display" : "block",
         "position:" : "relative"
       });
       var maxWidth = 0;
       elements.css("float", "left");
       elements.each(function(i){
         var width = $(this).width();
         if (width > maxWidth) {
           maxWidth = width;
         }
         
         var element = $(this);
         var height = $(this).height();
         var degrees =  i/length * 360 - 90;
         var position = "0 50%";
         var indent = (defaults.diameter) ? "0 0 0 " + defaults.diameter + "px" : "0 0 0 " + height * (length /6) + "px";
         element.wrap("<div class='extremes-div'><div class='extremes-inner' /></div>");
         $(this).parent().parent().css({
           "-webkit-transform-origin": position,
           "-moz-transform-origin":    position,
           "-o-transform-origin":      position,
           "-ms-transform-origin":     position,
           "transform-origin":         position,
           "-webkit-transform":        "rotate(" + degrees + "deg)",
           "-moz-transform":           "rotate(" + degrees + "deg)",
           "-o-transform":             "rotate(" + degrees + "deg)",
           "-ms-transform":            "rotate(" + degrees + "deg)",
           "transform":                "rotate(" + degrees + "deg)",
           "padding":                   indent, 
           "position":                 "absolute",
           "top":                      "50%",
           "left":                     "50%",
           "white-space" :             "nowrap"
         });
          if (degrees > 90) {
            $(this).parent().css({
              "-webkit-transform-origin":  "50% 50%",
               "-moz-transform-origin":    "50% 50%",
               "-o-transform-origin":      "50% 50%",
               "-ms-transform-origin":     "50% 50%",
               "transform-origin":         "50% 50%",
               "-webkit-transform":        "rotate(180deg)",
               "-moz-transform":           "rotate(180deg)",
               "-o-transform":             "rotate(180deg)",
               "-ms-transform":            "rotate(180deg)",
               "transform":                "rotate(180deg)",
               "position":                 "absolute"
            });
            $(this).parent().parent().css({
              width: $(this).parent().width(),
              height: $(this).parent().height(), 
              })
          }
       });
       if (diagram.height() < 50) {
         diagram.css({
           "width" : maxWidth * 2 + defaults.diameter || 100,
           "height" : maxWidth * 2 + defaults.diameter || 100
         });
       }
  });
};
</script>

А во втором разместите стилевое оформление, текст и запуск скрипта.
<style>
div.blocks {
		list-style-type: none;
		display: none;
		font-size: 11px;
		margin: 0 auto;
	   }
	   

	   .blocks span {
		padding: 20px;
		font: bold 12px/130% Arial, sans-serif;
		-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
		-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		text-transform: uppercase;
		color: #fff;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		text-shadow: rgba(0,0,0,0.4) 1px 1px 2px;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
	   }
	
	   .blocks span:hover {
	    -webkit-transform: scale(1.2);
	    cursor: pointer;
	   }
    	.red {background-color: #FF0000;}
	   .brick {background-color: #FF3300;}
	   .orange {background-color: #FF8000;}
	   .yellow {background-color: #FFDD00;}
	   .lime {background-color: #ABFF00;}
	   .green {background-color: #45FF00;}
	   .bondi {background-color: #00FF79;}
	   .aqua {background-color: #00FFE0;}
	   .blue {background-color: #0055FF;}
	   .navy {background-color: #1800FF;}
	   .purple {background-color: #7800FF;}
	   .violet {background-color: #C000FF;}
	   .pink {background-color: #FF00E6;}
  </style>

<div class="blocks">
			  <span class="red">Red</span>
			  <span class="brick">Brick</span>
			  <span class="orange">Orange</span>
			  <span class="yellow">Yellow</span>
			  <span class="lime">Lime</span>
			  <span class="green">Green</span>
			  <span class="bondi">Bondi</span>
			  <span class="aqua">Aqua</span>
			  <span class="blue">Blue</span>
			  <span class="navy">Navy</span>
			  <span class="purple">Purple</span>
			  <span class="violet">Violet</span>
			  <span class="pink">Pink</span>
			</div>
<script type="text/javascript">
	$(document).ready(function(){
		
		$('.blocks').extremes({
			diameter: 50
		});
	})
	</script>
Как видим, плагин имеет единственный параметр – диаметр круга. Чем больше вы его увеличиваете, тем шире ваш круг.

За счет использования псевдокласса :hover каждый блок немного выделяется при наведении на него мышью.
Добавьте обработку псевдокласса актив, чтобы блок подсвечивался при нажатии.
.blocks span:active {
    	 background-color:#000000;
     	 box-shadow:5px 5px 10px grey;
	   }
Вместо цвета можно разместить фоновые рисунки на блоках. Для этого выберите картинку или несколько и закачайте в редактор. Затем наведите на имя файла указатель мыши, нажмите правую кнопку и выберите «Скопировать URL картинки».

Вы получите вот такой адрес
http: //circle.pixli.ru/images/images4403/mini/cart2.jpg
Установите рисунок фоном для элемента span. Для этого присвойте ему новый класс, а в таблице стилей пропишите:
.cart1 {background: url(images/images4403/cart1.jpg);}
.cart2 {background: url(images/images4403/cart2.jpg);}
Так как у нас две карточки, описали два класса. Следующим шагом изменим разметку.
<div class="blocks">
			  <span class="cart1">Red</span>
			  <span class="cart2">Brick</span>
			  <span class="cart1">Orange</span>
			  <span class="cart2">Yellow</span>
			  <span class="cart1">Lime</span>
			  <span class="cart2">Green</span>
			  <span class="cart1">Bondi</span>
			  <span class="cart2">Aqua</span>
	</div>
Вот что получилось в итоге.

Замените цвет текста в элементе span. Для этого найдите свойство color и замените значение:
.blocks span {
…
		color: #000;
…
}
А можно заменять один фоновый рисунок другим при наведении мышью. Для этого установите класс cart1 для всех элементов span, а в стилях пропишите следующее:
.blocks span:hover {
	    -webkit-transform: scale(1.2);
	    cursor: pointer;
         background: url(images/images4403/cart2.jpg);
	   }
   .blocks span:active {
	   	 box-shadow:5px 5px 10px grey;
	   }
В итоге вы получите эффект смены фона на карточке при наведении.
22 июня 2017, 13:02    Ivan Web-дизайн 0    2 0
    Загруженные файлы:
  • 3.jpg 42.01 kb

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.