2016-01-09 3 views
0

Возможно ли создать одно раскрывающееся меню, а не копирование одной и той же страницы кода на каждой странице? Использование фреймов - хороший метод решения этой проблемы?Одно раскрывающееся меню, чтобы управлять ими все

+0

Вы ищете только внешнее решение? в бэкэнд, да, возможно –

+0

, возможно, вы могли бы использовать предварительный компилятор, например [ejs] (http://www.embeddedjs.com/), и включать частичные файлы из других файлов. – shennan

+0

Вы должны добавить разъяснения на «не путем копирования одного и того же кода». Если вы работаете с шаблонами, вам нужно только добавить/включить его и добавить скрипт, который обрабатывает навигацию (только это!) Для каждого веб-страницы, которые вы используете. – KarelG

ответ

2

Я полагаю, что создание страницы HTML, который содержит только меню, и его ссылку, чтобы быть абсолютный URL s может быть решением, хотя @Igor Иванча является правильным, и решением было бы с помощью фонового как это обычно делается.

Скажем у вас есть HTML-страницу:

<nav id="godmenu"> 
    <ul> 
    <li><a href="http://yourdomain.com/page1.html">page1</a></li> 
    <li><a href="http://yourdomain.com/page2.html">page2</a></li> 
    <li><a href="http://yourdomain.com/page3.html">page3</a></li> 
    </ul> 
</nav> 

затем на каждой странице:

<head> 
    <link rel="stylesheet" href="path to your god menu style" /> 
</head> 

<iframe src="http://yourdomain.com/yourmenu.html"></iframe> 

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

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

Или просто используйте PHP для вашего back-end, который поддерживает весь хостинг.

И еще один способ мог бы использовать Javascript

с jQuery например

$("div").load("http://yourdomain.com/menu.html #godmenu"); 

который, в свою очередь, загрузит определенную часть страницы на другую страницу.

Я считаю, что это лучшее решение.

1

Странно ссылаться на свой сайт с помощью iframe и может принести неожиданное поведение.

Что вам может понадобиться частичный рендеринг, концепция, что многие интерфейсы и бэкэнд-рамки в дополнение.

Если вы сайт статичен, и у вас нет рендеринга на стороне сервера, вы можете сделать это в клиенте с помощью JS. частичный рендер с помощью JQuery бедного человека может выглядеть следующим образом:

$(function() { 
 
    $("[render-partial]").each(function(i, el) { 
 
    var 
 
     $el = $(el), 
 
     partialName = $el.attr("render-partial"), 
 
     partial = $("partial[name='" + partialName + "']"); 
 

 
    $el.append(partial.html()); 
 
    }) 
 
});
partial { display: none; } 
 
.red { background-color: red } 
 
.tomato { background-color: tomato }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<partial name="dropdown"> 
 
    <ul> 
 
    <li><a href="/asdf">asdf</a></li> 
 
    <li><a href="/qwer">qwer</a></li> 
 
    <li><a href="/uiop">uiop</a></li> 
 
    </ul> 
 
</partial> 
 

 
<div render-partial="dropdown" class="red"></div> 
 
<div render-partial="dropdown" class="tomato"></div>

live View.