Перейти к содержимому


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 84 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #5

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #6

    BLIK
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Developer
    #8

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография Игорь Ку
    #10

    Игорь Ку (dudesday.ru)
    Очков активности: 24 1 тема, 5 сообщений, 2 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


<button> или <a> - за и против?

#1 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3013 сообщений
  • Репутация: 814
0

Отправлено 15 April 2015 - 01:35

В ночных изучениях материалов по css с целью редизайна сайта с учетом адаптивности отрыл и реализовал (списал и оттестил) вариант реализации навигации главного меню... Сделал и задумался... Хотелось бы услышать мнение уважаемых форумчан...

А сделано следующее...

В линкованом css:

button {
background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
font-size: 16px;
padding: 5px 10px;
margin: 3px;
color: #fff;
border: 1px solid #333;
border-radius: 15px;
height:30px;
cursor:pointer;
}
.button_menu {
background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
font-size: 16px;
padding: 5px 10px;
margin: 3px;
color: #fff; /* Цвет текста */
border: 1px solid #333;
border-radius: 15px;
height:30px;
}

В коде:

<form>
    <button formaction='index.php'>О компании</button>
    <button formaction='production.php' formmethod='post'>Продукция&nbsp;|&nbsp;Услуги</button>
</form>
<span class='button_menu'><a href=''>Контакты</a></span>

Визуальный результат фактически одинаков:

MainMenu.png
* цвет ссылки "Контактов" легко поменяю через css (если предпочтение будет отдано данному варианту)
** над стилями не работал (не украшал) - важно было определиться с принципом
 

Результат действий:

1) Кнопка "О компании" - запускает скрипт index.php с "?" в конце (пустой get), подозреваю что можно убрать посредством 301 директа через htaccess;

2) Кнопка "Продукция | Услуги" - просто запускает скрипт (в чистом виде, без "?"), но "пустышку" (насколько понимаю) все равно "засовывает в мозги" посредством передачи post-методом;

3) Кнопка "Контакты" работает в классическом варианте перехода, как и следует "классическому" методу...

 

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

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

Вариант "Продукция | Услуги"  практически идеален... Понимаю конечно, что пустой post "жрет ресурсы", в мизерных количествах, но все же... Программерское образование (эх, как давно это было) не дает свыкнутся с этой мыслью... Также (по незнанию) нет уверенности в том, что по такому button-у боты будут ползать точно также, как и по стандартной гиперссылке...

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

Понятно что это можно реализовать и в варианте "Контакты" посредством JavaScript, onMouseOver и т.д., но как-то не сильнО желание "наворачивать" и "загружать" код, ведь кроме лишнего гимора это и требует обязательного наличия у юзверя подключенного JavaScript-а (хотя таких и 99,9%, но 0,1% все же есть), плюс тоже самое "пожирание" ресурсов, плюс более тяжелый код (читать как " большее время загрузки"), и еще всяческие мелочи....

 

Вот такие мысли... Мучаюсь, не могу определиться... Может у кого-нибудь из форумчан есть аргументы "за" или "против" какого-нибудь из вариантов?

Буду признателен за любые комментарии - это поможет определиться "неопределившемуся"... =)


 

 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#2 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 15 April 2015 - 08:27

При реализации меню button не используются. Формы и JS тоже не являются необходимыми.
Ваш вариант делается примерно так:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
ul#menu{
  list-style: none;
  height: 38px; /*30+2*1+2*3 - высота кнопок (height) + удвоенная толщина рамки (border) + удвоенные вертикальные поля (margin), сюда же могут добавиться еще вертикальные отступы (padding), но у вас они равны 0*/
  overflow: hidden; /*чистим поток*/
}
#menu li{
  float: left; /*кнопки горизонтально*/
  height: 30px; /*высота кнопок*/
}
#menu li a{
  float: left; /*кнопки блочные (активна вся отведенная под них область а не только текст), выровнены влево*/
  height: 30px; /*высота активной области кнопок*/
  background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
  font: 16px/30px Arial, "Nimbus Sans L", Helvetica, sans-serif; /*размер шрифта/высоту строки делаем равной высоте кнопки 30px, чтобы отцентровать текст по вертикали, далее через запятую идут безопасные шрифты*/
  text-decoration: none; /*убираем подчеркивание на кнопках*/
  padding: 0 10px;
  margin: 3px;
  color: #fff; /* Цвет текста */
  border: 1px solid #333;
  border-radius: 15px;
}
#menu a:hover{ /*чем кнопки будут отличаться при наведении мыши*/
  background: linear-gradient(to top, #828c95 36%, #28343b, #b5bdc8);
}
</style>
</head>
<body>
<ul id="menu">
  <li><a href="index.php">О компании</a></li>
  <li><a href="production.php">Продукция&nbsp;|&nbsp;Услуги</a></li>
  <li><a href="">Контакты</a></li>
</ul>
</body>
</html>

Сообщение отредактировал yury: 15 April 2015 - 08:36

  • 1

#3 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 3013 сообщений
  • Репутация: 814

Отправлено 15 April 2015 - 09:02

@yury, Спасибо за еще один вариант, про возможность использования списков я совсем забыл... говорила мне мама: по ночам надо спать, а не сайты верстать =)))

JS тоже не являются необходимыми
 JS упоминался в контексте реализации возможности перехода посредством клика "по области с ссылкой", а не по самой ссылке... Вариант с использованием списка идентичен (функционально) использованию тега <a> (содержит в себе)...

button не используются
Знаю, я бы сказал "как правило", но из любых правил есть исключения ;)

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

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


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 15 April 2015 - 09:40

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

Приведенный выше пример, как раз, и предлагает возможность тыкать в любое место кнопки, в том числе на ее краешек.
  • 0

#5 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 3013 сообщений
  • Репутация: 814

Отправлено 15 April 2015 - 10:16

@yury, ещё раз спасибо, будет чем заняться этим ночером, попробую... )))


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/




Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru