Arttime
  • Уроки фотошоп
    • Photoshop от А...
    • Работа с текстом
    • Уроки для Вконтакте
  • Скачать
    • Социальные кнопки
    • Плагины для PS
    • Экшены
    • Кисти
    • Градиенты
  • Веб дизайн
    • Инфографика
  • Познавательно
    • ART подборки
    • Конкурсы
  • Творчество
« На главную / Уроки фотошоп / Уроки для Вконтакте / Пост "Открытое меню для группы Вконтакте"

Открытое меню для группы Вконтакте


Вконтакте открытое меню группы

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

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

Содержание

  • 1 Как сделать меню Вконтакте всегда открытым
    • 1.1 И по-прежнему остается вопрос: как сделать меню группы Вконтакте открытым?
    • 1.2 Дополнение. Где взять ссылку на меню?
    • 1.3 Дополнительное видео. Делаем меню всегда открытым:

Как сделать меню Вконтакте всегда открытым

Больше того, я научу вас делать меню в одном стиле с аватаркой группы, для этого вам понадобится скачать мои заготовки или научиться делать все самому 😉 Я дам вам и то, и другое.

Заготовки для меню PSD

Ниже на картинке я показал простую схему открытого меню. Это первое, с чего стоит начать. Как видно, есть 2 блока: большой слева и поменьше справа. Слева – это само меню, справа – аватарка.

Вроде бы все понятно, но вот та белая пустующая область над аватаркой в принципе необходима, но не обязательна. Я поставил ее для того, чтобы меню и ава были одинаковы по высоте.

вконтакте открытое меню группы

Схема у вас есть и размеры вы знаете. Можете приступить непосредственно к созданию, поместите на схему какой-то рисунок или просто однотонный цвет, сделайте нужные надписи, что угодно. Это дело вашей фантазии.

Ну и после некоторых усилий, у вас должно что-то получиться, как пример, скриншот ниже:

как сделать меню в контакте открытым

Меню и аватара гармонично смотрятся друг с другом. Но загвоздка в том, что это не совсем меню. Это обычная картинка, при нажатии на которую откроется действительно работающее меню. Это одна из проблем, так как приходится делать 1 лишнее движение, но визуально получается неплохо. Так что опять вам решать.

как сделать меню в контакте открытым

Это третья завершающая картинка и с ней проще простого. Главное, помните о том, что ширина у нее должна быть 600 px, а высота по желанию. Да и вообще: необязательно делать третье меню картинкой, в редакторе делайте, что вам хочется и нравится, к примеру, просто текст или схемы и таблицы.

И по-прежнему остается вопрос: как сделать меню группы Вконтакте открытым?

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

Теперь Вам нужно будет скопировать ссылку на меню, она имеет такой вид:

http://vk.com/page-18410568_276885674419

Дальше сделайте новую запись в группе, вот так:

меню вконтакте всегда открыто

В текст вставляем только что скопированную ссылку,  прикрепляем картинку открытого меню, ту картинку, о которой я рассказывал на примере схемы в начале.  Она то и является якобы открытым меню…

Опубликуйте новость, и последним этапом станет вот такая манипуляция –  Нажмите на «ВРЕМЯ» под новостью:

как сделать меню вконтакте развернутым

 

И в открывшемся окошке нажмите на кнопку «ЗАКРЕПИТЬ»

 

как сделать меню вконтакте развернутым

 

Закрывайте окно и обновите страничку. Если вы все сделали правильно, то меню Вконтакте будет всегда открыто. А если что-то не получается, оставляйте комментарии.

Еще один пример замечательного открытого меню:

как оформить меню вконтакте в группе

Небольшой разбор полетов: то меню, которое находится под спойлером, невозможно сделать (на данный момент) всегда открытым, так как по неясным мне причинам ВК не дает такой возможности, хотя раньше так можно было делать. Кто знает, возможно через время такая возможность появится…

Дополнение. Где взять ссылку на меню?

Мне по почте пришло пару писем на тему того, что не получается найти ссылку на меню под спойлером. Действительно, достать ее довольно-таки непросто, выполните такие пункты:

  1. Меню должно уже быть сделано в редакторе и находиться под спойлером, есть? Отлично, идем дальше;
  2. Нажмите правой кнопкой мыши по спойлеру и выберите там “Открыть в новой вкладке“, казалось бы ссылку можно там получить, но нет.
  3. Нажмите “Редактирование“, а потом “Вернуться к странице“, эти ссылки находятся в верхнем правом углу;
  4. Все, в адресной строке будет отображаться корректная ссылка такого вида: http://vk.com/page-18410568_276885674419.

Если у вас есть способы попроще, буду благодарен, если опишите их в комментариях.

Дополнительное видео. Делаем меню всегда открытым:

Ну все, всем спасибо за внимание!

18 Сен 13 | Теги: Photoshop, Вконтакте, дизайн, советы, Уроки КатегорияУроки для Вконтакте

выборочная цветокоррекция Узнай как выборочная цветокоррекция поможет спасти вашу фотографию.
как вырезать обьект в фотошопе Нужно вырезать обьект с фото? Не беда урок как вырезать обьект в фотошопе поможет вам справится быстро илегко.
как создать кисть Надоели невзрачные кисти? Урок как создать кисть поможет вам!.
макет визитки Как сделать макет визитки по правилам типографий.
установить кисть Очень просто установить кисть в фотошоп
  • Твитнуть
  • 14
  1. СергейДек 10, 2013 @ 21:16
    Аватар

    Жень интересная и полезная статья! Многим я думаю будет полезна, я тоже подчерпнул для себя кое что новое, спасибо! 😉

    Ответить
  2. алексейЯнв 24, 2014 @ 08:09
    Аватар

    у меня почему то нельзя закрепить картинку , кнопка закрепить отсутствует (( из зв чего это может быть?

    Ответить
    • Eвгений КомиссаровЯнв 29, 2014 @ 10:21
      Аватар

      Возможно вы не там смотрите, А вы главный администратор группы?

      Ответить
    • онеоеноЯнв 31, 2014 @ 15:37
      Аватар

      Скорей всего вы от себя пост сделали, а нужно от имени группы)

      Ответить
      • Надежда ПрохороваМар 8, 2016 @ 18:50
        Аватар

        ВАЖНО!!! От имени ГРУППЫ получилось закрепить. БлагоДарю! Мучилась полдня!

  3. ВасяФев 2, 2014 @ 17:10
    Аватар

    А толку от этой картинки.. она же является ссылкой на саму себя, а сылкой нп меню является незаметная ссылка… бред какой то

    Ответить
    • Eвгений КомиссаровФев 2, 2014 @ 17:16
      Аватар

      нет, картинка так же является ссылкой на страницу с меню.

      Ответить
  4. ЛераФев 5, 2014 @ 20:49
    Аватар

    Наконец то рассказали нормально как это сделать)СПАСИБО!!!!

    Ответить
  5. ЕвгенийФев 6, 2014 @ 09:13
    Аватар

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

    Ответить
    • Eвгений КомиссаровФев 6, 2014 @ 09:43
      Аватар

      Ну и что изменит “show” ?

      Ответить
      • ЕвгенийФев 6, 2014 @ 11:18
        Аватар

        Тему прочитай! Будет раскрытое меню!!!

      • Eвгений КомиссаровФев 6, 2014 @ 11:26
        Аватар

        Нет ну серьезно, ссылкой поделишься на информацию? Я вот как ни старался ничего по этой теме не нашел…

  6. ЕвгенийФев 10, 2014 @ 00:47
    Аватар

    С П А С И Б О
    О Г Р О М Н О Е!!!

    Ответить
  7. ГерманФев 10, 2014 @ 20:03
    Аватар

    Большое спасибо! Очень помогли!

    Ответить
  8. ФархадФев 20, 2014 @ 20:14
    Аватар

    Спасибо большое! От души помог! Если будут ещё интересные статьи буду рад почитать их!

    Ответить
    • Eвгений КомиссаровФев 20, 2014 @ 20:24
      Аватар

      Стараюсь 😉

      Ответить
  9. ЛидаМар 3, 2014 @ 12:39
    Аватар

    У вас закрепленная картинка получается на всю ширину полосы, а у меня почему то при соблюдении размеров она меньше чем само меню когда закрепленная. Меню и картинка у меня имеет один вид. Что я делаю не так?

    Ответить
  10. ЕвгенийМар 31, 2014 @ 13:00
    Аватар

    ОГРОМНОЕ СПАСИБО!!!!! многие за простые действия просят большие деньги, а я сделал все сам!! Огромное спасибо еще раз!!

    Ответить
    • Eвгений КомиссаровМар 31, 2014 @ 13:11
      Аватар

      Очень приятно 🙂 Спасибо!

      Ответить
  11. АндрейАпр 5, 2014 @ 18:39
    Аватар

    “У вас закрепленная картинка получается на всю ширину полосы, а у меня почему то при соблюдении размеров она меньше чем само меню когда закрепленная. Меню и картинка у меня имеет один вид. Что я делаю не так?”
    Такая же проблема. Напишите, как решить.

    Ответить
  12. РоманАпр 17, 2014 @ 13:40
    Аватар

    http://vk.com/sodul?ad_id=14877308 вот нашел группу, и как там сделано чтобы открыто было ДЕЙСТВУЮЩЕЕ меню ??

    Ответить
    • Eвгений КомиссаровАпр 17, 2014 @ 14:51
      Аватар

      Здравствуйте, это такая ссылка с открытым меню, на самом деле оно закрытое. http://vk.com/sodul вот та же группа но меню закрытое.

      Ответить
  13. РоманАпр 17, 2014 @ 14:54
    Аватар

    а ссылка для всех групп одна и таже чтоб открыть ??
    вот например http://vk.com/club36834369 вот в эту группу, как будет выглядеть ссылка ?

    Ответить
    • Eвгений КомиссаровАпр 17, 2014 @ 15:34
      Аватар

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

      Ответить
  14. КонстантинАпр 26, 2014 @ 14:04
    Аватар

    Подскажите пожалуйста, а как сделать, чтобы открытый или закрытый спойлер отображался над или под “картинкой меню” на главное странице группы.

    Ответить
  15. ВикторМай 11, 2014 @ 18:55
    Аватар

    Отличный урок! Спасибо большое, очень помог. Все доступно! Сохранил в закладки!

    Ответить
  16. MakerИюн 19, 2014 @ 15:46
    Аватар

    Хороший урок.

    Ответить
  17. НатальяИюл 3, 2014 @ 08:18
    Аватар

    Подскажите, а где посмотреть ваш урок о том как пользоваться схемой?

    Ответить
    • Евгений КомиссаровИюл 3, 2014 @ 09:44
      Аватар

      нет такого ) Там все просто, открываете ее в фотошопе и рисуете поверх схемы, она нужна лишь дл того что бы расположить меню и аватарку ровно относительно друг друг…

      Ответить
  18. Афанасий 7х8 - 8х7Июл 7, 2014 @ 20:52
    Аватар

    Опять не то пальто..
    Как это сделать без закрепления? Ведь когда закрепляешь картинка меняет размеры…

    Ответить
  19. ЕленаИюл 29, 2014 @ 17:14
    Аватар

    Зашибись! Все получилось)) Мерси огромное! (единственная нормальная статья)

    Ответить
  20. FockliАвг 19, 2014 @ 03:43
    Аватар

    Ребята реально красавчики ВЫ ЛУЧШИЕ

    Ответить
  21. ВалентинСен 12, 2014 @ 13:23
    Аватар

    Куда ставить show в режиме разметки?! Или в каких тегах?!

    Ответить
    • Евгений КомиссаровСен 12, 2014 @ 13:45
      Аватар

      Нет такого, это слухи 😉

      Ответить
  22. НатальяОкт 22, 2014 @ 09:30
    Аватар

    Спасибо огромное!!! Давно искала как сделать открытое меню)))

    Ответить
  23. ОлесяНоя 18, 2014 @ 12:48
    Аватар

    Спасибо огромнейшее!!!! Вы очень выручили!!!!

    Ответить
  24. ВиталийДек 1, 2014 @ 20:44
    Аватар

    Доброго Вам дня. Сделал все как у вас написано, но между аватаром группы и фотографией менюшки большой зазор. Как этот косяк исправить? Вот собственно проблема https://vk.com/club81694342

    Ответить
  25. НатальяДек 9, 2014 @ 13:15
    Аватар

    Здравствуйте. мне нужна ваша помощь
    Изучила вдоль и поперёк Ваш пост , но у меня не работают ссылки…

    т.е. я нажимаю на меню, а у меня только картинка открывается, и всё(((
    Подскажите, пожалуйста, где я допустила ошибку!
    [[photo79226035_346784782|390x100px;noborder;nopadding|page-82275713_48630243 ]]

    Ответить
    • Евгений КомиссаровДек 9, 2014 @ 13:23
      Аватар

      Попробуйте вот так…
      [[photo79226035_346784782|390x100px;noborder;nopadding|page-82275713_48630243]]

      Вся проблема в конце кода возле скобок, но могу ошибаться, пробуйте 😉

      Ответить
  26. НатальяДек 9, 2014 @ 13:33
    Аватар

    СПАСИБО!!!!! Точно! А я уж расстроилась, что нифига не получается!

    Еще раз спасибо!

    Ответить
  27. ГалинаДек 17, 2014 @ 11:15
    Аватар

    У меня после закрепления, меню уменьшается, как сделать так что б было нормальное меню

    Ответить
    • Евгений КомиссаровДек 17, 2014 @ 11:19
      Аватар

      размер картинки 395*290 px должен быть/

      Ответить
    • Евгений КомиссаровДек 17, 2014 @ 11:31
      Аватар

      Если не ошибаюсь, нужно снять “птичку” напротив – “сохранять пропорции”. Как то так. на планшете сейчас ничего посмотреть не могу )

      Ответить
  28. ГалинаДек 17, 2014 @ 11:28
    Аватар

    как же его выставить, если когда редактируешь одну сторону, автоматически редактируется другая сторона

    Ответить
  29. ГалинаДек 17, 2014 @ 13:45
    Аватар

    что то я запуталась с пропорциями, если ава 200 на 500, то какого размера должно быть меню слева?

    Ответить
  30. НатальяДек 21, 2014 @ 20:07
    Аватар

    Здравствуйте, делаю открытое меню, соблюдаю все размеры, но левая картинка получается уменьшенной. Размер аватарки 500х200 px, размер меню 450х394 px.Даже если я меняю размер меню на очень большой (пробовала 1900х1500 px) при закреплении все равно она маленькая, такое впечатление, что какой-то стандартный размер где-то прописан вконтакте. Что я делаю не правильно, подскажите пожалуйста?

    Ответить
  31. ГалинаДек 21, 2014 @ 20:17
    Аватар

    попробуйте размер картинки 395*290 px

    Ответить
    • НатальяДек 22, 2014 @ 19:38
      Аватар

      Спасибо, Галина! Левое меню получилось)) Правда аву пришлось изменять по высоте, чтобы ровненько смотрелось. Теперь у меня само меню изменилось(((((((( все кнопки в разброс, хотя при закрытом меню выпадала цельная картинка с кнопками. Начала менять размер и вообще картинка стала ввиде вики-разметки…

      Ответить
      • ГалинаДек 24, 2014 @ 09:07
        Аватар

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

  32. ВиталийДек 27, 2014 @ 19:45
    Аватар

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

    Ответить
    • АлексЯнв 15, 2015 @ 11:03
      Аватар

      может стоит использовать ;noborder;nopadding

      Ответить
  33. КсенияЯнв 19, 2015 @ 12:12
    Аватар

    Добрый день, подскажите, пожалуйста. Все сделала как описано, получилось открытое мень, НО, ссылается не на азделы а просто на саму картинку….хотя до этого все прекрасно перемещалось по группе..Подскажите, пожалуйста, в чем может быть проблема. Заранее спасибо.

    Ответить
  34. ЕкатеринаФев 24, 2015 @ 19:42
    Аватар

    Где взять ссылку на меню?? Пожалуйста помогите!!!!!!!

    Ответить
    • Евгений КомиссаровФев 24, 2015 @ 20:48
      Аватар

      В статья написано 😉

      Ответить
  35. ДимаИюл 17, 2015 @ 11:48
    Аватар

    Я сделал всё как в видео, но по какой то причине ссылку на меню ни кто не может просматривать кроме администраций, что я сделал не так подскажите?

    Ответить
  36. СветланаСен 9, 2015 @ 12:47
    Аватар

    Добрый день, я вроде делаю все верно, но почему то при прописывании Вики-кода и нажатии предпросмотра страницы, картинка не появляется… Вот мой пример: [[photo-48210421_381764328|779x93px;nopadding|http://topic-101891154_32232079]]
    что не так?

    Ответить
    • Евгений КомиссаровСен 9, 2015 @ 12:51
      Аватар

      Картинка не открывается, либо ссылка неправильная на нее. Либо она закрыта для посторонних в настройках приватности… Где то то там в общем смотрите 😉

      Ответить
  37. АльфираЯнв 15, 2016 @ 15:04
    Аватар

    Здравствуйте! Сделала меню в контакте в одном стиле с аватаркой. Меню закрепила чтобы было всегда открыто. На картинке кнопка “Открыть меню”. При нажатии на картинку открывается закрепленная страница с меню. Все хорошо когда смотришь через компьютер. При просмотре через мобильные устройства при нажатии на картинку с кнопкой попадаешь на саму картинку. Почему так? То же в закрепленной картинке на стене главной страницы. Подскажите пожалуйста, нигде в интернете не смогла найти ответа. И еще при просмотре через телефон не видно аватарки и картинка с кнопкой получается обрезанной???

    Ответить
    • Евгений КомиссаровЯнв 15, 2016 @ 15:16
      Аватар

      Такая особенность самого Вконтакте….. Что бы смотрелось на мобильном, закрепленное меню не подойдет.

      Ответить
  38. РусланЯнв 28, 2016 @ 21:38
    Аватар

    Привет женя вот у меня такой вопрос: с левой стороной общая картинка закреплена и сверху картинки есть место для статуса,при загрузке аватарки с права то ава получается по выше чем левая часть и как быть подскажите пожалуйста ,

    Ответить
  39. ТатьянаМар 20, 2016 @ 15:02
    Аватар

    Евгений, от всей души, благодарю вас! Ваши уроки мне очень помогли! Спасибо!

    Ответить
  40. ЕвгенийАпр 10, 2016 @ 03:18
    Аватар

    Евгений, после закрепления сообщения со ссылкой на меню, выводится уменьшенная картинка и слева надпись свежие новости. Что делаю не так? Вот ссылка на группу https://vk.com/club119164557

    Ответить
  41. ИваннаДек 9, 2016 @ 22:03
    Аватар

    у меня такая проблема, когда я закрепляю запись, у меня в группе вверху появляется два типа меню первое- закрепленная запись, второе – информация.. когда нажимаю на закрепл запись – откривается страница на которой вверху меню что хотела поставить вверху, но вся остальная инфо на другой ссілке…. что делать?

    Ответить
  42. ИваннаДек 9, 2016 @ 22:06
    Аватар

    по4ему так и пишет “закрепл запись” и пишет кто ее закрепил… по4ему????

    Ответить
  43. ОльгаСен 12, 2017 @ 16:38
    Аватар

    Подскажите пожалуйста. Когда участники группы заходят в меню группы (https://vk.com/club153005204) им выдается запись “страница скрыта настройками приватности”, хотя я как администратор могу просматривать меню? Не могу понять почему, все сделала как написано. Что делать?

    Ответить

Оставить комментарий (Отменить ответ)

Статьи на E-mail

  • RSS
  • Twitter
  • Вконтакте
  • google
stylus.ua

Интересные статьи

Фишки фотошопа выпуск №1 Фишки фотошопа. Часть 1
металлическая кнопка в фотошопе Делаем металлическую кнопку
цветовой диапазон Как вырезать сложный объект
фишки фотошопа Фишки фотошопа часть 3

Страницы

  • Главная
  • О проекте
  • Контакты
  • Карта сайта
  • Друзья блога

Теги

Action art jpg Photoshop Градиент Кисть Скачать кисть Уроки Экшен дизайн из сети кнопки конкурсы мой арт полезняшки скачать советы социальные кнопки текстуры файлы

Случайные записи

  • О дизайне текста
  • Создаем свою любимую кисть
  • Макет чашки мороженого
  • Макет миниатюрных кофейных чашек (PSD)
  • Основные тренды веб-дизайна
  • 9 бесплатных иконок соцсетей для вашего сайта
  • Об авторе

    Я – автор этого блога и еще десятка успешных проектов.

    В данный момент занимаюсь интернет-коммерцией, иногда пишу в свои блоги. Собираю деньги на открытие грандиозного проекта.

    Пишите мне на странице обратной связи.

    © Все права защищены. | Копировать без обратной индексируемой ссылки на ARTtime запрещено!