SORU
17 EKİM 2012, ÇARŞAMBA


Nasıl jQuery UI menü yatay nav yapmak için?

JQuery UI şeyleri seviyorum!

Navigasyon menüsü severim, ama yatay almak için görünmüyor olabilir. Çocuk oyuncağı bir şey eksik var.

Herkes CSS değiştirmek için nasıl biliyor? Yaşlanmış ve artık "" birbirlerinin üstüne onları tutmak için. net olmadığı için işe yaramaz bu ama denedim

İlgili CSS:

.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; }
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }

.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
.ui-menu .ui-state-disabled a { cursor: default; }

Yardım için teşekkürler!

CEVAP
19 Ocak 2013, CUMARTESİ


Nefret ediyorum çünkü bir menü için bir menü dönüştürmek için tüm bu çabalar CSS girmeye hayranım. Sadece belki de hiç anlayamıyorum güçleri ile karışma gibi hissediyorum! Çok daha kolay menü dosyaları menubar branch of jquery ui boş eklemeyi düşünüyorum.

jquery ui download site birlikte gelen css dosyası uı tam bir WordPress kullanmak indirdim

Benim belgenin başlığında her şeyi içeren dosya (Sürüm 1.9 yapıyorum.css jquery uı koydum şu an x) menü widget menubar branch of jquery ui indirilen için özel CSS dosyası izledi

<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.menubar.css" rel="stylesheet" />

Resimler küçük simgeler, jQuery UI tarafından kullanılan klasör unutma jquery-uı ile aynı klasörde olması gerekir.css dosyası.

Sonunda vücudum var o zaman:

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
<script type="text/javascript" src="js/menubar/jquery.ui.menubar.js"></script>

JQuery en güncel bir sürümü, DV UI dosyasının bir kopyası ardından bir kopyası, daha sonra menü modülü menubar branch of jquery ui indirebilirsiniz

Menü CSS dosyası canlandırıcı kısa

.ui-menubar { list-style: none; margin: 0; padding-left: 0; }
.ui-menubar-item { float: left; }
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; }

ama menü JavaScript dosyası 328 hatları - burada alıntı yapmak için çok uzun. Bununla beraber, sadece menü diyebilirsin() bu örnekte olduğu gibi:

$("#menu").menubar({
    autoExpand: true,
    menuIcon: true,
    buttons: true,
    select: select
});

Dediğim gibi, menü kesmek için tüm girişimleri yatay bir bar haline çevirmek için nesne hayranım, ama hepsi yatay bir menü çubuğu bazı standart özellik yoktu buldum. Bu widget jQuery UI ile henüz birlikte değil neden emin değilim, ama muhtemelen hala halletmesi gereken bazı hatalar vardır. Örneğin, IE 7 Tuhaflıklar Modunda denedim ve konumlandırma garip oldu, ama Firefox, Safari ve IE 8 içinde harika görünüyor .

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jeremy Stark

    Jeremy Stark

    23 Mayıs 2010
  • pain975

    pain975

    27 NİSAN 2008
  • Drakinen

    Drakinen

    1 EYLÜL 2008