Forum Debian Users Gang

tajwan · 2013-03-15 18:13:27

zrobiłem sobie to menu ale mam mały problem nie umie w kodzie znaleźć formułę odpowiadającą za kolor rogów w menu

Kod:

    /* Rounded corners for the first link of the menu/submenus */
        #cssmenu > ul li:first-child>a {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-top: 0;
        }

        /* Rounded corners for the last link of the menu/submenus */
        #cssmenu > ul li:last-child>a {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-bottom: 0;
        }

to są te rogi ale nie wiem gdzie jest kolor

azhag · 2013-03-15 18:22:04

dodaj

Kod:

border: 1px solid #333;

tajwan · 2013-03-15 18:26:59

gdzie ? w którym miejscu chyba nie oto mi chodziło

Ostatnio edytowany przez tajwan (2013-03-15 18:28:19)

azhag · 2013-03-15 18:31:21

Wewnątrz klamry, obok innych border-*. Chyba. :)

tajwan · 2013-03-15 18:50:01

a wielość menu gdzie znajde

Kod:

<body>

<h2>Your Menu</h2>

<style type="text/css">/* Some stylesheet reset */
#cssmenu > ul{
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}

/* The container */
#cssmenu > ul {
    display: block;
    position: relative;
    width: 15px;
}

    /* The list elements which contain the links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 15px;    
    }

        /* General link styling */
        #cssmenu > ul li a {
            /* Layout */
            display: block;
            position: relative;
            margin: 0;
            border-top: 1px dotted pink;
            border-bottom: 1px dotted pink;
            padding: 11px 20px;
            width: 110px;

            /* Typography */
            font-family:  Helvetica, Arial, sans-serif;
            color: pink;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 1px 0 pink;
            font-size: 13px;
            font-weight: 300;

            /* Background & effects */
            background: pink;
        }

        /* Rounded corners for the first link of the menu/submenus */
        #cssmenu > ul li:first-child>a {

            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-top: 0;
        }

        /* Rounded corners for the last link of the menu/submenus */
        #cssmenu > ul li:last-child>a {

            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-bottom: 0;
        }


        /* The hover state of the menu/submenu links */
        #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
            color: ;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
            background: pink;
            background: -webkit-linear-gradient(bottom, pink, pink);
            background: -ms-linear-gradient(bottom, pink, pink); 
            background: -moz-linear-gradient(bottom, pink, pink);
            background: -o-linear-gradient(bottom, pink, pink);
            border-ctransparent: pink;
        }

        /* The arrow indicating a submenu */
        #cssmenu > ul .has-sub>a:pink:after {
            content: '';
            position: absolute;
            top: 16px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid pink; 
        }

        /* The same arrow, but with a darker color, to create the shadow effect */
        #cssmenu > ul .has-sub>a::before {
            content: '';
            position: absolute;
            top: 17px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid pink;
        }

        /* Changing the color of the arrow on hover */
        #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
            border-left: 4px solid pink;
        }

        #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
            border-left: 4px solid rgba(0, 0, 0, .25);
        }

    
        /* THE SUBMENUS */
        #cssmenu > ul ul {
            position: absolute;
            left: 150px;
            top: -9999px;
            padding-left: 5px;
            opacity: 0;
            /* The fade effect, created using an opacity transition */
            -webkit-transition: opacity .3s ease-in;
            -moz-transition: opacity .3s ease-in;
            -o-transition: opacity .3s ease-in;
            -ms-transition: opacity .3s ease-in;
        }

        /* Showing the submenu when the user is hovering the parent link */
        #cssmenu > ul li:hover>ul {
            top: 0px;
            opacity: 1;
        }</style>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>

<h2>Installation Instructions</h2>

<ol>
   <li>Upload the <code>menu_assets</code> folder to the root directory of your website. This is usually where your 

<code>index.html</code> file is.</li>
   <li>Copy and paste the code below somewhere between the <code>&lt;head>&lt;/head></code> tags.<textarea 

class='css'><link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"></textarea></li>
   <li>Copy and paste the html below where ever you want your menu to show up.<textarea class='html'><div 

id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div></textarea></li>
</ol>



</body>
</html>

wszystko różowe a rogi białe i jest to ładne takie półokrągłe a ja potrzebuje inny kolor niż biały

COŚ O TO a CHODZI ALE NIE WIEM CO

Ostatnio edytowany przez tajwan (2013-03-15 18:58:43)

pink · 2013-03-15 19:35:54

Kod:

<html>
<body>

<h2>Your Menu</h2>

<style type="text/css">/* Some stylesheet reset */
#cssmenu > ul{
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}

/* The container */
#cssmenu > ul {
    display: block;
    position: relative;
    width: 15px;
}

    /* The list elements which contain the links */
    #cssmenu > ul li {
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 15px;    
    }

        /* General link styling */
        #cssmenu > ul li a {
            /* Layout */
            display: block;
            position: relative;
            margin: 0;
            border-top: 1px dashed black;
            padding: 11px 20px;
            width: 110px;

            /* Typography */
            font-family:  Helvetica, Arial, sans-serif;
            color: pink;
            text-decoration: none;
            text-transform: uppercase;
            text-shadow: 0 1px 0 grey;
            font-size: 13px;
            font-weight: 300;

            /* Background & effects */
            background: pink;
        }

        /* Rounded corners for the first link of the menu/submenus */
        #cssmenu > ul li:first-child>a {

            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-top: 0;
        }

        /* Rounded corners for the last link of the menu/submenus */
        #cssmenu > ul li:last-child>a {

            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom: 0;
        }


        /* The hover state of the menu/submenu links */
        #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
            color: grey;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
            background: whitesmoke;
          
        }

        /* The arrow indicating a submenu */
        #cssmenu > ul .has-sub>a:pink:after {
            content: '';
            position: absolute;
            top: 16px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid pink; 
        }

        /* The same arrow, but with a darker color, to create the shadow effect */
        #cssmenu > ul .has-sub>a::before {
            content: '';
            position: absolute;
            top: 17px;
            right: 10px;
            width: 0px;
            height: 0px;

            /* Creating the arrow using borders */
            border: 4px solid transparent;
            border-left: 4px solid pink;
        }

        /* Changing the color of the arrow on hover */
        #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
            border-left: 4px solid pink;
        }

        #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
            border-left: 4px solid rgba(0, 0, 0, .25);
        }

    
        /* THE SUBMENUS */
        #cssmenu > ul ul {
            position: absolute;
            left: 150px;
            top: -9999px;
            padding-left: 5px;
            opacity: 0;
            /* The fade effect, created using an opacity transition */
            -webkit-transition: opacity .3s ease-in;
            -moz-transition: opacity .3s ease-in;
            -o-transition: opacity .3s ease-in;
            -ms-transition: opacity .3s ease-in;
        }

        /* Showing the submenu when the user is hovering the parent link */
        #cssmenu > ul li:hover>ul {
            top: 0px;
            opacity: 1;
        }</style>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>




</body>
</html>

zbajerowane.

Ostatnio edytowany przez pink (2013-03-15 19:38:46)

tajwan · 2013-03-15 20:34:11

??

Kod:

http://cssmenumaker.com/builder/415208

tu masz oryginalny plik

Ostatnio edytowany przez tajwan (2013-03-15 20:35:29)

pink · 2013-03-15 20:37:24

border-radius to sa te biale rogi

skopiuj sobie ten kod wyzej i bedziesz mial samo sprite menu - tak jak chcesz (mniej wiecej).

tajwan · 2013-03-15 22:00:52

Dobra sprawa już jest prawie rozwiązana wszystko już zrobiłem tak jak chciałem więc pytania są już NIEWAŻNE.

Jedynie co bym teraz chciał zrobić to zmienić szerokość pod menu to co się wysuwa, ale z tego co ja widzę to pod menu jest ustawione na automatyczną szerokość (tak samo szerokie jakie jest główne menu z pozycjami). Może się mylę nie wiem nie znam się.

Ostatnio edytowany przez tajwan (2013-03-16 03:15:03)

Forum Debian Users Gang

Ogłoszenie

#26 2013-03-15 18:13:27

tajwan - mega boss

Re: Podstrony na www

Kod:

#27 2013-03-15 18:22:04

azhag - Admin łajza

Re: Podstrony na www

Kod:

#28 2013-03-15 18:26:59

tajwan - mega boss

Re: Podstrony na www

#29 2013-03-15 18:31:21

azhag - Admin łajza

Re: Podstrony na www

#30 2013-03-15 18:50:01

tajwan - mega boss

Re: Podstrony na www

Kod:

#31 2013-03-15 19:35:54

pink - Użytkownik

Re: Podstrony na www

Kod:

#32 2013-03-15 20:34:11

tajwan - mega boss

Re: Podstrony na www

Kod:

#33 2013-03-15 20:37:24

pink - Użytkownik

Re: Podstrony na www

#34 2013-03-15 22:00:52

tajwan - mega boss

Re: Podstrony na www

Stopka forum