天天看點

html如何設定菜單寬度,如何自動調整此HTML菜單的大小以适應父寬度?

我正在将Drupal 6主題轉換為Drupal 7,并且無法将此部分轉換出來。我有以下HTML:如何自動調整此HTML菜單的大小以适應父寬度?

  • Design
  • Inspiration
  • Nature
  • Photography
  • Technology
  • Travel
  • Tutorials
  • Urban
  • Video Games

在Drupal的6這個主題是使用jQuery V1.3.2,但在Drupal 7的jQuery 1.4.4是内置的,是以功能似乎并不奏效。下面是jQuery函數:

$(function(){

clearFormFields({

clearInputs: true,

clearTextareas: false,

passwordFieldText: true,

addClassFocus: "focus",

filterClass: "form-text"

});

initAutoScalingNav({

menuId: "nav",

sideClasses: true

});

ieHover('#nav li');

$('div.gallery-block').fadeGallery({

slideElements:'ul.gallery > li',

pagerLinks:'ul.switcher li'

});

$('div.pictures-box').fadeGallery({

slideElements:'ul.fade-gallery > li',

pagerLinks:'ul.pictures-list li',

title: true

});

});

function initAutoScalingNav(o) {

if (!o.menuId) o.menuId = "nav";

if (!o.tag) o.tag = "a";

if (!o.spacing) o.spacing = 0;

if (!o.constant) o.constant = 0;

if (!o.minPaddings) o.minPaddings = 0;

if (!o.liHovering) o.liHovering = false;

if (!o.sideClasses) o.sideClasses = false;

if (!o.equalLinks) o.equalLinks = false;

if (!o.flexible) o.flexible = false;

var nav = document.getElementById(o.menuId);

if(nav) {

nav.className += " scaling-active";

var lis = nav.getElementsByTagName("li");

var asFl = [];

var lisFl = [];

var width = 0;

for (var i=0, j=0; i

if(lis[i].parentNode == nav) {

var t = lis[i].getElementsByTagName(o.tag).item(0);

asFl.push(t);

asFl[j++].width = t.offsetWidth;

lisFl.push(lis[i]);

if(width < t.offsetWidth) width = t.offsetWidth;

}

if(o.liHovering) {

lis[i].onmouseover = function() {

this.className += " hover";

}

lis[i].onmouseout = function() {

this.className = this.className.replace("hover", "");

}

}

}

var menuWidth = nav.clientWidth - asFl.length*o.spacing - o.constant;

if(o.equalLinks && width * asFl.length < menuWidth) {

for (var i=0; i

asFl[i].width = width;

}

}

width = getItemsWidth(asFl);

if(width < menuWidth) {

var version = navigator.userAgent.toLowerCase();

for (var i=0; getItemsWidth(asFl) < menuWidth; i++) {

asFl[i].width++;

if(!o.flexible) {

asFl[i].style.width = asFl[i].width + "px";

}

if(i >= asFl.length-1) i=-1;

}

if(o.flexible) {

for (var i=0; i

width = (asFl[i].width - o.spacing - o.constant/asFl.length)/menuWidth*100;

if(i != asFl.length-1) {

lisFl[i].style.width = width + "%";

}

else {

if(navigator.appName.indexOf("Microsoft Internet Explorer") == -1 || version.indexOf("msie 8") != -1 || version.indexOf("msie 9") != -1)

lisFl[i].style.width = width + "%";

}

}

}

}

else if(o.minPaddings > 0) {

for (var i=0; i

asFl[i].style.paddingLeft = o.minPaddings + "px";

asFl[i].style.paddingRight = o.minPaddings + "px";

}

}

if(o.sideClasses) {

lisFl[0].className += " first-child";

lisFl[0].getElementsByTagName(o.tag).item(0).className += " first-child-a";

lisFl[lisFl.length-1].className += " last-child";

lisFl[lisFl.length-1].getElementsByTagName(o.tag).item(0).className += " last-child-a";

}

nav.className += " scaling-ready";

}

function getItemsWidth(a) {

var w = 0;

for(var q=0; q

w += a[q].width;

}

return w;

}

}

在Drupal的版本6上面的代碼自動添加風格=“寬度:XX”标記的超連結,這使得菜單中生長的菜單按鈕,以填補的寬度它的容器。

謝謝。

+1

我看到一個使用jQuery的零相關代碼,除了( )(檔案準備簡寫)。 –

2011-03-02 04:05:14