Δημιουργία ιστοσελίδας με οριζόντιο μενού που θα φορτώνει άλλες σελίδες;

doctorized · 8 Ιανουαρίου 2019

Εδώ και 15 μέρες προσπαθώ ανεπιτυχώς να φτιάξω μία απλή σελίδα η οποία θα έχει ένα οριζόντιο μενού με υπομενού και όλος ο υπόλοιπος χώρος θα χρησιμοποιείται για τη φόρτωση κάποιων σελίδων που εγώ θα φτιάξω και θα περιέχουν κείμενο και πίνακες. Αν χρησιμοποιήσω div τότε η σελίδα φορτώνεται σε ένα μικρό πλαίσιο, όπως στην εικόνα που επισυνάπτω. Δοκίμασα κάποιες λύσεις οι οποίες το μόνο που πέτυχαν είναι να αλλάζουν το μέγεθος του div αλλά εμφανίζουν scrollbars στο ίδιο το div με αποτέλεσμα να μην δείχνει ωραίο καθώς η μπάρα ήταν πιο μέσα στο παράθυρο και όχι στην άκρη αλλά και όταν το παράθυρο του περιηγητή δεν είναι μεγιστοποιημένο εμφανίζεται δεύτερη μπάρα, αυτή του περιηγητή. Δοκίμασα με iframe αλλά τίποτα δεν άλλαξε. Δοκίμασα με frameset και η σελίδες φόρτωναν μία χαρά αλλά είχα άλλο πρόβλημα: τα υπομενού κρύβονταν μέσα στο frame, κάτι το οποίο, όπως διάβασα παντού, δεν αλλάζει. Έτσι λοιπόν σας ρωτάω τι μπορώ να κάνω δεδομένου ότι η σελίδα θα δουλεύει μόνο τοπικά στον υπολογιστή, δεν θα ανέβει σε κάποιον ιστοχώρο για να χρησιμοποιήσω php ή κάτι αντίστοιχο.

κώδικας αρχείου htm:

<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="ISO-8859-7"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>     
      function showPage(id) {
        switch (id) {
          case "1":           
            $(".content").html('<object data="start.htm">');
            //alert("ok");
            break;
        }       
      }     
    </script>
</head>
<body>
    <div>
        <ul id="nav">
            <li><a href="#" id="1" onclick="showPage(this.id)">Home</a></li>
            <li><a href="#" target="content" class="parent">Field 1</a>
<ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
        </ul></li>
            <li><a href="#" class="parent">Field 2</a></li>
            <li><a href="#">Field 3</a></li>
        </ul>
    </div>
<div class="content"></div>
</body>
</html>

styles.css:

/* main menu styles*/
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
/* general backround */
background:#00b57f url(bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
z-index:1;
list-style:none;
}
#nav a {
font-weight:bold;
/* xroma grammaton */
color:#ffffff;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#00b57f url(bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
/* fonto subitems */
background:#ddffdd url(bg-ABT.png) repeat-x 0 -100px;
//color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
//text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}
#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:100%;
position:absolute;
z-index:1;
background:#ddffdd url(bg-ABT.png) repeat-x 0 0;
border:1px solid #aa88aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}
.options {
width: 100%;
}
.content {
    margin-left: 0px;
    margin-top: 20px;
    //padding: 1px 16px;
    height: auto;
width=1000px;
    overflow:hidden; 
display:inline-block;  
}

doctorized · 8 Ιανουαρίου 2019

22 λεπτά πριν, xrealtv είπε

πρώτα θα βάλεις μια Class σε κάθε λινκ στο παραδειγμα που σου δίνω την ονομασα "loadhtml"
μετα θα βάλεις ενα Attribute data-href σε κάθε Link και εκεί θα εχεις την σελιδα που θες να φορτώσεις.

και εδώ ειναι ο κώδικας του Html
Στα link να μην βάλεις το "#" αλλά το javascript:void(0); γιατι οταν βαζεις το # σε πετάει πάντα στο Top της σελίδας.

Το class τι θα πρέπει να έχει μέσα; Μπορεί να μην υπάρχουν classes αλλά το css έχει κώδικα για όλα ακόμη και <a> από τη στιγμή που αναφέρεται το πρώτο <ul> ως nav. Δοκίμασα τον κώδικά σου αλλά δεν φορτώνει καθόλου το start.html.

doctorized · 8 Ιανουαρίου 2019

1 λεπτό πριν, xrealtv είπε

Αποκλείετε επειδη το τεσταρα πριν στο ανεβάσω σου το ανεβάζω σε ενα domain να το δεις στην πράξη
δες εδώ https://xrealtv.com/test.html σου εχω βαλει Start kai start1.html

Σε τοπικό επίπεδο που το δουλεύω δεν λειτουργεί. Προφανώς το script θέλει και κάτι άλλο από τον server για να δουλέψει.

doctorized · 8 Ιανουαρίου 2019

Μόλις τώρα, xrealtv είπε

Αφου βλεπεις οτι δεν εχω τιποτα αλλο μεσα και σε τοπικο επιπέδο δουλεβει κατι λαθος κανεις κανε μου paste τον κωδικα σου εδω.

Είναι αυτό που ανέβασες.

<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="ISO-8859-7"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <ul id="nav">
            <li><a href="JavaScript:void(0);" data-href="start.html" class="loadhtml">Home</a></li>
            <li><a href="JavaScript:void(0);" data-href="start.html" class="parent loadhtml">Field 1</a>
<ul>
          <li><a href="JavaScript:void(0);" data-href="start.html" class="loadhtml">1</a></li>
          <li><a href="JavaScript:void(0);" data-href="start.html" class="loadhtml">2</a></li>
          <li><a href="JavaScript:void(0);" data-href="start.html" class="loadhtml">3</a></li>
        </ul></li>
            <li><a href="JavaScript:void(0);" data-href="start.html" class="parent loadhtml">Field 2</a></li>
            <li><a href="JavaScript:void(0);" data-href="start.html" class="parent loadhtml">Field 3</a></li>
        </ul>
    </div>
<div class="content"></div>


<script>     
$(document).ready(function(){
$(".loadhtml").on("click",function(e){
$.ajax({ 
url: $(this).data("href"), 
cache:false,
success: function(data) {$(".content").html(data);}
});
});
      
});
</script>


</body>
</html>

doctorized · 8 Ιανουαρίου 2019

Μόνο σε Edge δουλεύει. Στους άλλους όχι.

doctorized · 8 Ιανουαρίου 2019

1 λεπτό πριν, xrealtv είπε

εδώ λενε οτι δουλεβει και σε αλεπου

https://stackoverflow.com/questions/38344612/ajax-request-to-local-file-system-not-working-in-chrome

Αυτό είναι το θέμα. Ούτε Firefox ούτε Chrome. Μάλιστα στον Edge όταν πατήσω το Home μου εμφανίζει ξανά την σελίδα με το μενού ενώ σε όλα τα άλλα εμφανίζει κανονικά το start.html.

doctorized · 8 Ιανουαρίου 2019

6 λεπτά πριν, xrealtv είπε

και εδώ ειναι η λυση για να το κανεις να παιζει

http://www.chrome-allow-file-access-from-file.com/windows.html

Δυστυχώς αυτό δεν γίνεται γιατί δεν μπορώ να το δώσω σε κάποιον και να του πω "κάνε αυτό το βήμα για να σου δουλέψει".

doctorized · 8 Ιανουαρίου 2019

3 λεπτά πριν, xrealtv είπε

Τοτε η λυση σου ειναι το IFrame αλλα δεν γνωρίζω και εκει αν θα εχεις το ιδιο προβλημα δοκιμασες?

Έκανα κάποιες αποτυχημένες προσπάθειες. Αν έχεις κάποιον κώδικα ευχαρίστως να τον δοκιμάσω.

Μόλις τώρα, xrealtv είπε

Αρα για να καταλαβω θες να δώσεις Html αρχεια και να εχεις ενα μενου να τα φορτώνει τοπικα χωρις Webserver Installed σωστα?

Ναι σωστά. Θα δίνεται ένας φάκελος με τα αρχεία και τέλος.

doctorized · 8 Ιανουαρίου 2019

12 λεπτά πριν, xrealtv είπε

αρα το Edge ειναι Μονόδρομος κατσε να δώ σε IE broswer τι γινετε κια θα σου πω.αμεσως

Δοκιμασε αυτο https://xrealtv.com/test2.html με Edge δεν εχω edge εγώ να το δοκιμάσω

Δουλεύει σε firefox και Edge.Όχι σε ΙΕ και Chrome. Καταλαβαίνω ότι πρέπει να ανέβουν τα αρχεία σε server για να δουλέψει σωστά παντού. Αφού δεν έχω τέτοια δυνατότητα, θα καταφύγω στην έσχατη λύση. Το μενού δεν θα είναι στατικό αλλά μέσα σε κάθε σελίδα. Θα φορτώνεται κανονικά η σελίδα με το μενού μέσα της.

doctorized · 9 Ιανουαρίου 2019

Μια μικρή βοήθεια! Επειδή βρήκα χώρο για να ανεβάσω τα αρχεία μου, πώς μπορώ να φορτώνω την home.html απευθείας όταν φορτώνει η αρχική σελίδα με το μενού;

To βρήκα!

Επεξ/σία 9 Ιανουαρίου 2019 από doctorized

Σύνδεση

Δημιουργία ιστοσελίδας με οριζόντιο μενού που θα φορτώνει άλλες σελίδες;

Προτεινόμενες αναρτήσεις

doctorized

doctorized

doctorized

doctorized

doctorized

doctorized

doctorized

doctorized

doctorized

doctorized

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση