Html как сделать всплывающее меню: Как сделать всплывающее меню при наведении
Создание простого меню для сайта на HTML и CSS
И снова всех приветствую на нашем проекте! Сегодня у нас будет рассмотрен урок на тему создание простого меню для сайта. Тема очень распространенная, но надеюсь Вы сможете для себя, как новичок, получить полезные знания и возможно просто разобраться, как это реализуется.
Данный урок был записан по просьбе одного из наших постоянных читателей, поэтому другие темы и не рассматривались. После чего я, вместе со своим напарником по разработке, Евгением Кузьменко, подготовил для Вас выпадающее меню для сайта. С данным уроком Вы можете ознакомиться, как на сайте прочитав статью, так и по видео уроку, чтобы более детально понять основные принципы реализации выпадающего меню. Кстати, по поводу создания меню, также рассказывали и в других уроках, например таких как: Создание меню в Битрикс, Делаем меню как в nexus или например, как Адаптивное меню SlickNav, поэтому можете рассмотреть и их, вдруг что-то окажется полезным и пригодится!
Первый шаг. HTML.
И так, переходим к первому шагу данного урока и сначала нам нужно подключить файл demo.css, который лежит у нас в папочке css, а затем уже подключаем шрифт Open Sans. Ребята, я рассказываю все по демо, поэтому Вы можете все делать по своему усмотрению.
<link rel="stylesheet" href="css/demo.css"> <link href="http://allfont.ru/allfont.css?fonts=open-sans" rel="stylesheet" type="text/css" />
Далее нам нужно создать обычный маркированный список
<ul> <li> <a href="">Ссылка</a> <ul> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> </ul> </li> <li> <a href="">Ссылка</a> <ul> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> </ul> </li> <li> <a href="">Ссылка</a> <ul> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> </ul> </li> <li> <a href="">Ссылка</a> <ul> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> </ul> </li> <li> <a href="">Ссылка</a> <ul> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> </ul> </li> </ul>
Второй шаг. CSS.
Переходим к стилям CSS и первым делом, мы должны установить тот шрифт, который прописали вначале данного урока, а именно Open Sans. После того, как наш шрифт успешно прописан, переходим уже к самому каркасу нашего маркированного списка, которому зададим определенные свойства, а также расположение и позиционирование элементов. Заметим, что мы создаем горизонтальное меню, поэтому применяем свойство float left.
#nav{
font-family: 'Open Sans', arial;
}
#nav li{
float:left; /* все ссылки идут слева на право */
position:relative;
list-style:none; /* убираем точки */
background:#ff3131;
width:190px;
}
Убираем у каждой ссылки нашего меню нижнее подчеркивание, а также придаем белый цвет. Далее, чтобы при наведении на выпадающее меню основная ссылка была выделена, задаем идентификатор active, а также не забываем про сам цвет при наведении всех элементов данного меню. Так как у нас имеется выпадающее меню, нам соответственно нужно его будет скрыть. Для этого прописываем свойство visible и указываем ему параметр hidden, а также не забываем про абсолютное позиционирование данного элемента.
#nav a{
text-decoration:none;
display:block; /* делаем блочным элементов тег "a" */
padding:35px 65px;
color:#ffffff;
}
#active a, #nav li:hover > a{
background:#b32424;
}
#nav ul {
visibility:hidden; /* скрываем выпадающее меню */
padding:0;
position:absolute;
}
Теперь после того, как наше меню успешно скрыто, нам нужно сделать выпадающее меню. Это реализовать достаточно просто, нужно задать элементу меню с идентификатором nav свойство visible.
Тем самым мы получим результат выпадающего меню. Далее все по стандарту, изменяем выпадающее меню на наше усмотрение, задаем ему отступы и цвет. Не забываем указать свойство
#nav li:hover > ul{
visibility:visible; /* показываем выпадающее меню при наведении */
position: relative;
}
#nav ul a{
padding:18.5px 65px; /* делаем отступы выпадающего меню меньше от основного */
}
#nav ul li:hover{
background:#d92a2a;
}
#nav li:first-child:hover > ul{
left: 0px; /* при наведении на первый элемент чтобы не съежало выпадающее меню */
}
Так как Евгений, подготовил макет данного меню, то все моменты связанные с его дизайном, мы реализовали с Вами в соответствии. Теперь, нам нужно реализовать
#nav > li{
border-right: 2px solid #d92a2a; /* добавляем рамку к основному меню справа */
}
#nav > li:last-child{
border-right: none; /* убираем рамку справа основного меню */
}
Теперь, пора перейти к выпадающему меню, где функциональные свойства намного покажутся сложнее основного меню, ведь нам придется задавать определенные свойства элементам. Для начала укажем
#nav > li ul li{
border-left: 2px solid #d92a2a; /* добавляем рамку к выпадающему меню слева */
border-right:2px solid #d92a2a; /* добавляем рамку к выпадающему меню справа */
}
#nav li:first-child ul li,#nav li:first-child ul{
border-left:none; /* убираем рамку у выпадающего меню слева */
}
#nav li:last-child ul li,#nav li:last-child ul{
border-right:none; /* убираем рамку у выпадающего меню справа */
}
Проверяем все на сайте и видим, что все отлично работает, кроме одной детали, а именно наше выпадающее меню при наведении на вторую ссылку и последующую сдвигается немного вправо. Для этого, чтобы устранить данную проблему, мы задаем элементу меню с идентификатором nav свойство left и в качестве параметра даем ему минус два. (см. пункт 1)
#nav li:hover > ul{
left: -2px; /* смещаем выпадающее меню слева от размера рамки*/
}
Проверяем все на сайте и видим, что мы теперь действительно все сделали верно и можем заканчивать данный урок.
Роман Краутер
Как сделать выпадающее меню списком?
Как вариант так:
HTML
<h2>Vertical Submenu</h2> <nav> <ul> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li><a href="#">Sub Menu 4</a> <ul> <li><a href="#">Deep Menu 1</a> <ul> <li><a href="#">Sub Deep 1</a></li> <li><a href="#">Sub Deep 2</a></li> <li><a href="#">Sub Deep 3</a></li> <li><a href="#">Sub Deep 4</a></li> </ul> </li> <li><a href="#">Deep Menu 2</a></li> </ul> </li> <li><a href="#">Sub Menu 5</a></li> </ul> </li> </ul> </nav>
CSS
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}https://jsfiddle.net/rrub99sy/
student_aPnalwdy
Как сделать выпадающее меню html?
При создании меню сайта можно столкнуться с проблемой ограниченности пространства, необходимостью экономить место и избегать нагромождения лишней информации. Все это удобно решается элементами, которые скрываются, когда не нужны. Если хочется избежать использования скриптов, такое меню можно создать с помощью средств html и css. Создать сайт самостоятельно с Wix.comИнструкция
- Ссылка 1.
- Ссылка 2.
- Пункт 2.1.
- Пункт 2.2.
- Пункт 2.3.
- Ссылка 3.
- Пункт 3.1.
- Пункт 3.2.
- Пункт 3.3.
- Пункт 3.4.
- — сам список, а
- — каждая из его строк. Добавьте для всех будущих ссылкок, которые должны создавать выпадающее меню, свой список с подпунктами. Превратите названия пунктов меню в ссылки, заключив их в тэг . Присвойте его параметру href адрес страницы, на которую будет указывать ссылка.
Инструкция
- joomla вертикальное выпадающее меню
сделать выпадающее меню на CSS и HTML.
Задача
Создать выпадающее меню инструментами CSS и HTML.
Решение
Для начала давайте создадим список, разместим его горизонтально и оформим его внешний вид. Это будет основное меню, а потом сделаем для его пунктов выпадающее меню.
<!DOCTYPE html>
<html>
<head>
<title>Выпадающее меню</title>
<style>
ul.menu{
padding: 3px; /* убираем отступы */
margin-top: 50px; /* для красоты отодвигаю вниз */
text-align: center; /* выравниваю элементы спаска по центру */
}
ul.menu > li{
list-style: none; /* убираем маркеры списка */
display: inline-block; /* разещаем списки горизонтально */
background-color: #D87171;
padding: 5px 15px;
}
/* устанавливаем стиль ссылок в меню */
ul.menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Услуги</a></li>
</ul>
</body>
</html>У нас получился список такого вида:
Рисунок 1. Подготовительные работы.Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover. Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки — это уже другой псевдокласс.
Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта «Услуги», добавим выпадающие разделы: «Купить», «Продать», «Обменять». Эти пункты — это отдельный список, который вложен в тег <li>
Создадим этот список и добавим стили, описывающие его внешний вид.
<!DOCTYPE html>
<html>
<head>
<title>Выпадающее меню</title>
<style>
ul.menu{
padding: 3px; /* убираем отступы */
margin-top: 50px; /* для красоты отодвигаю вниз */
text-align: center; /* выравниваю элементы спаска по центру */
}
ul.menu > li{
list-style: none; /* убираем маркеры списка */
display: inline-block; /* разещаем списки горизонтально */
background-color: #D87171;
padding: 5px 15px;
}
/* устанавливаем стиль ссылок в меню */
ul.menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
/* устанавливаем стиль для внутреннего меню */
.menuInner{
list-style: none;
padding: 4px;
border: 1px solid #000000;
border-radius: 5px;
background-color: #FFFFFF;
text-align: left;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Услуги</a>
<ul>
<li>Купить</li>
<li>Продать</li>
<li>Обменять</li>
</ul>
</li>
</ul>
</body>
</html>Теперь у нас получился такой список:
Рисунок 2. Подготовительные работы.Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display: none}. А при наведении курсора его нужно активировать сделав снова видимым правила {display: inline-block}.
<!DOCTYPE html>
<html>
<head>
<title>Выпадающее меню</title>
<style>
ul.menu{
padding: 3px;
margin-top: 50px;
text-align: center;
}
ul.menu > li{
list-style: none;
display: inline-block;
background-color: #D87171;
padding: 5px 15px;
}
/* устанавливаем стиль ссылок в меню */
ul.menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
/* устанавливаем стиль для внутреннего меню */
.menuInner{
display: none; /* делаем невидимым */
list-style: none;
padding: 4px;
border: 1px solid #000000;
border-radius: 5px;
background-color: #FFFFFF;
text-align: left;
}
/* делаем видимым при наведении курсора на блок li */
.menu > li:hover > .menuInner{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Услуги</a>
<ul>
<li>Купить</li>
<li>Продать</li>
<li>Обменять</li>
</ul>
</li>
</ul>
</body>
</html>Теперь наше меню исчезает и появляется, но нам нужно чтобы оно появлялось поверх существующих элементов, не меняя уже установленные границы существующих блоков.
Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute.
<!DOCTYPE html>
<html>
<head>
<title>Выпадающее меню</title>
<style>
ul.menu{
padding: 3px;
margin-top: 50px;
text-align: center;
}
ul.menu > li{
position: relative; /* добавляем позиционирование */
list-style: none;
display: inline-block;
background-color: #D87171;
padding: 5px 15px;
height: 20px; /* добавляем высоту */
}
/* устанавливаем стиль ссылок в меню */
ul.menu > li > a{
color: #FFFFFF;
text-decoration: none;
}
/* устанавливаем стиль ссылок при наведении курсора */
ul.menu > li > a:hover{
text-decoration: underline;
}
/* устанавливаем стиль для внутреннего меню */
.menuInner{
display: none; /* делаем невидимым */
list-style: none;
padding: 4px;
border: 1px solid #000000;
border-radius: 5px;
background-color: #FFFFFF;
text-align: left;
}
.menu > li:hover > .menuInner{
display: block;
position: absolute;
top: 30px;
left: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Услуги</a>
<ul>
<li>Купить</li>
<li>Продать</li>
<li>Обменять</li>
</ul>
</li>
</ul>
</body>
</html>Что мы тут сделали:
- Добавили в родительский элемент <li> правило позиционирования {position: relative;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
- Добавили в родительский элемент <li> правило {height: 20px;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
- Установили абсолютное позиционирование {position: absolute;} выпадающему списку и установили координаты: top и left.
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
Как создать всплывающее контекстно-чувствительное справку с помощью Windows API WinHelp()
Расширенный: Требует экспертного кодирования, совместимости и многопользовательских навыков.
Для версии этой статьи Microsoft Access 97 см.
Аннотация
Одной из альтернатив отображения системы онлайн-справки приложения в отдельном окне является отображение ее в небольшом затененных всплывающих окнах в приложении. Для этого можно использовать функцию Windows API WinHelp() с HELP_CONTEXTPOPUP аргументом. В этой статье показано, как реализовать такую систему справки. В этой статье предполагается, что вы знакомы с использованием Microsoft Windows Help Workshop для создания файлов справки Windows.
Дополнительная информация
Функция Windows API WinHelp() поддерживает большое количество опций. Опция HELP_CONTEXTPOPUP открывает затененные всплывающие окна, в которых вы можете отображать Справку. Это окно похоже на окно, которое открывается при нажатии на глоссарий (зеленый, подчеркнутый текст) в системе справки майкрософт. Чтобы реализовать эту функцию, выполните следующие действия:
-
Создайте рабочую систему справки, установив свойства HelpContextID и HelpFile для ваших форм в действительный файл справки Windows.
-
Перенаправьте ключ F1 на вызов функции, определяемой пользователем, которая открывает файл справки с помощью опции HELP_CONTEXTPOPUP.
Обратите внимание, что прыжки или ветвления на другие темы справки из всплывающего окна справки не поддерживаются методами, обсуждаемым в этой статье. Следующие шаги описывают, как создать функцию, определяемую пользователем, чтобы открыть всплывающее окно справки и как перенаправить ключ F1: ПРЕСТЕР:Если вы выполните шаги в этом примере, вы измените образец базы данных Northwind.mdb. Вы можете создать резервную копию файла Northwind.mdb и выполнить следующие шаги на копии базы данных.
Доступ 2000, Доступ 2002 и Доступ 2003
-
Запуск доступа к Microsoft
-
Откройте выборочную базу данных Northwind.mdb или образец проекта NorthwindCS.adp.
-
В окне базы данных, под разделом «Объекты»,нажмите Модули.
-
Нажмите кнопку Создать.
-
В элементарном редакторе введите или вставьте следующий код в разделе Декларации:
Declare Function WinHelp Lib "user32" Alias "WinHelpA" _ (ByVal hwnd As Long, _ ByVal lpHelpFile As String, _ ByVal wCommand As Long, _ ByVal dwData As Long) As LongPublic Const HELP_CONTEXTPOPUP = &H8&
ПРИМЕЧАНИЕ: В существующей библиотеке Microsoft Access могут быть определены некоторые функции Microsoft Windows API; поэтому ваши декларации могут быть дубликатами. Если вы получили сообщение об ошибке с именем дубликата процедуры, удалите или прокомментируйте заявление о декларациях в коде.
-
Придавите следующий код в визуальном базовом редакторе:
Function Help32() As Boolean On Local Error GoTo Help32_Err Dim Cid As Long, Result As Long On Error Resume Next ' Get the HelpContextID of the active control. ' The error is 2474 if no control is active. Cid = Screen.ActiveControl.HelpContextId If Cid = 0 Then ' There is no control context ID, so check the form and get ' the HelpContextID of the active form. ' The error is 2475 if no form is active. Cid = Screen.ActiveForm.HelpContextId End If ' If there is a context ID, open the Help file with context. ' Specify your custom Help file for the second argument. ' This example used the default help file NWIND9.HLP located ' in the Office Samples folder. ' If the NWIND9.HLP is not available, then replace the ' specified path with a valid Winhelp file, and modify the code and ' the HelpContextID of the Forms and Controls accordingly. If Cid > 0 And Cid < 32767 Then Result = WinHelp(Application.hWndAccessApp, _ "C:\Program Files\Microsoft Office\Office\Samples\nwind9.hlp", _ HELP_CONTEXTPOPUP, Cid) Help32 = True End IfHelp32_End: Exit FunctionHelp32_Err: MsgBox Err.Description Resume Help32_EndEnd Function
-
Сохранить модуль как HelpModule.
-
Закройте визуальный базовый редактор.
-
В окне базы данных, под разделом Объектов,нажмите Макрос.
-
Нажмите кнопку Создать.
-
Создайте следующий новый макрос, чтобы перенаправить клавишу F1: Macro Name Action Action Arguments ——————————————————— {F1} RunCode Function Name: Help32()
-
Сохранить макрос как AutoKeys, а затем закрыть макрос.
-
В окне базы данных, под разделом «Объекты»,нажмите Формы.
-
В правом стеку, дважды щелкните поставщиков.
-
Нажмите на клавишу F1.
Обратите внимание, что Microsoft Access отображает в всплывающем окне сообщение справки, соответствующее helpContextID элемента управления или формы.
Доступ 2007
-
Запуск доступа к Microsoft
-
Откройте выборочную базу данных Northwind2007.accdb.
-
На вкладке Создать, нажмите вниз стрелка ниже Макро, а затем нажмите Модуль.
-
В элементарном редакторе вставьте следующий пример кода в разделе Декларации.
Declare Function WinHelp Lib "user32" Alias "WinHelpA" _ (ByVal hwnd As Long, _ ByVal lpHelpFile As String, _ ByVal wCommand As Long, _ ByVal dwData As Long) As LongPublic Const HELP_CONTEXTPOPUP = &H8&
Заметка В существующей библиотеке Microsoft Access могут быть определены некоторые функции Microsoft Windows API; поэтому ваши декларации могут быть дубликатами. Если вы получили сообщение об ошибке с именем дубликата процедуры, удалите или прокомментируйте заявление о декларациях в коде.
-
Привизите следующий пример кода в visual Basic Editor.
Function Help32() As Boolean On Local Error GoTo Help32_Err Dim Cid As Long, Result As Long On Error Resume Next ' Get the HelpContextID of the active control. ' The error is 2474 if no control is active. Cid = Screen.ActiveControl.HelpContextId If Cid = 0 Then ' There is no control context ID, so check the form and get ' the HelpContextID of the active form. ' The error is 2475 if no form is active. Cid = Screen.ActiveForm.HelpContextId End If ' If there is a context ID, open the Help file with context. ' Specify your custom Help file for the second argument. ' This example used the default help file NWIND9.HLP located ' in the Office Samples folder. ' If the NWIND9.HLP is not available, then replace the ' specified path with a valid Winhelp file, and modify the code and ' the HelpContextID of the Forms and Controls accordingly. If Cid > 0 And Cid < 32767 Then Result = WinHelp(Application.hWndAccessApp, _ "C:\Program Files\Microsoft Office\Office\Samples\nwind9.hlp", _ HELP_CONTEXTPOPUP, Cid) Help32 = True End IfHelp32_End: Exit FunctionHelp32_Err: MsgBox Err.Description Resume Help32_EndEnd Function
-
Сохранить модуль в качестве HelpModule.
-
Закройте визуальный базовый редактор.
-
На вкладке «Создать» нажмите Макро.
-
Создайте следующий новый макрос, чтобы перенаправить клавишу F1: Macro Name Action Action Arguments ——————————————————— {F1} RunCode Function Name: Help32()
-
Сохранить макрос как AutoKeys, а затем закрыть макрос.
-
Нажмите Поставщики в левом стеле.
-
В левой панели, дважды щелкните Список поставщиков.
-
Нажмите на клавишу F1.
Обратите внимание, что Microsoft Access отображает в всплывающем окне сообщение справки, соответствующее helpContextID элемента управления или формы.
Ссылки
Для получения дополнительной информации щелкните приведенные ниже номера статей базы знаний Майкрософт:
828419 Как создать систему справки HTML, используя либо API HTMLHelp, либо HTML Help in Access
242433 Как создать чувствительные к контексту HTML Справка
php — Как создать всплывающее окно (модальное диалоговое окно) в HTML
На моем веб-сайте есть страница, где пользователь может задавать вопросы. Теперь я хочу добавить кнопку «Добавить изображение», которая должна вызвать своеобразное модальное диалоговое окно, в котором пользователю необходимо загрузить изображение с компьютера. Затем окно закрывается и ссылка на изображение помещается обратно в пост.
Я хочу сделать что-то похожее, как в SO https://stackoverflow.com/questions/ask — попробуйте нажать кнопку Изображение, и вы вижу хорошее всплывающее окно.
Пожалуйста, предложите, как лучше всего реализовать это. Я прошу фрагмент кода, а не о технологии
0
Captain Comic 17 Мар 2011 в 12:52
4 ответа
Лучший ответ
Вам понадобятся сценарии на стороне клиента. Я рекомендую изучать Javascript, затем Jquery, затем Jquery UI. Если вы знаете php, не должно быть слишком сложно подобрать основы.
0
Matt 17 Мар 2011 в 09:59
Это всплывающее окно вы можете сделать с помощью любой библиотеки jQuery, такой как colorbox. Для загрузки изображений вам придется поочередно искать некоторые загрузки на основе Flash или Java.
http://colorpowered.com/colorbox/core/example1/index.html http://swfupload.org/
1
sushil bharwani 17 Мар 2011 в 09:56
Легко, как пить воду;)
С помощью jquery создать всплывающее окно … вот так (http://fancybox.net/), а затем добавьте форму во всплывающее окно вверх для загрузки изображения … тогда, когда файл загружен, только вернуть абсолютный адрес в родительский редактор … теперь вы можете показать свое изображение;)
1
Mohammad Efazati 17 Мар 2011 в 10:02
Возможно, это поможет вам, когда вы запустите http://jqueryui.com/demos/dialog / # модальных — форма. В противном случае вы можете использовать структуру DOM и создавать каждый элемент, используя appendChild и CreateElement, а также использовать css, чтобы придать хороший вид.
3
Ashwin Krishnamurthy 17 Мар 2011 в 10:11
Адаптивное плавно выпадающее меню js
a {
color: #fff;
text-decoration: none; }
.container {
max-width: 1170px;
margin: 0 auto;
padding: 0 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
header {
background-color: #212326;
padding: 8px 0;
position: fixed;
left: 0;
width: 100%; }
header .headerInner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #ffffff; }
header .headerInner .logo {
text-transform: uppercase;
font-size: 28px; }
header .headerInner .menu {
padding-left: 70px; }
header .headerInner .menu .part {
margin: 0 19px;
width: auto;
letter-spacing: .5px; }
header .headerInner .hamburger {
display: none;
width: 30px;
height: 30px; }
header .headerInner .hamburger svg {
width: 30px;
height: 30px;
fill: #ffffff; }
header.mobile .headerInner {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
header.mobile .headerInner .logo {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0; }
header.mobile .headerInner .menu {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
width: 100%; }
header.mobile .headerInner .menu .part {
text-align: center; }
header.mobile .headerInner .hamburger {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
display: block; }
Как создать раскрывающееся меню в HTML
В HTML мы можем легко создать раскрывающееся меню в документе Html, используя следующие различные способы:
- Использование HTML-формы
- Использование внутреннего CSS
Использование HTML-формы
Если мы хотим создать раскрывающееся меню в документе Html с помощью формы, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко создать раскрывающееся меню:
Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать форму для создания раскрывающегося меню.
<Голова> <Название> Создайте выпадающее меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.