Beiträge von tsaenger

tsaenger · 7. Februar 2017

Hallo zusammen,

ich habe SlickNav auf meine Webseite zum Laufen bekommen.
Nun würde ich es gerne soweit verändern, das wenn ich einen Menüpunkt angeklickt habe und anschließend das Menü wieder aufrufe sich das Menü den vorherigen Punkt gemerkt hat und den geklickten Menüpunkt hervorhebt.
Leider habe ich noch nicht herausgefunden wie ich das machen kann.
Kann mir jemand bitte dabei helfen, oder einen Tipp geben wie ich das realisieren kann.
Slicknav ist ja ein JavaScript ( https://github.com/ComputerWol…r/dist/jquery.slicknav.js)

Vielen Dank.

Gruß
Tobias

tsaenger · 24. Mai 2016

Hallo zusammen,

ich habe es nun geschafft mit CSS Teilstücke zu erstellen:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">




#piechart {
position: relative;
width: 1322px;
height: 1322px;
margin-left: 100px;
margin-top: 100px;
}
.piece {
position: absolute;
width: 1322px;
height: 1322px;
clip: rect(0px, 1322px, 1322px, 661px);
border-radius: 661px;
}
.piece-inner {
position: absolute;
width: 1322px;
height: 1322px;
clip: rect(0px, 661px, 1322px, 0px);
border-radius: 661px;
/*-webkit-backface-visibility: hidden;*/
}
/* Spezifische Einstellungen */
#piece1 {
transform: rotate(0deg);
}
#piece1 > .piece-inner {
background: red;
transform: rotate(60deg);
}
#piece2 {
transform: rotate(60deg);
}
#piece2 > .piece-inner {
background: blue;
transform: rotate(60deg);
}
#piece3 {
transform: rotate(120deg);
}
#piece3 > .piece-inner {
background: green;
transform: rotate(60deg);
}
#piece4 {
transform: rotate(180deg);
}
#piece4 > .piece-inner {
background: yellow;
transform: rotate(60deg);
}
#piece5 {
transform: rotate(240deg);
}
#piece5 > .piece-inner {
background: black;
transform: rotate(60deg);
}
#piece6 {
transform: rotate(300deg);
}
#piece6 > .piece-inner {
background: white;
transform: rotate(60deg);
}
</style>
<title>Unbenanntes Dokument</title>
</head>




<body>
<div id="piechart">
<div id="piece1" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece2" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece3" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece4" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece5" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece6" class="piece">
<div class="piece-inner"></div>
</div>




</div>
</body>
</html>

Alles anzeigen

Jetzt hänge ich wieder, da ich die erstellten Stück leider nicht mit einem Link versehen kann. Hat da jmd eine Idee wie das gehen könnte?

Vielen Dank.

Tobias

tsaenger · 23. Mai 2016

Hallo zusammen,

ich habe mittels CSS mehrere Übereinanderliegende Kreise erstellt.

Code

#mitte4 {




position: absolute;
top: 584px;
left: 326px;
width: 1680px;
height: 1556px;
-webkit-border-radius: 0px 0px 300px 300px;
-moz-border-radius: 0px 0px 300px 300px;
border-radius: 100%;
}
#mitte5 {




position: absolute;
top: 334px;
left: 134px;
width: 2090px;
height: 2060px;
-webkit-border-radius: 0px 0px 300px 300px;
-moz-border-radius: 0px 0px 300px 300px;
border-radius: 100%;
}




<a href="http://www.web4.de"><div id="mitte5"></div>
</a>
<a href="http://www.web3.de"><div id="mitte4"></div>
</a>
<a href="http://www.web2.de"><div id="mitte3"></div>
</a>
<a href="http://www.web1.de"><div id="mitte2"></div>
</a>
<a href="http://www.web.de"><div id="mitte"></div>
</a>

Alles anzeigen

Nun würde ich gerne nur einen Teilbereich des Außenrandes des Kreises verlinken. Mit meiner obigen Methode kann ich aber nur immer den kompletten Rand (Überlappung) verlinken.
Hat jemand von euch eine Idee wie ich hier noch unterteilen kann?
Vielen Dank

Gruß
Tobias

Beiträge von tsaenger

SlickNav | geklicktes Untermenue merken

Teilebereich aus Kreis verlinken

Teilebereich aus Kreis verlinken