X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> выпадающее меню
lga74
lga74
Topic Starter сообщение 22.4.2011, 7:44; Ответить: lga74
Сообщение #1


Работаю над электронным учебником.Создала горизонтальное выпадающее меню (панель навигации). Как зафиксировать его в окне, чтобы переходя на другую страницу, оно находилось в верхней части окна.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Svir
Svir
сообщение 22.4.2011, 10:28; Ответить: Svir
Сообщение #2


если я правильно понял, то здесь подойдет ajax include ... просто вставить скрипт в начало страницы и все ... если нужно, то я распишу
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lga74
lga74
Topic Starter сообщение 22.4.2011, 16:12; Ответить: lga74
Сообщение #3


Спасибо! Мне не совсем понятно. Простите, но знаний катастрофически не хватает, учусь..... Раньше создавала учебник в html +css без заморочек: главная страница - содержание, каждый пункт содержания - ссылка на необходимую страницу. Теперь хочу открывающееся меню.
Вариант1: меню создала с помощью программки 123 Flash Menu. В проге можно создать ссылки на html страницы. В браузере открываю подменю, открылась html страница, а меню осталось на главной. Как это исправить? Копировать на каждую страницу?
Вариант 2: создала в html + css выпадающее меню, и скопировала на все страницы+нужные ссылки. Код ограмный......Не очень нравится. В 123 Flash Menu меню профессиональней получается.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Svir
Svir
сообщение 22.4.2011, 20:20; Ответить: Svir
Сообщение #4


так делает большинство, но копировать на каждую страницу не обязательно ... для этого вставляете Ajax скрипт между тегами head и специальный скрипт - там где должен быть код ...

[JS]<script type="text/javascript">

/***********************************************
* Ajax Includes script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//To include a page, invoke ajaxinclude("afile.htm") in the BODY of page
//Included file MUST be from the same domain as the page displaying it.

var rootdomain="http://"+window.location.hostname

function ajaxinclude(url) {
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.open('GET', url, false) //get page synchronously
page_request.send(null)
writecontent(page_request)
}

function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 || page_request.status==200)
document.write(page_request.responseText)
}

</script>[/JS]

этот скрипт - там где нужно вставить код -

[JS]<script type="text/javascript">
ajaxinclude("/include/header.html")
</script> [/JS]

где / include / header.html (можете вставить свой путь), размещенный кусок кода из меню
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Svir
Svir
сообщение 22.4.2011, 20:21; Ответить: Svir
Сообщение #5


и это повторить на каждой странице
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lga74
lga74
Topic Starter сообщение 22.4.2011, 20:55; Ответить: lga74
Сообщение #6


Если не надоела, то можно еще вопрос? (Решила обойтись без проги, а сделать все в html + css .) Куда здесь что скопировать? Все, что зеленым это между head вставлять, а остальное это css? Простите, возможно, за банальные вопросы, но подобные вещи делаю не очень часто.......
(В коде не все пукты меню, на самом деле их будет значительно больше)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href ="my.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="menu">
<ul class="menu">
<li><a href="#">Лекции</a>
<ul class="submenu">
<li><a href="#">Лекция №1</a></li>
<li><a href="#">Лекция №2</a></li>
</ul>
</li>
<li><a href="#">Лабораторные работы</a>
<ul class="submenu">
<li><a href="#">Лабораторная работа №1</a></li>
<li><a href="#">Лабораторная работа №2</a></li>
<li><a href="#">Лабораторная работа №3</a></li>
</ul>
</div>
</body>
</html>

css:
#menu {
height: 43px;
behavior: url(csshover.htc);
background: #9ea8b2 url(images/mbg.gif) repeat-x;
}
#menu ul, li {
margin: 0px;
padding: 0px;
}
ul.menu {
float: left;
}
#menu ul.menu li {
margin: 0px;
float: left;
width: 200px;
height: 30px;
display: block;
padding-top: 13px;
text-align: center;
}
#menu ul.menu li:hover {
background: #5e717f url(images/mbgh.gif) repeat-x;
}
#menu ul.menu li:hover ul.submenu {
display: block;
-margin-top: 30px;
-margin-left: -141px;
}
#menu ul.menu li ul.submenu {
display: none;
margin-top: 13px;
position: absolute;
background: #bcc4ce;
}
#menu ul.menu li ul.submenu li {
float: none;
display: block;
}
#menu ul.menu ul.submenu li:hover {
background: #9ca6b0;
}
#menu ul li a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
#menu ul li a:hover {color: #ecd661;}
#menu ul.submenu li a {
color: #4f5458;
font-size: 14px;
text-decoration: none;}
#menu ul.submenu li a:hover {
color: #152535;
}#menu {
height: 43px;
behavior: url(csshover.htc);
background: #9ea8b2 url(images/mbg.gif) repeat-x;
}
#menu ul, li {
margin: 0px;
padding: 0px;
}
ul.menu {
float: left;
}
#menu ul.menu li {
margin: 0px;
float: left;
width: 200px;
height: 30px;
display: block;
padding-top: 13px;
text-align: center;
}
#menu ul.menu li:hover {
background: #5e717f url(images/mbgh.gif) repeat-x;
}
#menu ul.menu li:hover ul.submenu {
display: block;
-margin-top: 30px;
-margin-left: -141px;
}
#menu ul.menu li ul.submenu {
display: none;
margin-top: 13px;
position: absolute;
background: #bcc4ce;
}
#menu ul.menu li ul.submenu li {
float: none;
display: block;
}
#menu ul.menu ul.submenu li:hover {
background: #9ca6b0;
}
#menu ul li a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
#menu ul li a:hover {color: #ecd661;}
#menu ul.submenu li a {
color: #4f5458;
font-size: 14px;
text-decoration: none;}
#menu ul.submenu li a:hover {
color: #152535;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Svir
Svir
сообщение 22.4.2011, 20:57; Ответить: Svir
Сообщение #7


[CSS]css:
#menu {
height: 43px;
behavior: url(csshover.htc);
background: #9ea8b2 url(images/mbg.gif) repeat-x;
}
#menu ul, li {
margin: 0px;
padding: 0px;
}
ul.menu {
float: left;
}
#menu ul.menu li {
margin: 0px;
float: left;
width: 200px;
height: 30px;
display: block;
padding-top: 13px;
text-align: center;
}
#menu ul.menu li:hover {
background: #5e717f url(images/mbgh.gif) repeat-x;
}
#menu ul.menu li:hover ul.submenu {
display: block;
-margin-top: 30px;
-margin-left: -141px;
}
#menu ul.menu li ul.submenu {
display: none;
margin-top: 13px;
position: absolute;
background: #bcc4ce;
}
#menu ul.menu li ul.submenu li {
float: none;
display: block;
}
#menu ul.menu ul.submenu li:hover {
background: #9ca6b0;
}
#menu ul li a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
#menu ul li a:hover {color: #ecd661;}
#menu ul.submenu li a {
color: #4f5458;
font-size: 14px;
text-decoration: none;}
#menu ul.submenu li a:hover {
color: #152535;
}#menu {
height: 43px;
behavior: url(csshover.htc);
background: #9ea8b2 url(images/mbg.gif) repeat-x;
}
#menu ul, li {
margin: 0px;
padding: 0px;
}
ul.menu {
float: left;
}
#menu ul.menu li {
margin: 0px;
float: left;
width: 200px;
height: 30px;
display: block;
padding-top: 13px;
text-align: center;
}
#menu ul.menu li:hover {
background: #5e717f url(images/mbgh.gif) repeat-x;
}
#menu ul.menu li:hover ul.submenu {
display: block;
-margin-top: 30px;
-margin-left: -141px;
}
#menu ul.menu li ul.submenu {
display: none;
margin-top: 13px;
position: absolute;
background: #bcc4ce;
}
#menu ul.menu li ul.submenu li {
float: none;
display: block;
}
#menu ul.menu ul.submenu li:hover {
background: #9ca6b0;
}
#menu ul li a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
#menu ul li a:hover {color: #ecd661;}
#menu ul.submenu li a {
color: #4f5458;
font-size: 14px;
text-decoration: none;}
#menu ul.submenu li a:hover {
color: #152535;
}[/CSS]

в файл my.css
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Svir
Svir
сообщение 22.4.2011, 20:59; Ответить: Svir
Сообщение #8


если ты не об этом спрашивала, а о ajax, то код -
<div id="menu">
<ul class="menu">
<li><a href="#">Лекции</a>
<ul class="submenu">
<li><a href="#">Лекция №1</a></li>
<li><a href="#">Лекция №2</a></li>
</ul>
</li>
<li><a href="#">Лабораторные работы</a>
<ul class="submenu">
<li><a href="#">Лабораторная работа №1</a></li>
<li><a href="#">Лабораторная работа №2</a></li>
<li><a href="#">Лабораторная работа №3</a></li>
</ul>
</div>


в файл (в моем примере) - include / header.html
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lga74
lga74
Topic Starter сообщение 22.4.2011, 22:02; Ответить: lga74
Сообщение #9


Зачем копировал еще раз мою css?:rolleyes: Я просто тайно надеялась, что ты внесешь необходимые поправки в мой документ. В своем доке мне все понятно. Мне не ясно, куда что вставлять.

<script type="text/javascript"> - это между head . А остальное в head или куда?

Делала учебники еще с помощью программы htm2chm - очень легко. А тут уже несколько дней и не с места........
Очень хочется воспользоваться твоей подсказкой.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Svir
Svir
сообщение 22.4.2011, 23:41; Ответить: Svir
Сообщение #10


вот это код между head (где под <title> Name </ title>) - [JS]<script type="text/javascript">

/***********************************************
* Ajax Includes script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//To include a page, invoke ajaxinclude("afile.htm") in the BODY of page
//Included file MUST be from the same domain as the page displaying it.

var rootdomain="http://"+window.location.hostname

function ajaxinclude(url) {
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.open('GET', url, false) //get page synchronously
page_request.send(null)
writecontent(page_request)
}

function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 || page_request.status==200)
document.write(page_request.responseText)
}

</script>[/JS]

а этот на место где должен быть код меню - [JS]<script type="text/javascript">
ajaxinclude("/include/header.html")
</script>[/JS]


в директории / include / header.html вставьте код меню -
<div id="menu">
<ul class="menu">
<li><a href="#">Лекции</a>
<ul class="submenu">
<li><a href="#">Лекция №1</a></li>
<li><a href="#">Лекция №2</a></li>
</ul>
</li>
<li><a href="#">Лабораторные работы</a>
<ul class="submenu">
<li><a href="#">Лабораторная работа №1</a></li>
<li><a href="#">Лабораторная работа №2</a></li>
<li><a href="#">Лабораторная работа №3</a></li>
</ul>
</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
 1 Викторио_mw 1469 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
 2 boltuk 3416 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
 1 lepota 1130 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
 0 Olya_Poy 4649 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) На разных разрешениях меню выглядит по разному
 0 SPiar 4818 28.9.2017, 17:45
автор: -korotkov-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 18:34

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet