Hello,
i'm working on a project, but i'm quite new to dnn and website design in general.
I'm trying to create a dropdown menu using jquery and next to the menu i want to display a div, where the content will be displayed using ajax.
I have to position the content div next to the menu, using absolute positioning. When i am in admin mode everything works fine since the container of the module is displayed and the absolute position is referred to the content of the module. The problem is that when i logout and the module-containers are no longer displayed, the absolute positioning of the div element is then referred to the whole page, wich results in the div to cover the whole page.
Here is the code i'm using:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Products.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".katalogos:eq(1)").click(function(){
$(".pisina").slideToggle("slow");
});
$(".katalogos:eq(0)").click(function(){
$(".monotika").slideToggle("slow");
});
$(".katalogos:eq(2)").click(function(){
$(".thermo").slideToggle("slow");
});
$(".katalogos:eq(3)").click(function(){
$(".klima").slideToggle("slow");
});
$(".katalogos:eq(4)").click(function(){
$(".nero").slideToggle("slow");
});
$(".katalogos:eq(5)").click(function(){
$(".antlies").slideToggle("slow");
});
$(".katalogos:eq(6)").click(function(){
$(".ximika").slideToggle("slow");
});
$(".katalogos:eq(7)").click(function(){
$(".stirigmata").slideToggle("slow");
});
$(".katalogos:eq(8)").click(function(){
$(".automatismos").slideToggle("slow");
});
$(".katalogos:eq(9)").click(function(){
$(".xrwmata").slideToggle("slow");
});
$(".katalogos:eq(10)").click(function(){
$(".solines").slideToggle("slow");
});
$(".katalogos:eq(11)").click(function(){
$(".idraulika").slideToggle("slow");
});
});
</script>
<script>
$(document).ready(function(){
$(".monotika li:eq(0)").click(function(){
$("#perigrafi").load("perigrafi.txt #p1");
});
});
</script>
</head>
<body>
<div class="products">
<div class="katalogos">Μονωτικά Υλικά
</div>
<div class="lista">
<ul class="monotika">
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
</div>
<div class="katalogos">Εξοπλισμός πισίνας
</div>
<div class="lista">
<ul class="pisina">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Είδη Θέρμανσης
</div>
<div class="lista">
<ul class="thermo">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Είδη κλιματισμού
</div>
<div class="lista">
<ul class="klima">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Επεξεργασία νερού
</div>
<div class="lista">
<ul class="nero">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Αντλίες
</div>
<div class="lista">
<ul class="antlies">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Χημικά
</div>
<div class="lista">
<ul class="ximika">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Στηρίγματα
</div>
<div class="lista">
<ul class="stirigmata">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Αυτοματισμός
</div>
<div class="lista">
<ul class="automatismos">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Χρώματα
</div>
<div class="lista">
<ul class="xrwmata">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Σωληνώσεις
</div>
<div class="lista">
<ul class="solines">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="katalogos">Υδραυλικά
</div>
<div class="lista">
<ul class="idraulika">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id=perigrafi></div>
</div>
</body>
</html>
And here is the css
.products .katalogos{
width:20%;
padding:5px;
background-color:mediumturquoise;
border:1px solid black;
text-align:center;
opacity:0.6;
filter:alpha(opacity=60);
cursor:pointer;
}
.products .lista{
width:21%;
overflow:hidden;
}
.products li{
background-color:orange;
padding:5px;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
cursor:pointer;
}
.products ul{
list-style-type:none;
display:none;
}
.products #perigrafi{
height:100%;
width:75%;
background-color:lightgreen;
position:absolute;
top:10px;
right:10px;
}
.products .katalogos:hover{
opacity:1;
filter:alpha(opacity=100);
}
.products li:hover{
opacity:1;
filter:alpha(opacity=100);
}