القائمه شكلها عامودي اريدها افقي ممكن احد يعدلي على الكود ومشكور منكم واريد ايضا تكرار الازرار جعلها 8 اذا امكن مع الشكر

الكود للازرار

الكود:


<nav class="container">
    <ul>
      <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Work</a></li>
      <li class="nav-item"><a href="#" class="nav-link">About</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
    </ul>
  </nav>

كود كي اس اس

الكود:


    .container {
      margin: 100px auto;
      width: 500px;
      text-align: center;
    }

    .nav-item {
      padding: 3px;
      background: rgba(0, 0, 0, 0.01);
      border-radius: 4px;
      display: inline-block;
      vertical-align: baseline;
      zoom: 1;
      *display: inline;
      *vertical-align: auto;
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15);
    }

    .nav-link {
      display: block;
      line-height: 27px;
      width: 100px;
      font-size: 12px;
      color: white;
      text-decoration: none;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      background: #7e929b;
      border: 1px solid;
      border-color: #c2ccd1 #9cacb2 #91a2aa;
      border-color: #c2ccd1 rgba(255, 255, 255, 0.1) #91a2aa;
      border-radius: 3px;
      background-image: -webkit-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: -moz-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: -o-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: linear-gradient(to bottom, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
    }

    .nav-link:hover {
      background: #a8bdc7;
      border-color: #e3eaed #d3dee3 #cedadf;
      background-image: -webkit-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: -moz-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: -o-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: linear-gradient(to bottom, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
    }

    .nav-link:active {
      padding: 1px;
      background: #8c9da5;
      border: 0;
      background-image: -webkit-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: -moz-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: -o-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: linear-gradient(to bottom, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
    }


مرحبآ, بما أنك تطلب تعديل على كود وليس استفسار فالمرجوا منك وضع موضوعك بالمرة القادمه بالقسم المناسب وهو:

دعم مشاكل التومبلايت و الأكواد

وسيتم الرد عليك من قبل أشراف مُختص بذلك

شكرا لك اخي الكريم بالانتظار

بمناسبة الازرار
ثمانية
تفضل الكود

الكود:

<nav class="container">
    <ul>
      <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Work</a></li>
      <li class="nav-item"><a href="#" class="nav-link">About</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
     <li class="nav-item"><a href="#" class="nav-link">اسم الصفحة</a></li>
     <li class="nav-item"><a href="#" class="nav-link">اسم الصفحة</a></li>
     <li class="nav-item"><a href="#" class="nav-link">اسم الصفحة</a></li>
     <li class="nav-item"><a href="#" class="nav-link">اسم الصفحة</a></li>
    </ul>
  </nav>

او بلانجليزي
تفضل الكود

الكود:

<nav class="container">
    <ul>
      <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Work</a></li>
      <li class="nav-item"><a href="#" class="nav-link">About</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
     <li class="nav-item"><a href="#" class="nav-link">page name</a></li>
     <li class="nav-item"><a href="#" class="nav-link">page name</a></li>
     <li class="nav-item"><a href="#" class="nav-link">page name</a></li>
     <li class="nav-item"><a href="#" class="nav-link">page name</a></li>
    </ul>
  </nav>

مشكور اخي شاعر زمانه

لاكن الازرار بقت بصوره عموديه

وانا اريدها افقيه ادامكم الله
بالانتظار مزيد من الاعضاء لمساعدتي
شكرا للجميع

تم تفضلي فقط التغير على سي اس اس

الكود:

 
    .container {
      margin: 100px auto;
      width: 200px;
      text-align: center;
    }
 
    .nav-item {
      padding: 3px;
      background: rgba(0, 0, 0, 0.01);
      border-radius: 4px;
      display: inline-block;
      vertical-align: baseline;
      zoom: 1;
      *display: inline;
      *vertical-align: auto;
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15);
    }
 
    .nav-link {
      display: block;
      line-height: 27px;
      width: 100px;
      font-size: 12px;
      color: white;
      text-decoration: none;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      background: #7e929b;
      border: 1px solid;
      border-color: #c2ccd1 #9cacb2 #91a2aa;
      border-color: #c2ccd1 rgba(255, 255, 255, 0.1) #91a2aa;
      border-radius: 3px;
      background-image: -webkit-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: -moz-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: -o-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: linear-gradient(to bottom, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
    }
 
    .nav-link:hover {
      background: #a8bdc7;
      border-color: #e3eaed #d3dee3 #cedadf;
      background-image: -webkit-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: -moz-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: -o-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: linear-gradient(to bottom, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
    }
 
    .nav-link:active {
      padding: 1px;
      background: #8c9da5;
      border: 0;
      background-image: -webkit-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: -moz-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: -o-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: linear-gradient(to bottom, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
    }

اخي نيومون لم يتغير شي انظر تحت المنتدى رغم اني نزلت الكود اللي حضرتك اشرت عليه
http://3eon.0wn0.com/

الكود:

<nav class="new.moon">
    <ul>
      <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Work</a></li>
      <li class="nav-item"><a href="#" class="nav-link">About</a></li>
      <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
    </ul>
  </nav>

سي اس اس

الكود:

 
    .new.moon{
      margin: 100px auto;
      width: 100px;
      text-align: center;
    }
 
    .nav-item {
      padding: 3px;
      background: rgba(0, 0, 0, 0.01);
      border-radius: 4px;
      display: inline-block;
      vertical-align: baseline;
      zoom: 1;
      *display: inline;
      *vertical-align: auto;
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15);
    }
 
    .nav-link {
      display: block;
      line-height: 27px;
      width: 100px;
      font-size: 12px;
      color: white;
      text-decoration: none;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      background: #7e929b;
      border: 1px solid;
      border-color: #c2ccd1 #9cacb2 #91a2aa;
      border-color: #c2ccd1 rgba(255, 255, 255, 0.1) #91a2aa;
      border-radius: 3px;
      background-image: -webkit-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: -moz-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: -o-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: linear-gradient(to bottom, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
    }
 
    .nav-link:hover {
      background: #a8bdc7;
      border-color: #e3eaed #d3dee3 #cedadf;
      background-image: -webkit-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: -moz-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: -o-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: linear-gradient(to bottom, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
    }
 
    .nav-link:active {
      padding: 1px;
      background: #8c9da5;
      border: 0;
      background-image: -webkit-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: -moz-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: -o-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: linear-gradient(to bottom, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
    }

يبدو لديكي في منتدى كود اخر يقوم بالتأثير على هذه الكود سيتم معالجه الامر دقائق

تم التعديل

الكود

الكود:


<nav class="container1">    </nav>
<ul>
         
<li class="nav-item1">
 <a class="nav-link" href="#">Home</a>  
</li>
         
<li class="nav-item1">
 <a class="nav-link" href="#">Work</a>  
</li>
         
<li class="nav-item1">
 <a class="nav-link" href="#">About</a>  
</li>
         
<li class="nav-item1">
 <a class="nav-link" href="#">Contact</a>  
</li>
       
<li class="nav-item1">
 <a class="nav-link" href="#">Contact</a>  
</li>
       
<li class="nav-item1">
 <a class="nav-link" href="#">Contact</a>  
</li>
       
<li class="nav-item1">
 <a class="nav-link" href="#">Contact</a>  
</li>
       
<li class="nav-item1">
 <a class="nav-link" href="#">Contact</a>  
</li>
       
</ul><nav class="container1">  </nav>


كود سي اس اس

الكود:

 
    .container1 {
      margin: 100px auto;
      width: 100px;
      text-align: center;
    }
 
    .nav-item1 {
      padding: 3px;
      background: rgba(0, 0, 0, 0.01);
      border-radius: 4px;
      display: inline-block;
      vertical-align: baseline;
      zoom: 1;
       *vertical-align: auto;
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(255, 255, 255, 0.12));
      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px rgba(255, 255, 255, 0.15);
    }
 
    .nav-link {
      display: block;
      line-height: 27px;
      width: 100px;
      font-size: 12px;
      color: white;
      text-decoration: none;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      background: #7e929b;
      border: 1px solid;
      border-color: #c2ccd1 #9cacb2 #91a2aa;
      border-color: #c2ccd1 rgba(255, 255, 255, 0.1) #91a2aa;
      border-radius: 3px;
      background-image: -webkit-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: -moz-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: -o-linear-gradient(top, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
      background-image: linear-gradient(to bottom, #b9c6cc 0%, #8ea1aa 50%, #768b94 51%, #7c9099 75%, #7e929b 100%);
    }
 
    .nav-link:hover {
      background: #a8bdc7;
      border-color: #e3eaed #d3dee3 #cedadf;
      background-image: -webkit-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: -moz-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: -o-linear-gradient(top, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
      background-image: linear-gradient(to bottom, #cfdae0 0%, #b5c7cf 50%, #a6bac5 51%, #aec1ca 100%);
    }
 
    .nav-link:active {
      padding: 1px;
      background: #8c9da5;
      border: 0;
      background-image: -webkit-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: -moz-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: -o-linear-gradient(top, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
      background-image: linear-gradient(to bottom, #5f7681 0%, #8c9da5 45%, #9dabb1 100%);
    }

احسنتم اخوتي وبارك الله في جهودكم
لكم مني كل الشكر
يغلق الموضوع