Jump to content
  • 0

Прошу помочь со страницей портфолио (проблемы с переходом на разделы сортировки)


Vasilisa
 Share

Question

Всем доброго дня. Проблема следующая:

Есть пункт в меню (и соответственно раздел на сайте) - портфолио, которое имеет в себе подпункты "1" "2" "3" "4".

На странице решил сделать сортировку. Т.е. можно отобразить все работы, либо работы одного из разделов. Поскольку каждый из этих разделов отображен в выпадающем меню, хотела бы узнать, как сделать переход на каждый из вариантов сортировки.
Как выглядит сортитовка: http://tympanus.net/Tutorials/CSS3FilterFunctionality/index3.html

В коде это сделано так:

<section class="ff-container" style="padding-top: 200px;">							<input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />				<label for="select-type-all" class="ff-label-type-all">All</label>								<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />				<label for="select-type-1" class="ff-label-type-1">Web Design</label>								<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />				<label for="select-type-2" class="ff-label-type-2">Illustration</label>								<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />				<label for="select-type-3" class="ff-label-type-3">Icon Design</label>								<div class="clr"></div>								<ul class="ff-items">					<li class="ff-item-type-2">						<a href="http://dribbble.com/shots/366400-Chameleon">							<span>Chameleon</span>							<img src="images/1.jpg" />						</a>					</li>					<li class="ff-item-type-1">						<a href="http://dribbble.com/shots/272575-Tutorials-wip-">							<span>Tutorials (wip)</span>							<img src="images/2.jpg" />						</a>					</li>					<li class="ff-item-type-2">						<a href="http://dribbble.com/shots/372566-Flower">							<span>Flower</span>							<img src="images/3.jpg" />						</a>					</li>					<li class="ff-item-type-1">						<a href="http://dribbble.com/shots/138484-Symplas-website">							<span>Symplas website</span>							<img src="images/4.jpg" />						</a>					</li>					<li class="ff-item-type-3">						<a href="http://dribbble.com/shots/134868-TRON-Mobile-ver-">							<span>TRON: Mobile version</span>							<img src="images/5.jpg" />						</a>					</li>					<li class="ff-item-type-2">						<a href="http://dribbble.com/shots/347197-Cake">							<span>Cake</span>							<img src="images/6.jpg" />						</a>					</li>					<li class="ff-item-type-1">						<a href="http://dribbble.com/shots/186199-Tailoring-accessories">							<span>Tailoring accessories</span>							<img src="images/7.jpg" />						</a>					</li>					<li class="ff-item-type-3">						<a href="http://dribbble.com/shots/133859-App-icon">							<span>App icon</span>							<img src="images/8.jpg" />						</a>					</li>					<li class="ff-item-type-1">						<a href="http://dribbble.com/shots/188524-Event-Planning">							<span>Event Planning</span>							<img src="images/9.jpg" />						</a>					</li>				</ul>			</section>

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

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Five
      Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а?
      Свое образный переход будет... 

    • By blackrusjew
      Добрый
      Имеем одностраничник с несколькими якорями вида https://www.site.ru/#awards
      Возможно ли через htaccess и 301редирект привести их к виду https://www.site.ru/#awards/
      Спасибо)
       
    • By Etaro
      Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.


    • By IT Курсы Avenue
      IT - Avenue – курсы программирования в аудиториях и онлайн.
      Реальный выпускной проект и подготовка к трудоустройству!
       
      Avenue – современный центр подготовки IT-специалистов. Наши курсы – настоящая пошаговая инструкция о том, как стать крутым IT-специалистом и зарабатывать в $!

       
      Направления:
      Программирование (Java, PHP, Python, Scala, C++, C#, Javascript)
      Веб-разработка
      Разработка игр на Unreal Engine
      Мобильная разработка: Android, iOS (Swift)
      Робототехника
      Blockchain
      Дизайн: графический и Web-дизайн
      Тестирование: Тестирование ПО и Автоматизированное тестирование
      Разработка сайтов: интернет-магазины, CMS Wordpress, HTML+CSS
      Маркетинг: SMM, Интернет-маркетинг, контекстная реклама
      IT и администрирование: проектный менеджмент, IT –рекрутинг
      Excel (Продвинутый уровень – работа с формулами)

       
      Почему именно IT Школа Avenue?
      Обучение на практике.
      Независимо от курса, мы обучаем студентов ТОЛЬКО на практике! Искренне верим в догму практического применения знаний и предпочитаем «закреплять на практике» все приобретённые навыки.
      Преподаватели – реальные айти-шники, маркетологи и менеджеры.
      Первое правило эффективного обучения – компетентный специалист. Мы не сотрудничаем с преподавателями ВУЗ-ов и со специалистами, чей суммарный опыт работы в IT менее 5-ти лет. Главная цель IT Avenue – подготовка квалифицированных кадров для IT-компаний, которые готовы к решению рабочих задач сразу после выпускного.
      Обучение «с нуля»
      Учебная программа (независимо от курса) рассчитана на новичков, которые хотят освоить профессию «с нуля». Совершенно не стоит переживать за уровень своих начальных знаний. Даже если вы никогда не открывали среду разработки – наши преподаватели помогут вам разобраться во всех тонкостях новой IT-профессии.
      Единственное обязательное условие – желание обучится чему-то новому!
      Онлайн сертификат и помощь в трудоустройстве.
      Абсолютно все студенты получают на руки сертификат фирменного образца и его онлайн-копию, которую можно прикрепить к своему резюме.
      После окончания курса каждый студент получит уникальную возможность пройти 2-х часовой Интенсив по трудоустройству, на котором опытный рекрутер расскажет об ошибках на первом собеседовании; о том, что такое Качественное резюме и об общих правилах собеседования в IT-компании.
      Реальный финальный проект
      Каждый курс предполагает создание Финального Проекта. Финальный проект – это программа, написанная на одном из языков программирования, созданный студентом сайт, дизайн интерфейса или маркетинговая стратегия продвижения. На последнем занятии студенты вместе с преподавателем регистрируются на сервисах создания онлайн-портфолио и размещают туда свой первый учебный проект, который будет свидетельствовать о профессиональной компетентности студента.
      С нами не будет легко
      Да, мы можем использовать маркетинговый ход и написать «Стать программистом за пару недель? Легко, вместе с нами!», но мы хотим быть честными со своими студентами!
      Стать программистом трудно, но возможно! Вам придется: много учится, добросовестно выполнять домашние задания и повторно обрабатывать материал дома. Следуя всем нашим инструкциям и заданиям, вы будете готовы к реальному трудоустройству на 100%!
      Формат и условия обучения:
      занятие 2 раза в неделю по 2 часа в вечернее время: с 19:30 до 21:30 (дни занятий определяет группа)
      возможны разные варианты оплаты: «Оплата одним платежом» и «Оплата частями»
      возможность использовать учебный ноутбук
      кофе-бар для студентов IT Avenue
      Контакты:
      наш телефон: 8 917 552 03 33
      наш сайт: it.avenue-pro.ru
    • By Sve
      Всем привет :)
      Пытаюсь сверстать свой первый макет, и возникла проблема с меню. Должно быть, как на первой картинке - это макет из фш.
      Выходит, как на второй, меню спадает вниз. 
      Прошу, пожалуйста, тыкните на ошибку в коде, и, если есть возможность, объясните. буду очень рада ответам!
      Код кидаю:
      *{margin: 0; padding: 0; outline: 0} .clearfix::after { content:""; height: 0; display: block; clear: both; } div .container { width: 1300px; margin: auto; background: #fff; } header { width: 100%; height: 130px; border-top: 8px solid #a292b3; position: fixed; z-index: 2; } .logo { margin: 30px 0 20px 170px; } .menu { float: right; margin-right: 145px; } .menu li { display: inline-block; list-style: none; padding: 35px; }  


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy