Consigli per sistemare meglio il menu

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
Salve a tutti,

Dopo un po' di assenze sono ritornato oggi per avere un aiuto da parte vostra. Dunque venendo al sodo. Sto creando un archivio personale e mi sono imbattuto nel creare un menu con diversi argomenti, e in questi argomenti cliccandoci sopra si apre la pagina interessata dove a sua volta ci sono degli altri menu. In primo luogo vorrei sapere se nel menu principale si possono mettere dei sotto menu (penso di si ma non so come si fa). Secondo poi, vorrei abbellire il mio menu che è molto spartano e all'antica. Questo è il codice completo della pagina:

PHP:
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
             
#intestazione{
width:100%;
height:100px;
position:absolute;
top:0px;
left:0px;
text-align: center;
font-family: Comic Sans MS;
font-size: 100%
}    

#txtdx {
 width:100%;
height:100px;
position:absolute;
top:0px;
right:0px;
text-align: right;
font-family: Comic Sans MS;
font-size: 100%   
}    

#divhr{
position:absolute;
top: 125px;
font-family: Comic Sans MS;
font-size: 100%;
display: block;
}

    #footer
{
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    background: white;
    color: black;
    font-family: Comic Sans MS;
    font-size: 15px;
    width: 100%;
   /* padding: 5px 0;*/
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter: alpha(opacity=90);
}

</style>
        
    </head>
    
          
    <body>
        <header>
 
            <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
            <div id ="intestazione">
            
            <h1>MENU PRINCIPALE</h1>
            
            <hr>
        </div>

            <div id ="txtdx">
     
   <h1>Cosa mettere ??? </h1>
   
        </Header>  
        
    <footer>
            <div id ="footer">
                <hr>
                <h1>MENU PRICIPALE ARCHIVIO DIABOLIK</h1>
                </hr>
            </div>
        </div>
        </footer>
                <div id = "divhr">    
                   <div class ="ClasseDelDiv">
        <ul id="menu">
    <li><a href="menuprincipale.php">Home</a></li>
    <li><a href="archiviodiabolik.php">Archivio Diabolik</a></li>
    <li><a href="archdktablet.php">Archivio Diabolik nel tablet</a></li>
    <li><a href="archlibrimamma.php">Archivio libri Mamma</a></li>
    <li><a href="archlibrimammakindle.php">Archivio libri mamma nel kindle</a></li>
    <li><a href="aboutprogram.php">Archivio libri mamma nel kindle</a></li>
</ul>

            
        </div> </div>
            
   
        
        <?php
        require_once "connetti.php";
        require_once "data.php";
        echo "</hr>";
        
        ?>
    
</html>

Senza che perdiate tempo ad eseguirlo vi mostro uno screen shots di come appare brutalmente e orripilante direi. Questa è l'immaggine allegata:

elenco menu.PNG


Qualcuno mi può aiutare ad abbellirlo ???? Ah una cosa dovrebbe stare al centro della pagina possibilmente. Grazie aspetto una vostra risposta che è sempre utile.
 
Codice:
<!doctype html>
<html>
<head>
<title>menu</title>
<meta charset="utf-8">
<style type="text/css">
#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

ul#cm-nav ,
ul#cm-nav ul {
 list-style-type: none;
 border-right: black 1px solid;
 border-bottom: black 1px solid;
 padding: 0px;
 margin: 0px;
 list-style-image: none
}

ul#cm-nav li {
 list-style-type: none;
 position: relative;
 padding: 0px;
 margin: auto;
 list-style-image: none
}

ul#cm-nav li li {
 width: auto;
 float: none
}

#cm-nav a {
 font-size: 9pt;
 text-decoration: none;
 border-top: black 1px solid;
 font-family: verdana;
 background: #d6d5f0;
 white-space: nowrap;
 color: black;
 text-align: left;
 padding: 5px;
 border-left: black 1px solid;
 display: block
}

#cm-nav a:focus {
 outline-width: medium;
 outline-style: none;
 outline-color: invert
}

#cm-nav a.no-click {cursor: default}

#cm-nav > li > a ,
#cm-nav > li > a.arrow {padding-right: 4px}

.arrow-pad#cm-nav > li > a ,
#cm-nav ul.arrow-pad > li > a {padding-right: 11px}

#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-repeat: no-repeat;
 background-position: right 50%
}

#cm-nav li:hover > a {
 color: white;
 background-color: #807fb0
}

#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
 position: absolute;
 z-index: 999;
 display: none
}

#cm-nav li:hover ul ,
#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul ,
#cm-nav li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}

#cm-nav ul ul {margin-left: 0px}

#cm-nav ul {
 left: 0px;
 top: 0px
}
</style>
</head>

<body style="background:#FFFFFF">

<div style="display: table">
<ul id="cm-nav" class="arrow-pad">
   <li><a href="menuprincipale.php" target="_self">Home Paga</a></li>
   <li><a href="archiviodiabolik.php" target="_self">Archivio Diabolik</a></li>
   <li><a href="archdktablet.php" target="_self">Archivio Diabolik nel tablet</a></li>
   <li><a href="#" target="_self" class="arrow no-click">Voco menu con sottomenu</a>
      <ul>
         <li><a href="#" target="_self">Voce 1</a></li>
         <li><a href="#" target="_self">Vode 2</a></li>
         <li><a href="#" target="_self">Vode 3</a></li>
      </ul>
   </li>
   <li><a href="archlibrimamma.php" target="_self">Archivio libri Mamma</a></li>
   <li><a href="archlibrimammakindle.php" target="_self">Archivio libri mamma nel kindle</a></li>
   <li><a href="aboutprogram.php" target="_self">Archivio libri mamma nel kindle</a></li>
</ul>
</div>

</body>

</html>
Icona per il sottomenu
arrow-right.gif
 
To consiglio di studiare Bootstrap e di utilizzarlo, è veramente molto comodo.
Potrai farci di tutto ma c'è da applicarsi!


Ruggero Carrara
_____________________________________

RBNZ VISUAL ART
e-mail: [email protected]
Sito Web: rbnz.org
Skype: rbnz.art
 
To consiglio di studiare Bootstrap.....
Cosa centra questo consiglio con la sua richiesta? Imparare a programmare con i linguaggi si fa di tutto! Non con dei cotrutti già mezzi pronti. Poi questa è una sezione tecnica ove si parla di css/html non di bootstrap
 
Perdonatemi sapevo che bootstrap una volta serviva per avere il doppio sistema operativo su un unico pc ossia la scelta se avviarlo con windows o ubuntu ad esempio ma forse mi sbaglio. Comunque stiamo andado off-topic. Il consiglio e quello che mi ha postato Max 1 va più che bene. Anzi ringrazio Max per avrci perso tempo. A breve ti saprò dire anche se era quello che cercavo e se funziona.
 
Ciao Max 1,

Il menu direi che è perfetto. Ho da chiederti parecchie spiegazioni se me le puoi dare. Anzi se fosse possibile dei commenti direttamente sull'esempio che mi hai fatto in modo tale che ci possa capire qualcosa se dovessi modificarlo. A cambiare voci non ci dovrebbero essere problemi mi riferisco ai sottomenu di esempio. Però ti vorrei chiedere due cose:

1) Sul mio server (ho un nas meglio conosciuto come synology anche se è la marca e può simulare le pagine web e tutto ciò che appartiene alla programmazione php, html ecc. ecc, oltre ad essere una fonte sicura di backup) a priscindere da questo mi viene visualizzato a questa altezza qua che ora mostro on uno screen shot. Fig. 1:

Menu principale.PNG

2) Il simbolo che mi hai messo dove lo dovrei piazzare ??? E poi è possibile piazzare il menu in mezzo allo scermo ossia dove c'è la scritta "menu principale " ???? Grazie.
 
La prima domanda non ho capito cosa vuoi sapere.

La seconda: metti la frecetta nella stessa dir del menu, quella indica che in quella voce c'è dei sottomenu.
Mettere al centro un menu verticale ha poco senso e starebbe anche male.
Per avere un menu al centro è meglio un menu orizzontale
 
Cosa centra questo consiglio con la sua richiesta? Imparare a programmare con i linguaggi si fa di tutto! Non con dei cotrutti già mezzi pronti. Poi questa è una sezione tecnica ove si parla di css/html non di bootstrap

Ma rilassati, chi ti credi di essere?! Il mio era un consiglio.


Ruggero Carrara
_____________________________________

RBNZ VISUAL ART
e-mail: [email protected]
Sito Web: rbnz.org
Skype: rbnz.art
 
Guarda moderati termini ok ???? Ho segnalato solo che stavamo andando off-topic. Tu chi ti credi di essere ??? Superam ??? Chi utilizza questo forum lobutolizza perché è programmatore no adopera programmi tipo il tuo. Chiedo aiuto e consigli. Non capisco il motivo per cui ti sei iscritto se adoperi programmi tipo bootstrap ossia che ti danno la pappa pronta. Con questo chiudo la discussione con te e non vado oltre.....
 
@RBNZ
Se ti azzardi a fare ancora polemiche con frasi inopportune, su questo forum hai chiuso!
Spero di essermi spiegato!
 
Sì potrebbe modificare in menù orizzontale ???? È difficile ??? Sulla prima domanda volevo capire mese i vari passaggi. Tutto qua.
Per avere il menu in orizzintale bisogna rifarlo da capo, non conviene modificare.
Per costruire un menu come passaggi non c'è un granchè, basta una lista non ordinata e formattarla con i css

Vuoi provare il menu in orizzontale?
 
@RBNZ
Se ti azzardi a fare ancora polemiche con frasi inopportune, su questo forum hai chiuso!
Spero di essermi spiegato!

Ma quali polemi con frasi inopportune??
Tranquilli, chiudo io con questo forum.
Buona vita!


Ruggero Carrara
_____________________________________

RBNZ VISUAL ART
e-mail: [email protected]
Sito Web: rbnz.org
Skype: rbnz.art
 
@paperinik4
Tranquillo non ce l'ho con te!
Ora provo a farti un esempio orizzontale e vedi come va!
 
Codice:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>

<style type="text/css">
#cm-nav li a.arrow {background-image: url(arrow-right.gif)}

#cm-nav > li > a.arrow {background-image: url(arrow-down.gif)}

ul#cm-nav ,
ul#cm-nav ul {
 list-style-type: none;
 padding: 0px;
 margin: 0px;
 list-style-image: none
}

ul#cm-nav li {
 list-style-type: none;
 width: auto;
 position: relative;
 float: left;
 padding: 0px;
 margin: 0px;
 list-style-image: none
}

ul#cm-nav li li {
 width: auto;
 float: none
}

#cm-nav a {
 font-size: 9pt;
 text-decoration: none;
 border-top: black 1px solid;
 font-family: verdana;
 border-right: black 1px solid;
 background: #d6d5f0;
 white-space: nowrap;
 border-bottom: black 1px solid;
 text-align: left;
 padding: 5px;
 border-left: black 1px solid;
 display: block
}

#cm-nav a:focus {
 outline-width: medium;
 outline-style: none;
 outline-color: invert
}

#cm-nav a.no-click {cursor: default}

#cm-nav li a {margin: -1px -1px 0px 0px}

#cm-nav li li a {margin: 0px 0px -1px}

#cm-nav > li > a.arrow {padding-right: 14px}

#cm-nav ul.arrow-pad > li > a {padding-right: 11px}

#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-repeat: no-repeat;
 background-position: right 50%
}

#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
 position: absolute;
 z-index: 999;
 display: none
}

#cm-nav li:hover ul {display: block}

#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul ,
#cm-nav li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li:hover ul ,
#cm-nav li li li li li li li li li li li li li li li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}

#cm-nav li:hover ul {margin-left: 0px}

#cm-nav ul ul {
 left: -1px;
 top: 1px
}

#cm-nav li {top: -1px}

#cm-nav a {background-color: #000000}

#cm-nav a {border-color: #ed1c24}

#cm-nav a {color: #ffffff}

#cm-nav li:hover > a {background-color: #ffffff}

#cm-nav li:hover > a {color: #000000}

#cm-nav a {font-weight: normal}
</style>

</head>

<body style="background:#FFFFFF">

<div style="display: table; margin-left: auto; margin-right: auto">
<ul id="cm-nav">
   <li><a href="menuprincipale.php" target="_self">Home Page</a></li>
   <li><a href="#" class="arrow no-click">Voce con sottomenu</a>
      <ul>
         <li><a href="#" target="_self">Sottomenu 1</a></li>
         <li><a href="#" target="_self">Sottomenu 2</a></li>
         <li><a href="#" target="_self">Sottomenu 3</a></li>
      </ul>
   </li>
   <li><a href="archiviodiabolik.php" target="_self">Archivio Diabolik</a></li>
   <li><a href="archdktablet.php" target=":self">Archivio Diabolik nel tablet</a></li>
   <li><a href="archlibrimamma.php" target="_self">Archivio libri Mamma</a></li>
   <li><a href="archlibrimammakindle.php" target="_self">Archivio libri mamma nel kindle</a></li>
   <li><a href="aboutprogram.php" target="_self">Archivio libri mamma nel kindle</a></li>
</ul>
</div>

</body>

</html>

Icona per il sottomenu

arrow-down.gif
 

Discussioni simili