Jquery UI Tabs als Menü ge-(oder miß-)brauchen?

[Felixi]

Hallo,

Ausgangspunkt meiner Idee war, dass ich auf kurz oder lang mein über Jahre lieb gewonnenes Menü aus diesem Post aufgeben muß.

Da meine Zielgruppe an Usern bekannt ist und meine Seite ohne JS ohnehin nicht bedienbar ist, stelle ich mir gerade die Frage, ob es für mich nicht Sinn ergeben könnte, über Jquery UI Tabs ein Menü zu stricken. Das würde mir viele Optionen zur Verfügung stellen, die ich schön/nützlich finde und bei anderen Menüs nicht habe.

Spricht irgend etwas gravierend gegen meine Idee bei gegebener Präsisse, dass JS ohnehin zwingend vorausgesetzt wird?

Felixi

[Matthias Apsel]

Hallo Felixi,

Spricht irgend etwas gravierend gegen meine Idee bei gegebener Präsisse, dass JS ohnehin zwingend vorausgesetzt wird?

Nein. Wenn ich mich recht erinnere, ist eine gewisse Grundfunktionalität auch ohne JS gewährleistet.

Bis demnächst
Matthias

[Felixi]

Hi Matthias,

Nein. Wenn ich mich recht erinnere, ist eine gewisse Grundfunktionalität auch ohne JS gewährleistet.

Erstmal danke für den Hinweis.

Meine Frage: Ich habe verschiedene UI-Regeln überschrieben, das passt aber für mein menü gar nicht.

Wie überschreibe ich folgene Regel:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { 
...
}

wenn sie ausschließlich innerhalb meines Menüs gelten soll, das in folgendem Block steht:

<article id='tabnavigation' class='tabs'>
	<ul>
		<li><a class='maintab' href='#tabs-nohdr-1'>Tablink 1</a></li>
		<li><a class='maintab' href='#tabs-nohdr-2'>Tablink 2</a></li>
	</ul>

Felixi

[Gunnar Bittersmann]

@@Felixi

Wie überschreibe ich folgene Regel:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { 
...
}

wenn sie ausschließlich innerhalb meines Menüs gelten soll, das in folgendem Block steht:

<article id='tabnavigation' class='tabs'>
	<ul>
		<li><a class='maintab' href='#tabs-nohdr-1'>Tablink 1</a></li>
		<li><a class='maintab' href='#tabs-nohdr-2'>Tablink 2</a></li>
	</ul>

Verstehe dein Problem nicht. Die Regel wirkt innerhalb deines Menüs gar nicht, da keins der Elemente diesen Klassen angehört. Oder zu verheimlichst relevanten Quelltext.

LLAP 🖖

[Felixi]

Hi Gunnar,

Verstehe dein Problem nicht. Die Regel wirkt innerhalb deines Menüs gar nicht, da keins der Elemente diesen Klassen angehört. Oder zu verheimlichst relevanten Quelltext.

Ja, tue ich.

$(function() {
	$('article.tabs').tabs({
	  collapsible: true
    });
});

Gruß, Felixi

[woodfighter]

Tach,

Wie überschreibe ich folgene Regel:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { 
...
}

wenn sie ausschließlich innerhalb meines Menüs gelten soll, das in folgendem Block steht:

<article id='tabnavigation' class='tabs'>
	<ul>
		<li><a class='maintab' href='#tabs-nohdr-1'>Tablink 1</a></li>
		<li><a class='maintab' href='#tabs-nohdr-2'>Tablink 2</a></li>
	</ul>

indem du einen Selektor mit höherer Spezifität angibst, du könntest also aus deinem Beispiel also z.B. einen ID- Klassen-, oder Element-Selektor hinzufügen, je nachdem wie dein restliches HTML aussieht.

mfg
Woodfighter

[Gunnar Bittersmann]

@@woodfighter

Wie überschreibe ich folgene Regel:

indem du einen Selektor mit höherer Spezifität angibst

Oder einen mit gleicher Spezifität in einer nachfolgenden Regel.

LLAP 🖖

[Felixi]

Hi,

indem du einen Selektor mit höherer Spezifität angibst, du könntest also aus deinem Beispiel also z.B. einen ID- Klassen-, oder Element-Selektor hinzufügen, je nachdem wie dein restliches HTML aussieht.

Ich habe es so versucht, aber das hatte keine Auswirkungen.

    article#tabnavigation.ui-state-hover,
    article#tabnavigation..ui-widget-content,
    article#tabnavigation..ui-state-focus {
    background: #330033; 
	font-weight: normal; 
	color: #FFFFFF; 
	border: 0px;
	outline: none; 
    }

Was ist daran falsch?

Felixi

[Matthias Apsel]

Hallo Felixi,

Ich habe es so versucht, aber das hatte keine Auswirkungen.

Was ist daran falsch?

Das kann dir niemand sagen (bis auf den Syntaxfehler ..), weil dazu die Kenntnis des HTML erforderlich ist.

Bis demnächst
Matthias

[Felixi]

Hi Matthias,

Das kann dir niemand sagen (bis auf den Syntaxfehler ..), weil dazu die Kenntnis des HTML erforderlich ist.

Ich versuchs mal. Bisher hab ich:

/* Gesamtnavigation */
#tabnavigation { 
    padding: 20px; /* Abstand nach oben */
    background: none; 
    border-width: 0px; /* Rahmen um Alles */

} 

/* Hauptnavigation */
.maintab { 
    font-family:tahoma, verdana, arial;
    font-size:11px;
	font-weight:bold;
	margin: 0px;
} 

/* Subnavigation */
.subtab { 
	font-size: 80%;
	font-weight:normal;
} 

/* Hintergrund der Maintabs */
#tabnavigation .ui-tabs-nav { 
    padding-left: 0px; 
    background: transparent; 
    border-width: 0px 0px 1px 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
	border-color:  #000000;
}
/* Inhalt der Subtabs */
#tabnavigation .ui-tabs-panel { 
    background: #f5f3e5; 
    border-width: 0px 1px 1px 1px; 
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
padding-top: 5px;          /* oben */
padding-right: 5px;        /* rechts */
padding-bottom: 5px;      /* unten */
padding-left: 5px;         /* links */
}

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>UI Tab Navigation</title>

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="./jquery-ui-1.11.4/jquery-ui.css" type="text/css" media="all">
<style>

/* Gesamtnavigation */
#tabnavigation { 
    padding: 20px; /* Abstand nach oben */
    background: none; 
    border-width: 0px; /* Rahmen um Alles */

} 

/* Hauptnavigation */
.maintab { 
    font-family:tahoma, verdana, arial;
    font-size:11px;
	font-weight:bold;
	margin: 0px;
} 

/* Subnavigation */
.subtab { 
	font-size: 80%;
	font-weight:normal;
} 

/* Hintergrund der Maintabs */
#tabnavigation .ui-tabs-nav { 
    padding-left: 0px; 
    background: transparent; 
    border-width: 0px 0px 1px 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
	border-color:  #000000;
}
/* Inhalt der Subtabs */
#tabnavigation .ui-tabs-panel { 
    background: #f5f3e5; 
    border-width: 0px 1px 1px 1px; 
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
padding-top: 5px;          /* oben */
padding-right: 5px;        /* rechts */
padding-bottom: 5px;      /* unten */
padding-left: 5px;         /* links */
}
</style>


  <script>
$(function() {
	$('article.tabs').tabs({
	  collapsible: true
    });
});

  </script>
</head>
<body>

<article id="tabnavigation" class="tabs">
	<ul>
		<li><a class='maintab' href="#tabs-nohdr-1">Link 1</a></li>
		<li><a class='maintab' href="#tabs-nohdr-2">Link 2</a></li>
		<li><a class='maintab' href="#tabs-nohdr-3">Link 3</a></li>
		<li><a class='maintab' href="#tabs-nohdr-1">Link 4</a></li>
	</ul>
 

  <div class='subtab' id="tabs-nohdr-1">
    <p>Proin elit arcu.</p>
  </div>
  <div class='subtab' id="tabs-nohdr-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat.</p>
  </div>
  <div class='subtab' id="tabs-nohdr-3">
    <p>Mauris eleifend est et turpis. </p>
  </div>
 
 
</body>
</html>

Ich hätte es gerne in ein fiddle gepackt, aber ich komme mit dem neuen System dort nicht klar. Ich weiß nicht, wie man jquery und jquery ui einbindet. Das war früher selbsterklärend, heute weiß ich nicht, wie es gemacht wird :-(

Felixi

[Felixi]

Ich versuchs mal. Bisher hab ich:

Sorry für das doppelte posten des CSS.

Also, was ich möchte, ist, dass ich die Tabs (beim hovern oder beim aktiv sein) selber stylen kann. Mir gefällt das UI-Original hierbei nicht.

Felixi

[Matthias Apsel]

Hallo Felixi,

Ich versuchs mal. Ich hätte es gerne in ein fiddle gepackt, aber ich komme mit dem neuen System dort nicht klar.

Kannst du nicht besser eine Seite online stellen? bei bplaced oder so?

Bis demnächst
Matthias

[Felixi]

Kannst du nicht besser eine Seite online stellen? bei bplaced oder so?

Extra dort angemeldet, aber ich erhalte nur einen Fehler 404, vollkommen egal, wohin ich meine index.html hochlade :-((

Felixi

[Felixi]

Kannst du nicht besser eine Seite online stellen? bei bplaced oder so?

Extra dort angemeldet, aber ich erhalte nur einen Fehler 404, vollkommen egal, wohin ich meine index.html hochlade :-((

Ok, hat nur etwas gedauert, bis die Seite freigeschaltet wurde.

Hier ist sie.

Ich hätte halt gerne, dass ich die Tabs beim hovern, beim active sein usw. individuell gestalten könnte, finde aber die entsprechenden "CSS-Schalter" nicht.

Felix

[Felixi]

Ich hätte halt gerne, dass ich die Tabs beim hovern, beim active sein usw. individuell gestalten könnte, finde aber die entsprechenden "CSS-Schalter" nicht.

Soll ich die Seite noch mal woanders hochladen? Oder ist das prinzipiell zu schwierig, das CSS zu ändern, wenn UI einmal stylemäßig "zugeschlagen" hat?

Felixi

[woodfighter]

Tach,

Keiner mehr?

immer mit der Ruhe, Freitags nachmittags ist es immer etwas leerer hier, weil die Regulars sich nicht bei der Arbeit langweilen ;-)

mfg
Woodfighter

[Felixi]

immer mit der Ruhe, Freitags nachmittags ist es immer etwas leerer hier, weil die Regulars sich nicht bei der Arbeit langweilen ;-)

Ok. Ich wollt nur wissen, ob ich noch was tun kann, wenn mir schon geholfen wird.

Felixi

[Gunnar Bittersmann]

@@Matthias Apsel

Ich hätte es gerne in ein fiddle gepackt

JSFiddle ist für CSS-Probleme nicht das beste Werkzeug.

Kannst du nicht besser eine Seite online stellen? bei bplaced oder so?

Das ist nicht wirklich besser. Bei Codepen oder Dabblet kann man die problematische Seite forken und eine mögliche Lösung hier verlinken.

LLAP 🖖

[woodfighter]

Tach,

indem du einen Selektor mit höherer Spezifität angibst, du könntest also aus deinem Beispiel also z.B. einen ID- Klassen-, oder Element-Selektor hinzufügen, je nachdem wie dein restliches HTML aussieht.

Ich habe es so versucht, aber das hatte keine Auswirkungen.

    article#tabnavigation.ui-state-hover,
    article#tabnavigation..ui-widget-content,
    article#tabnavigation..ui-state-focus {
    background: #330033; 
	font-weight: normal; 
	color: #FFFFFF; 
	border: 0px;
	outline: none; 
    }

Was ist daran falsch?

du selektierst etwas, das im HTML nicht existiert; ich habe es jetzt nur für den Hover-Zustand untersucht, aber ich vermute mal, dass es für die anderen genauso gilt (zumindest, wenn du nur einen statt zwei Punkte setzt). Dein CSS selektiert ein Element vom Typ article mit der ID tabnavigation und der Klasse ui-state-hover. JQuery-UI setzt die Klasse ui-state-hover aber nicht auf das article-Element, sondern auf das li-Element (das ist ja auch dasjenige, dessen Aussehen sich ändert). Du brauchst also zusätzlich den Nachfahrensselektor, denn du willst ja ein Element mit der Klasse ui-state-hover, das sich innerhalb eines Elements mit der ID tabnavigation befindet, selektieren:

#tabnavigation .ui-state-hover

Oder du machst es wie Gunnar vorgeschlagen hat und sorgst einfach dafür, dass das JQuery-UI-CSS vor deinem CSS im Quelltext ist, dann reicht es auch, wenn du einfach den selben Selektor nutzt, um den vorherigen zu überschreiben:

.ui-state-hover

Das gilt dann allerdings für alle entsprechenden UI-Elemente, nicht nur diejenigen unterhalb von #tabnavigation.

mfg
Woodfighter