Menu come phpBB Social Network

[lenders]

E' possibile avere un menu del genere?

Se non riuscite a vedere il forum è menu orizzontale con delle immagini con la scritta sotto che porta al link di una pagina o delle mods installate!

[Haku]

Da errore il link.
Comunque, posta una immagine, è sempre meglio a volte di mille parole.

[lenders]

Il problema e che da errore e quindi non posso postare l'immagine!

[lenders]

Sono riuscita a prenderla da internet meglio di cosi:

[pavel70]

Mi scuso se il mio quesito non ha noiente a che vedere col 3d..
volevo chiederti: come faccio a rendere cliccabile una determinata parola..nel tuo caso menu?

[lenders]

Mi dispiace non so come aiutarti.Anch'io sto aspettando un'aiuto.Spero tanto che però arrivi!

[Haku]

Con il sorgente vedo questo:

Codice: Seleziona tutto

            <div id="search-box">
                <ul class="navi">
                    
                    <li class="login">
                        <a href="./ucp.php?mode=login&sid=7ed080e411dcb0f6d1f1faaf53e0dfdf" title="Login"><span></span>Login</a>
                        
                        <div class="menu_hover_box">
                            <div>

                                <form method="post" action="./ucp.php?mode=login&sid=7ed080e411dcb0f6d1f1faaf53e0dfdf">
                                    <p>
                                        <label for="username">
                                            Username
                                        </label>
                                        <input type="text" name="username" id="username" size="10" class="inputbox" title="Username" />
                                    </p>
                                    <p>
                                        <label for="password">

                                            Password
                                        </label>
                                        <input type="password" name="password" id="password" size="10" class="inputbox" title="Password" />
                                    </p>
                                    <p>
                                        <input type="submit" name="login" value="Login" class="button_submit" />
                                        
                                        <input type="checkbox" name="autologin" id="autologin" />
                                        <label for="autologin">
                                            Remember me
                                        </label>

                                    </p>
                                    <p class="links">
                                        <a href="./ucp.php?mode=register&sid=7ed080e411dcb0f6d1f1faaf53e0dfdf">Register</a>&nbsp;&bull;&nbsp;<a href="">I forgot my password</a>
                                    </p>
                                    <input type="hidden" name="redirect" value="./index.php?sid=7ed080e411dcb0f6d1f1faaf53e0dfdf" />

                                </form>
                            </div>

                        </div>
                        
                    </li>
                    
                    <li class="search">
                        <a href="./search.php?sid=7ed080e411dcb0f6d1f1faaf53e0dfdf" title="View the advanced search options"><span></span>Search</a>
                        <div class="menu_hover_box">
                            <form action="./search.php?sid=7ed080e411dcb0f6d1f1faaf53e0dfdf" method="post" id="search">
                                <fieldset>
                                    <input name="keywords" type="text" maxlength="128" title="Search for keywords" class="inputbox" value="Search…" onclick="if(this.value=='Search…')this.value='';" onblur="if(this.value=='')this.value='Search…';" />

                                    <input class="button_submit" value="Search" type="submit" />
                                    <br />
                                    <a href="./search.php?sid=7ed080e411dcb0f6d1f1faaf53e0dfdf" title="View the advanced search options">Advanced search</a> 
                                </fieldset>
                            </form>
                        </div>
                    </li>
                    
                    <li class="forum">
                        <a href="./index.php" title="Support"><span></span>Support</a>

                    </li>
                    
                    <li class="download">
                        <a href="./download.php" title="Download"><span></span>Download</a>
                        <div class="menu_hover_box menu_list downloads">
                        	<div>
                        		<ul>
                        			<li><a href="./download.php#download">Download phpBB Social Network</a></li>
                        			
                        			<li><a href="./download.php#translation">Translations</a></li>

                        			<li><a href="./download.php#installation">Installation</a></li>
                        			
                        		</ul>
                        	</div>
                        </div>
                    </li>
                    <li class="mainpage">
                        <a href="./mainpage.php" title="Mainpage"><span></span>Mainpage</a>
                        <span id="snNtfNotify" style="position:relative;display:block;width:20px;height:20px;margin-top:-30px;margin-right:10px;display:none">

                            <a href="" style="display:inline-block;height:20px;"></a>
                        </span>

                    </li>
                    <li class="home">
                        <a href="./" title="Home"><span></span>Home</a>
                    </li>
                </ul>
            </div>

            <span class="corners-bottom"><span></span></span>
        </div>
    </div>

E questo dovrebbe essere la parte relativa alla costruzione del menù.
Per i css, bisogna guardare quali sono.
Vedo per la classe login questo:

Codice: Seleziona tutto

/* Quick-login on index page */
fieldset.quick-login {
	margin-top: 5px;
}

fieldset.quick-login input {
	width: auto;
}

fieldset.quick-login input.inputbox {
	width: 15%;
	vertical-align: middle;
	margin-right: 5px;
	background-color: #f3f3f3;
}

fieldset.quick-login label {
	white-space: nowrap;
	padding-right: 2px;
}

Per la classe menù over box questo:

Codice: Seleziona tutto

.menu_hover_box {
  border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
	background: #0C77AE none repeat 0 0;
	padding: 4px;
	margin: 0;
	position: relative;
	text-align: left;
  margin-top: 0px;
  margin-left: -135px;
	z-index: 999;
	color: #666666;
	display: none;
	overflow: hidden;
}

.menu_hover_box form, .menu_hover_box > div {
  background-color: #fff;
  padding: 2px 4px;
  width: 187px;
  display: block;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.headerbar .menu_hover_box > div {
  color: #1f1f1f;
  white-space: auto;
  padding: 0;
}

.menu_hover_box a {
	height: auto !important;
	padding: 0 !important;
	text-shadow: none !important;
	width: auto !important;
	font-size: 10px !important;
	display: inline !important;
	font-weight: normal !important;
	font-size: 10px;
	color: #000 !important;
	background: none !important;
}

.menu_hover_box a:link, .menu_hover_box a:visited {
	color: #1F1F1F;
}

.menu_hover_box a:hover {
	color: #E66300 !important;
	background: none !important;
	text-decoration: underline !important;
}

.menu_hover_box p {
	margin: 0;
	color: #666666;
}

.menu_hover_box p.links {
	text-align: center;
	margin-top:5px;
}

.menu_hover_box label {
	color: #666666;
	padding-bottom: 2px;
}

.menu_hover_box input.inputbox {
  -moz-border-radius: 4px 4px 4px 4px;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  display: block;
  margin: 3px 0 8px 0;
  padding: 4px;
  width: 175px;
  font-size: 12px;
}

.menu_hover_box .button_submit {
  -moz-border-radius: 4px 4px 4px 4px;
  background-color: #E66300;
  border: 1px solid #833901;
  color: #FFFFFF;
  font-weight: bold;
  margin: 0 5px 0 0;
  padding: 2px 5px 3px 4px;
  text-shadow: 0 -1px 0 #833901;
  overflow: visible;
  width: auto;
}

Per la classe principale che racchiude tutto (classe navi), questo:

Codice: Seleziona tutto

.navi li a span {
  display: block;
  line-height: 63px;
  height: 63px;
  width: 68px;
  background: transparent none no-repeat 50% 50%;
}

.navi li.login a span {
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/key.png");
}

.navi li.logout a span {
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/shut_down.png");
}

.navi li.search a span {
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/search.png");
}

.navi li.custom a span {
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/puzzle.png");
}
.navi li.download a span {
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/download.png");
}

.navi li.bugs a span {
/*    background-image: url("./styles/prosilver.sn/theme/images/socialnet/report.png");*/
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/Bugs.png");
}

.navi li.docs a span {
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/full_page.png");
}
.navi li.forum a span {
/*  background-image: url("./styles/prosilver.sn/theme/images/socialnet/chalk_board.png");*/
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/help_balloon.png");
}

.navi li.home a span {
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/home.png");
}
.navi li.mainpage a span {
  background-image: url("./styles/prosilver.sn/theme/images/socialnet/news.png");
}

Per quella download:

Codice: Seleziona tutto

/*
* Download page
*/
#download {
  margin: 15px 0;
}
 
#download .tab-content {
  clear: both;
  padding: 5px 10px 10px 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 1px solid #BBBBBB;
}

#download .tab-content a {
  text-decoration: underline;
}

#download h2 {
  margin: 0 0 7px 0;
  padding: 0;
  font-weight: bold;
  color: #0077B4;
  font-size: 3em;
}

#download h4 {
  margin: 0 0 3px 0;
  padding: 0;
  font-weight: bold;
  color: #E66300;
  font-size: 1.4em;
}

#download p {
  font-size: 1.2em;
  margin: 0 0 20px 5px;
}

#download .tab-content .download_button {
  font-size: 15px;
  overflow: hidden;
  display: inline-block;
  padding: 0 20px;
  line-height: 3em;
  text-decoration: none;
  height: 3em;
  white-space: nowrap;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: url('./styles/prosilver.sn/theme/images/light_stripes.png') repeat-x scroll 0 0 #0077B4;
  border: 1px solid #005A84;
  color: #FFFFFF;
  font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
  font-weight: bold;
  cursor: pointer; 
  vertical-align: middle; 
  margin-bottom: 3px;
  text-shadow: #202020 2px 2px 2px;
  box-shadow: #707070 2px 2px 2px;
  -moz-box-shadow: #707070 2px 2px 2px;
  -webkit-box-shadow: #707070 2px 2px 2px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#202020')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#202020');
}

#download .tab-content .download_button span {
  text-shadow: #202020 2px 2px 2px;
  line-height: 3em;
  height: 3em;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#202020')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#202020');
}

#download .tab-content .download_button:hover {
  cursor: pointer; 
  margin-top: 1px;
  box-shadow: #707070 1px 1px 1px;
  -moz-box-shadow: #707070 1px 1px 1px;
  -webkit-box-shadow: #707070 1px 1px 1px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#202020')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#202020');
}


#download ul.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#download ul.list li {
  margin: 0 0 0 3px;
  padding: 3px 0;
  font-size: 1.2em;
}

#download ul.list li a {
  font-weight: bold;
}

#download .sn_language {
  float:left;
  padding-right: 30px;
  margin: 10px 0;
  width: auto;
}

#download .sn_language img {
  float:left;
  margin-top: -5px;
  padding-right: 3px;
}

#download .sn_language ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}

#download .sn_language li {
  color: #000;
  font-size:12px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

#download .sn_language li.sn_nat{
  color: #333;
  font-size: 9px;
  font-weight: normal;
  padding-top: 3px;
}

non dovrebbe esserci altro, o almeno, dovrei controllare bene, ma siccome devo preparare le valige per partire non posso incollarmi i codici per vedere quali rimangono ^^

Potresti però farti dei tentavi con questi css magari su dreamviewer, o aspettare che qualcuno più bravo di me vi aiuti ^^

[lenders]

Risolto con il menu,grazie a Rey

[artikkk]

Come?

[Blues]

Già Come?
Chi risolve tiene per se?