Προς το περιεχόμενο

Ερώτιση για κώδικα.


evoracing

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

Καλησπέρα... Να πω αρχικά ότι δεν έχω ιδέα από προγραμματισμό, Web Design και τα σχετικά.

 

Κάνω κάτι πειράματα για να ανοίξω ένα blog και βρήκα ένα κώδικα στο οποίο στο menu bar όταν πας πάνω το ποντίκι βγαίνει menu με επιλογές από κάτω.

hls6.png

 

Αυτό που θέλω να μου πείτε αν στο παρακάτω κώδικα υπάρχει κάποιο πρόβλημα και πχ στο CSS δεξιά έχει αυτή την γραμμή. Μετά πως μπορώ να αλλάξω το χρώμα στο κουτάκι που όταν πας το ποντίκι πάνω είναι άσπρο να γίνετε πχ μαύρο.

 

 

<style>
/*------ CSS3 Drop Down Menu By MBT (www.mybloggertricks.com)---------*/

#mbt-menu, #mbt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#mbt-menu {
overflow:visible;
width: 1050px;
margin: 60px auto;
border: 0px solid #444444;
background-color: #444444;
background-image: -moz-linear-gradient(#444444, #444444);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#444444));
background-image: -webkit-linear-gradient(#444444, #444444);
background-image: -o-linear-gradient(#444444, #444444);
background-image: -ms-linear-gradient(#444444, #444444);
background-image: linear-gradient(#444444, #444444);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}

#mbt-menu:before,

#mbt-menu:after {
content: "";
display: table;
}

#mbt-menu:after {
clear: both;
}

#mbt-menu {
zoom:1;
}

#mbt-menu li {
float: left;
border-right: 0px solid #444444;
-moz-box-shadow: 0px 0 0 #444444;
-webkit-box-shadow: 0px 0 0 #444444;
box-shadow: 0px 0 0 #444444;
position: relative;
}

#mbt-menu a {
float: left;
padding: 12px 30px;
color: #ffffff;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #444444;
}

#mbt-menu li:hover > a {
color: #ee9696;
}

*html #mbt-menu li a:hover { /* IE6 only */
color: #ee9696;
}

#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 39px;
left: 0;
z-index: 9999;
background: #444444;
background: -moz-linear-gradient(#444444, #444444);
background: -webkit-gradient(linear,left bottom,left top,color-stop(#444444, #444444),color-stop(#444444, #444444));
background: -webkit-linear-gradient(#444444, #444444);
background: -o-linear-gradient(#444444, #444444);
background: -ms-linear-gradient(#444444, #444444);
background: linear-gradient(#444444, #444444);
-moz-box-shadow: 0 -0px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -0px 0 rgba(255,255,255,.3);
box-shadow: 0 -0px 0 rgba(255,255,255,.3);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -0px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -0px 0 0 rgba(255,255,255,.3);
box-shadow: -0px 0 0 rgba(255,255,255,.3);
}

#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 0px 0 #444444, 0 0px 0 #444444;
-webkit-box-shadow: 0 0px 0 #444444, 0 0px 0 #444444;
box-shadow: 0 0px 0 #444444, 0 0px 0 #444444;
}

#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#mbt-menu ul a {
padding: 10px;
width: 120px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#mbt-menu ul a:hover {
background-color: #444444;
background-image: -moz-linear-gradient(#444444, #444444);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#444444));
background-image: -webkit-linear-gradient(#444444, #444444);
background-image: -o-linear-gradient(#444444, #444444);
background-image: -ms-linear-gradient(#444444, #444444);
background-image: linear-gradient(#444444, #444444);
}

#mbt-menu ul li:first-child > a {
-moz-border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0;
}

#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
}

#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
border-right: 3px solid transparent;
}

#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: transparent;
}

#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: transparent;
border-bottom-color: transparent;
}

#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>

<ul id="mbt-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Work</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>

 

 

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Αυτό που θέλω να μου πείτε αν στο παρακάτω κώδικα υπάρχει κάποιο πρόβλημα και πχ στο CSS δεξιά έχει αυτή την γραμμή. Μετά πως μπορώ να αλλάξω το χρώμα στο κουτάκι που όταν πας το ποντίκι πάνω είναι άσπρο να γίνετε πχ μαύρο.

Όπως είναι ο κώδικας αν τον τρέξεις(αποθήκευση σε αρχείο κειμένου με κατάληξη html και άνοιγμα με chrome),ούτε γραμμές έχει στα δεξιά ούτε βγάζει άσπρο όταν πας από πάνω με το ποντίκι....

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Βαριέμαι να διαβάσω όλο το css.

Tα πράγματα είναι απλά.

 

Έστω πως έχεις το menu.

 
<ul id="menu">
    <li><a href="#" >HOME</a></li>
    <li><a href="#" >CATEGORIES</a>
 
        <ul class="level-1" >
          <li><a href='#'>CSS</a></li>
          <li><a href='#'>Graphic Deisgn</a></li>
          <li><a href='#'>Web Deisgn</a></li>
          </ul>
   </li>
    <li><a href="#" >WORK</a></li>
    <li><a href="#" >ABOUT</a></li>
    <li><a href="#" >CONTACT</a></li>
</ul>       
 
    
 
Στο css ::
#menu >li{position:relative;}
ul.level-1{display:none; position:absolute;}
 
Kαι σε jquery::
 
 
$(document).ready(function(){
 
$('#menu > li').hover(
function(){
$(this).find('ul.level-1').show();},
function(){
$(this).find('ul.level-1').hide();
}
)
 
Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

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

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

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

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...