• августа 28, 2009

    Домашка №1: нестандартное меню

    Ну что, начнем делать домашки потихоньку?

    Я сейчас делаю проект, в котором есть вот такое меню:

    design1

    Вроде все стандартное, но за одним исключением: после первого пункта меню стоит логотип компании. Само меню набрано обычным шрифтом (Arial), а логотип — фирменным, поэтому вставляется картинкой. Дизайнер хочет, чтобы меню работало вот так:

    guides

    Расстояние между пунктами — 5% от ширины контейнера, все выравнивается по базовой линии. Как бы вы это сверстали? Даю наводку: крутое решение должно выдерживать любое (в разумных пределах) изменение размера шрифта и требовать минимального вмешательства в серверную часть, которое все это генерирует.

    Свое решение нужно выложить где-нибудь на сервер и запостить ссылку в комментариях (никаких архивов, ссылка прямиком на сверстанную страницу). Если выкладывать некуда — постите коммент и высылайте мне архив, я размещу у себя на сервере и поставлю ссылку. Итоги будут подведены через неделю, 4 сентября в понедельник, 31 августа.

    Правила домашки

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

    Все публикуемые задачи на 100% решаемы — это значит, что у меня либо есть готовое решение, либо я знаю, как это сделать.

    Метки: , ,

    • 52 комментария

    1. Pion2er
      28 августа 2009

      Не знаю, правильно ли я все понял и сделал, но вот что получилось.
      http://pion.ru/menu.html

    2. DeMx
      28 августа 2009

      Pion2er
      Не катит, ибо на сервере неудобно такое меню генерить.

      Я бы поместил пункты в LI и у первого пункта (класс «first») задал бы padding-right равным ширине логотипа + 5%. Ну а лого поверх абсолютом. Писать лень, да и думаю есть решение красивше. 🙂

    3. Octane
      28 августа 2009

      Логотип должен быть ссылкой?

    4. WebCredo.net
      28 августа 2009

      Мой пример. http://webcredo.net/demo/dz/
      В IE только не работает… 🙂

    5. openid.yandex.ru/DnV1eX/
      28 августа 2009

      http://dnv.110mb.com/menu.htm

    6. iSergey
      28 августа 2009

      Тока не смейтесь.
      http://webobjects.ru/l/

    7. Dark Preacher
      28 августа 2009

      Мой простенький вариант, отображается идентично во всех мажорных браузерах
      http://eurodental.com.ua/user/menu_test.html

    8. Дмитрий Пленкин
      28 августа 2009

      http://projects.sukebe.ru/test-your-might/example.html
      Получилось выполнить все условия, которые я выцепил из текста и картинки, за исключением левого отступа — при выбранном мной подходе его точно можно задать только если известна ширина первого пункта (т.е. если известно его содержимое)/

      http://projects.sukebe.ru/test-your-might/example2.html
      Начал ваять второй вариант, но уже сил нет — через два часа надо просыпаться и за руль садиться 🙂

    9. Ante
      28 августа 2009

      http://stanut.by/_/dz01/

    10. iSergey
      28 августа 2009

      И еще вариант http://webobjects.ru/l/2.html
      Ну думаю поймете, что я имел ввиду.

    11. майк
      28 августа 2009

      http://www.tormozzz.ru/test/dz1.php
      Спасибо за задачу, открыл для себя парочку новых фиксов для IE 😀

    12. Андрей
      28 августа 2009

      Вот такое решение пришло в голову )
      http://skyh.iesa-test.ru/logomenu/

    13. Хорен
      28 августа 2009

      http://n1design.ru/n1/homework1.html

    14. Сергей Чикуенок
      28 августа 2009

      2Octane: Да, конечно, логотип должен быть ссылкой

    15. Igor
      28 августа 2009

      http://morozoff.info/examples/dom1/

      Сделал dl.
      dt идет впереди.

      Вроде везде работает.

      Без экспрешинов.
      Если не загружен лого, то подобрал текст.
      Ну и два варианта. Со ссылкой и без.

    16. Алексей Скрипник
      28 августа 2009

      http://skripnik.com/tmp/logo-megacompany/

    17. Igor
      28 августа 2009

      2Алексей Скрипник: тока повесь на logo overflow:hidden. а то при увеличении шрифта буквачки появляются.

    18. Сергей Чикуенок
      28 августа 2009

      Хм, а комментарий от DeMx кто-нибудь читал? 🙂

    19. Igor
      28 августа 2009

      2Сергей Чикуенок. О. Оказывается у меня для ie сделано так 🙂 Просто в начале сделал для умных браузеров. Потом тока для ie так сделал. Хотя можно было сделать для всего.

    20. Сергей Чикуенок
      28 августа 2009

      Я вообще-то намекнул на генерацию кода со стороны сервера 🙂

    21. fekss
      28 августа 2009

      http://projects.sukebe.ru/test-your-might/example.html

      http://skyh.iesa-test.ru/logomenu/

      нормально смотрятся с отключнyым css )

    22. Igor
      28 августа 2009

      Ну если мы за простоту генерации.

      То варианты получается.

      dl>dt+dd или h1+ul>li
      ну и вешать на первый пункт class=»first»

      Ну это если красивооо делать 🙂

    23. shura
      28 августа 2009

      мой вариант
      http://www.4rome.ru/homework/

    24. scorpix
      28 августа 2009

      http://www.scorpix.ru/dz1/

    25. DnV
      28 августа 2009

      Объясните, пожалуйста, что значит «на сервере неудобно такое меню генерить»? Мне и серверу очень удобно, почему вы считаете, что неудобно?

    26. Igor
      28 августа 2009

      Ну я вместо Сергея могу объяснить.

      Большинство вариантов выглядят так:

      первый пункт
      логотип
      N пунктов

      Стандартные движки генерируют в целом навигацию автоматом. Для того чтобы вставить после первого пункта li с логотипом потребуется вмешательство в php. Тогда как Сергей хочет по минимуму вмешательств.

    27. Сергей Чикуенок
      28 августа 2009

      Тогда как Сергей хочет по минимуму вмешательств.

      Думаю, не ошибусь, если скажу, что любой серверный программист хочет того же.

    28. DeMx
      28 августа 2009

      Серверный программист хочет пива. Это я как серверный программист заявляю. =)

    29. Павел Володько
      28 августа 2009

      http://wolodko.narod.ru/test/menu.htm

    30. Вадим Гончаров
      28 августа 2009

      http://vadim.kag.su/sch/homework1/

    31. Павел Петрухин
      28 августа 2009

      Сергей, высылаю свой вариант вам на почту.

      UPD: http://chikuyonok.ru/u/hw1/jokeme83/

    32. banzalik
      28 августа 2009

      только 4 примера используют first-child, и это при том, что не понимает его только 6 ие, странно

    33. Мохов Олег
      28 августа 2009

      Попробую и я: http://mokhov.roodex.ru/homework/task-1/solution-1/index.html

    34. Дмитрий Пленкин
      28 августа 2009

      > Хм, а комментарий от DeMx кто-нибудь читал? 🙂
      А как же 🙂 Правда некоторым (видимо, только «серверным программистам») это было сразу понятно 🙂

      Собственно, требование по HTML-коду в моем варианте (http://projects.sukebe.ru/test-your-might/example.html) было учтено. Правда он сырой и недоделанный, но это уже другой вопрос =)

      > Серверный программист хочет пива. Это я как серверный программист заявляю. =)
      Серверный программист уже с пивом сидит, потому что за день задолбался 🙂

    35. Дмитрий Пленкин
      28 августа 2009

      > Андрей, 28 августа 2009
      >
      > Вот такое решение пришло в голову )
      > http://skyh.iesa-test.ru/logomenu/

      Сходно мыслим 🙂

      Вертикальное выравнивание похоже сделали: картинка позиционируется с помощью вертикального смещения двумя способами одновременно — один дает сдвиг в пикселях, другой — в относительных единицах. Это позволяет подогнать «базовую линию» текста на картинке подровнять с базовой линией текста меню.

      Идея позиционирования элментов меню и лого тоже у нас совпадает — все элементы кроме первого пункта меню флоатятся, первый пункт меню позиционируется абсолютно (right: 100%).
      Проблема, соответственно, тоже одинаковая — левый край меню не получается спозиционировать точно. Отступ слева получается равен заданному отступу контейнера минус ширина первого пункта меню.

    36. Octane
      28 августа 2009

      Только идея: http://www.js-core.ru/public/homework1/
      В IE и старых браузерах без дополнительных манипуляций работать не будет.

    37. Павел Петрухин
      28 августа 2009

      В своём предыдущем варианте обнаружил ошибки(…
      Сергей, высылаю второй вариант на почту.

      UPD: http://chikuyonok.ru/u/hw1/jokeme83/2.html

    38. Ante
      28 августа 2009

      http://stanut.by/_/dz01

      h1 + ul>li
      без дополнительных классов
      работает в ie6
      держит бейслайн при любом размере шрифта
      жёсткая левая граница

      пока не работает в FF3.0 🙁

    39. kvakazyambra
      29 августа 2009

      http://english-studies.ru/dz/1/

    40. EzheG
      29 августа 2009

      Покажу и свой вариант http://eve-m.ru/ch1/
      Проверял в Опере, Мозиле, Хроме и IE 5.5-8.

    41. Артём
      30 августа 2009

      Я прально понял задание? 😉
      http://piumosso.ru/menu.html

    42. Сергей Комаров
      30 августа 2009

      http://ioracle.ru/examples/non-standard-menu/

    43. zolotoy
      30 августа 2009

      Мой вариант:
      http://bnhnfgbtrv.com/pr/dz/nav.html

    44. Мохов Олег
      31 августа 2009

      http://mokhov.roodex.ru/homework/task-1/solution-2/index3.html — ещё один способ (из предложенных мной этот считаю лучше)

    45. Edgar Garovsky
      31 августа 2009

      Подготовил несколько вариантов решения поставленной задачи. В первом картинка (logo.png — 1,12кб, 103x68px) добавлена через тег [img], во втором, третьем и четвертом — фоном. Все списки без классов, кроме последнего — добавлен .logo для одного пункта, для лучшей стилизации текста под картинкой. Последний пункт прижимается к правому краю основного блока (без отступа).

      Сделано без использования expression/first/last-child, код валиден, doctype — html5. Проверено и отлично работает в браузерах IE 5.5/6/7/8, Opera 9.2/9.5/10, Firefox 2/3, Safari 4, Google Chrome.

      Архив отправил на почту.

      UPD: http://chikuyonok.ru/u/hw1/garovsky/

    46. Сергей
      1 сентября 2009

      Понедельник прошел. Ждем итоги 🙂

    47. Deerua
      1 сентября 2009

      Из стоящих вариантов наверное только http://stanut.by/_/dz01
      Завтыкал поучаствовать 🙂

    48. EzheG
      1 сентября 2009

      Deerua, IE 5.5 ваш вариант «рубит».

    49. Сергей Чикуенок
      1 сентября 2009

      Да, я обязательно подведу итоги, но пока времени катастрофически не хватает 🙁

    50. Shugich
      2 сентября 2009

      Вот такая вот вещь получилась… Везде вроде как работает…
      http://shugich.ru/dz/1/index.html

    51. Влад Трушин
      2 сентября 2009

      Мне кажется, что хитрость в том, чтоб логотип находился вне списка )

      <h1 class=»b-logo»>megacompany</h1>

      <ul class=»b-menu»>
      <li><a href=»#»>item1</a></li>
      <li><a href=»#»>item2</a></li>
      <li><a href=»#»>item3</a></li>
      <li><a href=»#»>item4</a></li>
      </ul>

    52. deerua
      4 сентября 2009

      EzheG каков процент пользователей ИЕ5.5?