Guten Tag zusammen!
Seit Wochen bastel ich an einem Menü für meine neue HP. Ich habe mir ein fertiges Script runtergeladen und meine Wünschen angepasst.
Jedoch habe ich noch bei 2 Sachen ein Problem und bis jetzt konnte mir keiner Helfen.
Vorweg muss ich sagen, das mein Englisch gerade mal für das nötigste reicht. Ja ich weiß das hier (wie auch überall anders) mir niemand einen Code schreibt. Aber ich habe die Hoffnung, das mir vielleicht jemand sagen kann, wo ich was ändern muss, damit es funktioniert. Bis jetzt konnte es keiner und ich bin echt verzweifelt.
Hier erstmal mein Menüaufbau:
<ul id="menue" class="nav">
<li><a href="index.html" target="_self">Startseite</a></li>
<li><a href="Aktuelles.html" target="_self">Aktuelles</a>
<li><a href="Ueber_uns.html" target="_self">Über uns</a>
<li><a href="Hovawart.html" target="_self">Hovawart</a></li>
<li><a href="#">Unsere Hunde</a>
<ul>
<li><a href="Asaria.html" target="_self">Asaria</a></li>
<li><a href="Ginny.html" target="_self">Ginny</a></li>
<li><a href="Unvergessen.html" target="_self">Unvergessen</a></li>
</ul>
</li>
<li><a href="#">Welpen</a>
<ul>
<li><a href="Wurfplanung.html" target="_self">Wurfplanung</a>
</li>
<li><a href="A-Wurf.html" target="_self" class="nav">A-Wurf</a>
<ul>
<li><a href="Asaria.html" target="_self">Asaria</a></li>
<li><a href="Aadje.html" target="_self">Aadje</a></li>
<li><a href="Adika.html" target="_self">Adika</a></li>
<li><a href="Aben.html" target="_self">Aben</a></li>
<li><a href="Artim.html" target="_self">Artim</a></li>
<li><a href="Ajamu.html" target="_self">Ajamu</a></li>
<li><a href="Arjen.html" target="_self">Arjen</a></li>
<li><a href="Asur.html" target="_self">Asur</a></li>
<li><a href="Astaro.html" target="_self">Astaro</a></li>
<li><a href="Asron.html" target="_self">Asron</a></li>
</ul>
</li>
<li><a href="B-Wurf.html" target="_self">B-Wurf</a>
</li>
</ul>
</li>
<li><a href="#">Zucht</a>
<ul>
<li><a href="Ziele.html" target="_self">Zuchtiele</a></li>
<li><a href="Sichtweisen.html" target="_self">Sichtweisen</a></li>
<li><a href="Aufzucht.html" target="_self">Aufzucht</a></li>
<li><a href="Deckrueden.html" target="_self">Deckrüden</a></li>
<li><a href="Wurfuebersicht.html" target="_self">Wurfübersicht</a></li>
</ul>
</li>
<li><a href="#">Informationen</a>
<ul>
<li><a href="Serioese_Zuechter.html" target="_self">Seriöse Züchter</a></li>
<li><a href="Praegung.html" target="_self">Prägung</a></li>
<li><a href="Kind_und_Hund.html" target="_self">Kind & Hund</a></li>
<li><a href="Kastration.html" target="_self">Kastration</a></li>
<li><a href="Glossar.html" target="_self">Glossar</a></li>
</ul>
</li>
<li><a href="gb.php" target="_self">Gästebuch</a></li>
<li><a href="Kontakt.php" target="_self">Kontakt</a></li>
<li><a href="Impressum.html" target="_self">Impressum</a></li>
</ul>
Alles anzeigen
Hier das jQuery-Script dazu:
<script type="text/javascript" id="demo2-javascript">
$(document).ready(function() {
$("#menue").navgoco({accordion: true});
});
</script>
/*
* jQuery Navgoco Menus Plugin v0.2.1 (2014-04-11)
* https://github.com/tefra/navgoco
*
* Copyright (c) 2014 Chris T (@tefra)
* BSD - https://github.com/tefra/navgoco/blob/master/LICENSE-BSD
*/
(function($) {
"use strict";
/**
* Plugin Constructor. Every menu must have a unique id which will either
* be the actual id attribute or its index in the page.
*
* @param {Element} el
* @param {Object} options
* @param {Integer} idx
* @returns {Object} Plugin Instance
*/
var Plugin = function(el, options, idx) {
this.el = el;
this.$el = $(el);
this.options = options;
this.uuid = this.$el.attr('id') ? this.$el.attr('id') : idx;
this.state = {};
this.init();
return this;
};
/**
* Plugin methods
*/
Plugin.prototype = {
/**
* Load cookie, assign a unique data-index attribute to
* all sub-menus and show|hide them according to cookie
* or based on the parent open class. Find all parent li > a
* links add the carent if it's on and attach the event click
* to them.
*/
init: function() {
var self = this;
self._load();
self.$el.find('ul').each(function(idx) {
var sub = $(this);
sub.attr('data-index', idx);
if (self.options.save && self.state.hasOwnProperty(idx)) {
sub.parent().addClass(self.options.openClass);
sub.show();
} else if (sub.parent().hasClass(self.options.openClass)) {
sub.show();
self.state[idx] = 1;
} else {
sub.hide();
}
});
var caret = $('<span></span>').prepend(self.options.caretHtml);
var links = self.$el.find("li > a");
self._trigger(caret, false);
self._trigger(links, true);
self.$el.find("li:has(ul) > a").prepend(caret);
},
/**
* Add the main event trigger to toggle menu items to the given sources
* @param {Element} sources
* @param {Boolean} isLink
*/
_trigger: function(sources, isLink) {
var self = this;
sources.on('click', function(event) {
event.stopPropagation();
var sub = isLink ? $(this).next() : $(this).parent().next();
var isAnchor = false;
if (isLink) {
var href = $(this).attr('href');
isAnchor = href === undefined || href === '' || href === '#';
}
sub = sub.length > 0 ? sub : false;
self.options.onClickBefore.call(this, event, sub);
if (!isLink || sub && isAnchor) {
event.preventDefault();
self._toggle(sub, sub.is(":hidden"));
self._save();
} else if (self.options.accordion) {
var allowed = self.state = self._parents($(this));
self.$el.find('ul').filter(':visible').each(function() {
var sub = $(this),
idx = sub.attr('data-index');
if (!allowed.hasOwnProperty(idx)) {
self._toggle(sub, false);
}
});
self._save();
}
self.options.onClickAfter.call(this, event, sub);
});
},
/**
* Accepts a JQuery Element and a boolean flag. If flag is false it removes the `open` css
* class from the parent li and slides up the sub-menu. If flag is open it adds the `open`
* css class to the parent li and slides down the menu. If accordion mode is on all
* sub-menus except the direct parent tree will close. Internally an object with the menus
* states is maintained for later save duty.
*
* @param {Element} sub
* @param {Boolean} open
*/
_toggle: function(sub, open) {
var self = this,
idx = sub.attr('data-index'),
parent = sub.parent();
self.options.onToggleBefore.call(this, sub, open);
if (open) {
parent.addClass(self.options.openClass);
sub.slideDown(self.options.slide);
self.state[idx] = 1;
if (self.options.accordion) {
var allowed = self.state = self._parents(sub);
allowed[idx] = self.state[idx] = 1;
self.$el.find('ul').filter(':visible').each(function() {
var sub = $(this),
idx = sub.attr('data-index');
if (!allowed.hasOwnProperty(idx)) {
self._toggle(sub, false);
}
});
}
} else {
parent.removeClass(self.options.openClass);
sub.slideUp(self.options.slide);
self.state[idx] = 0;
}
self.options.onToggleAfter.call(this, sub, open);
},
/**
* Returns all parents of a sub-menu. When obj is true It returns an object with indexes for
* keys and the elements as values, if obj is false the object is filled with the value `1`.
*
* @since v0.1.2
* @param {Element} sub
* @param {Boolean} obj
* @returns {Object}
*/
_parents: function(sub, obj) {
var result = {},
parent = sub.parent(),
parents = parent.parents('ul');
parents.each(function() {
var par = $(this),
idx = par.attr('data-index');
if (!idx) {
return false;
}
result[idx] = obj ? par : 1;
});
return result;
},
/**
* If `save` option is on the internal object that keeps track of the sub-menus states is
* saved with a cookie. For size reasons only the open sub-menus indexes are stored. *
*/
_save: function() {
if (this.options.save) {
var save = {};
for (var key in this.state) {
if (this.state[key] === 1) {
save[key] = 1;
}
}
cookie[this.uuid] = this.state = save;
$.cookie(this.options.cookie.name, JSON.stringify(cookie), this.options.cookie);
}
},
/**
* If `save` option is on it reads the cookie data. The cookie contains data for all
* navgoco menus so the read happens only once and stored in the global `cookie` var.
*/
_load: function() {
if (this.options.save) {
if (cookie === null) {
var data = $.cookie(this.options.cookie.name);
cookie = (data) ? JSON.parse(data) : {};
}
this.state = cookie.hasOwnProperty(this.uuid) ? cookie[this.uuid] : {};
}
},
/**
* Public method toggle to manually show|hide sub-menus. If no indexes are provided all
* items will be toggled. You can pass sub-menus indexes as regular params. eg:
* navgoco('toggle', true, 1, 2, 3, 4, 5);
*
* Since v0.1.2 it will also open parents when providing sub-menu indexes.
*
* @param {Boolean} open
*/
toggle: function(open) {
var self = this,
length = arguments.length;
if (length <= 1) {
self.$el.find('ul').each(function() {
var sub = $(this);
self._toggle(sub, open);
});
} else {
var idx,
list = {},
args = Array.prototype.slice.call(arguments, 1);
length--;
for (var i = 0; i < length; i++) {
idx = args[i];
var sub = self.$el.find('ul[data-index="' + idx + '"]').first();
if (sub) {
list[idx] = sub;
if (open) {
var parents = self._parents(sub, true);
for (var pIdx in parents) {
if (!list.hasOwnProperty(pIdx)) {
list[pIdx] = parents[pIdx];
}
}
}
}
}
for (idx in list) {
self._toggle(list[idx], open);
}
}
self._save();
},
/**
* Removes instance from JQuery data cache and unbinds events.
*/
destroy: function() {
$.removeData(this.$el);
this.$el.find("li:has(ul) > a").unbind('click');
this.$el.find("li:has(ul) > a > span").unbind('click');
}
};
/**
* A JQuery plugin wrapper for navgoco. It prevents from multiple instances and also handles
* public methods calls. If we attempt to call a public method on an element that doesn't have
* a navgoco instance, one will be created for it with the default options.
*
* @param {Object|String} options
*/
$.fn.navgoco = function(options) {
if (typeof options === 'string' && options.charAt(0) !== '_' && options !== 'init') {
var callback = true,
args = Array.prototype.slice.call(arguments, 1);
} else {
options = $.extend({}, $.fn.navgoco.defaults, options || {});
if (!$.cookie) {
options.save = false;
}
}
return this.each(function(idx) {
var $this = $(this),
obj = $this.data('navgoco');
if (!obj) {
obj = new Plugin(this, callback ? $.fn.navgoco.defaults : options, idx);
$this.data('navgoco', obj);
}
if (callback) {
obj[options].apply(obj, args);
}
});
};
/**
* Global var holding all navgoco menus open states
*
* @type {Object}
*/
var cookie = null;
/**
* Default navgoco options
*
* @type {Object}
*/
$.fn.navgoco.defaults = {
caretHtml: '',
accordion: false,
openClass: 'open',
save: true,
cookie: {
name: 'navgoco',
expires: false,
path: '/'
},
slide: {
duration: 400,
easing: 'swing'
},
onClickBefore: $.noop,
onClickAfter: $.noop,
onToggleBefore: $.noop,
onToggleAfter: $.noop
};
})(jQuery);
Alles anzeigen
Und hier noch das dazugehörige CSS:
.nav, .nav ul, .nav li {
list-style: none;
font-family: "Eras iTC";
width: 191px;
}
.nav ul {
padding: 0;
margin: 0 0 0 0px;
text-indent: 20px;
}
.nav ul a:link {
}
.nav ul a:hover {
background-image: url(../Icons/punkt_schw.gif);
background-repeat: no-repeat;
background-position: 9% center;
color: #000;
background-color: #FFF;
letter-spacing: 0px;
}
.nav ul a:focus {
background-image: url(../Icons/punkt_schw.gif);
background-repeat: no-repeat;
background-position: 9% center;
color: #000;
background-color: #FFF;
letter-spacing: 0px;
}
.nav ul li ul {
padding: 0;
margin: 0 0 0 0px;
text-indent: 40px;
}
.nav ul li ul a:link {
}
.nav ul li ul a:hover {
background-image: url(../Icons/punkt_schw.gif);
background-repeat: no-repeat;
background-position: 20% center;
color: #000;
background-color: #FFFFFF;
letter-spacing: 0px;
}
.nav ul li ul a:focus {
background-image: url(../Icons/punkt_schw.gif);
background-repeat: no-repeat;
background-position: 20% center;
color: #000;
background-color: #FFFFFF;
letter-spacing: 0px;
}
.nav {
padding: 4px;
margin: 0px;
}
.nav > li {
margin: 4px 0;
}
.nav > li li {
margin: 2px 0;
}
.nav a {
color: #000;
display: block;
outline: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-decoration: none;
}
.nav li > a > span {
float: right;
font-size: 19px;
font-weight: bolder;
}
.nav li > a:hover > span {
color: #fff;
}
.nav a:hover, .nav li.active > a {
background-image: url(../Icons/punkt_schw.gif);
background-repeat: no-repeat;
background-position: 4% center;
color: #000;
letter-spacing: 2px;
}
.nav a:focus, .nav li.active > a {
background-image: url(../Icons/punkt_schw.gif);
background-repeat: no-repeat;
background-position: 4% center;
color: #000;
letter-spacing: 2px;
}
.nav li a {
font-size: 18px;
line-height: 18px;
padding: 2px 10px;
}
.nav > li > a {
font-size: 18px;
line-height: 20px;
padding: 4px 10px;
text-indent: 10px;
background-color: #dbdbb8;
border: 1px solid black;
}
Alles anzeigen
Nun zu meinen beiden Problemen:
1.) Wenn ich auf "A-Wurf" klicke macht sich nicht mehr das darunter liegende Submenü mit den eizelnen Namen auf. Das geht nur wenn ich den "A-Wurf" NICHT verlinke. Ich habe aber schon gesehen, das beides möglich ist.
2.) Wünsche ich mir, das wenn man auf einen Menüpunkt klickt der optisch so aussieht, als wenn man mit der Maus darüber fährt. Das ging auch, solange bis ich alle Seiten miteinander verlinkt hatte (also ähnlich wie das Problem oben). Der Menüpunkt soll solange markiert bleiben, bis man einen anderen Menüpunkt anwählt. Ich habe es mit a:active und a:focus versucht, aber es geht nicht.
Hier auch noch der Link zu meinem Testserver wo die HP momentan liegt: http://chinthya.cwsurf.de/
Nun hoffe ich, das mir hier jemand helfen kann und mag und mir sagt, wo ich was ändern muss damit es geht.
Schon jetzt ganz lieben DANK!!!
Gruß Chinthya