עבור לתוכן
  • צור חשבון
  • מי אנחנו?

    שלום אורח/ת!

     
    שים לב - על מנת להשתתף בקהילה שלנו, להגיב ולפתוח דיונים חדשים, עליך להצטרף כחבר רשום.

    החברים שלנו נהנים מיתרונות רבים, כולל היכולת להשתתף בדיונים, להנות מהגרלות ומבצעים לחברי האתר, ולקבל מידי שבוע את התכנים הבולטים שלנו ישירות במייל.

    לא אוהבים שמציקים לכם במייל? ניתן להירשם לאתר אך לוותר על הרישום לעידכוני המייל השבועיים.

shrerr

העברת אלמנט ניווט לצד הימני

Recommended Posts

ניסיתי כל מיני פקודות וכן הלאה 

אבל אני לא מצליח להעביר את סרגל הניווט לצד ימין 

זה כברירת המחדל נמצא בצד שמאל למעלה (ועובד כפי שאמור) ואינני מצליח 

הקוד :

 

 

<!DOCTYPE html>
<html lang="heb">
<head >
    <meta charset="UTF-8">
    <title>diagonal shaped nav</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js">
    </script>
    <style type="text/css">
       body {
      direction: rtl;
    }
    
    html,body{ 
            direction: rtl;
            height:  100%;
            }
            
            *{
                direction: rtl;
                box-sizing: border-box;
                margin: 0;
                padding: 0;                
                }
            
            
                body{
                    direction: rtl;
                    font-family: tahoma;
                    line-height: 1.7;
                    perspective-origin: 0% 50%;
                    perspective: 800px;
                    background: #21212d;
                    
                    
                }
                
                
                nav,main{
                    
                    direction: rtl;
                    transition: transform 150ms ease-out;
                        }
                
                nav{
                    direction: rtl;
                    z-index: 100;
                    position: absolute;
                    top: 0;
                    left: 0;
                     bottom: 0;
                    width: 16em;
                    background-color: #353441;
                    transform: translateX(-16em);
        }
        
         nav.menu-active{
                direction: rtl;
                    transform: translateX(0);
                    
                }
                
                nav.menu-hover{
                    direction: rtl;
                    transform: translateX(-15em);
                }
                
                nav h1{
                direction: rtl;
                z-index: 100;
                display: block;
                position: absolute;
                top: 0;
                right: -65px;
                height: 60px;
                width: 65px;
                line-height: 60px;
                font-size: 0.8em;
                font-weight: 300;
                letter-spacing: 1px;
                color: white;
                text-transform: uppercase;
                text-align: center;
                background-color: #353441;
                cursor: pointer;
                                
                }
                
                nav h1:hover{
                    direction: rtl;
                    color: #353441;
                    background: white;
                }
                
                nav ul{
                    direction: rtl;
                    margin: 0;
                    padding: 0;                
                }
                
                nav li{
                    direction: rtl;
                    display: inline-block;
                    padding: 0 1em;
                    width: 100%;
                    height: 60px;
                    color: #9dc6d1;
                    line-height: 60px;
                    background-color: #353441;
                    transition: all 0.5s ease-in;
                }               
                
            nav li:nth-of-type(2n){
                direction: rtl;
                background-color: #3a3947;
                    }
                
        
            nav li:hover{
                
                background: orangered;
                color: white;
            }
        
        
        main{
            z-index: 0;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: flex;
            align-items: center;
            overflow: hidden;
            background-image: url(hd-wallpapers-computer-1.jpg);
            transform-origin: 0% 50%;
            background-size: cover;
                        }
        
                
       
        main:after{
            content: '';
            display: block;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(to right,
            transparent, rgba(33,33,45,.5));
            visibility: hidden;
            opacity: 0;
            transition: opacity 150ms ease-out, 
            visibility 0s 150ms;                        
            }   
            
        main.menu-active{
            border-radius: 0.001px;
            transform: translateX(16em) rotateY(15deg);
        }    
        
        main.menu-active:after{
            visibility: visible;
            opacity: 1;
            transition: opacity 150ms ease-out, 
            visibility 0s;            
        }
                
                
        main.menu-hover{
            border-radius: 0.001px;
            transform: translateX(1em) rotateY(1deg);
                    }
        
        
        main section{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 1em 4em;
            max-width: 680px;
            overflow: auto;
            background-color: rgba(255,255,255,.5);             
            }
        
        section h1{
            font-weight: 800;
            text-transform: uppercase;
            font-size: 2em;
                    }
        section p{
            display: inline-block;
            margin: 16px 0;
            
        }
        
        
    </style>
    </head >
    <body dir="rtl">

    <nav dir="rtl" class="menu-activea">
        <h1>ניווט</h1>
        <ul>
            <li>דף ראשי</li>
            <li>חנות</li>
            <li>עגלת קניות</li>
            <li>יצירת קשר</li>
            <li>החשבון שלי</li>
            <li>הרימו טלפון</li>
            <li>HOME</li>
            <li>HOME</li>
            <li>HOME</li>
        </ul>

    </nav>
    <main dir="rtl">
            <section>
                <br><br><br>
                <h1>&larr; DIAGONAL SHAPED NAV</h1>
                <br>
                <p>
                    dhdghghjdghdhdfhdfhd
                    dfhgdfhdfhhdfhd
                </p>            
            </section>
    
        </main>
        
    <script dir="rtl">
       
        (function(){
            var nav = $('nav'),
                menu = $('nav h1'),
                main = $('main'),
                open = false, 
                hover = false;
            
            
          menu.on('click', function(){
              open = !open ? true : false;
              nav.toggleClass('menu-active');
              main.toggleClass('menu-active');
              nav.removeClass('menu-hover');
              main.removeClass('menu-hover');
              console.log(open);
              
          });
            
        menu.hover(
        function(){
          if (!open){
                nav.addClass('menu-hover');
                main.addClass('menu-hover'); 
            }         
        }, function(){
            nav.removeClass('menu-hover');
            main.removeClass('menu-hover');            
        }
            
        );
            
    })();            
        
    </script>        
    </body>
    </html>

שתף דיון


קישור ישיר להודעה
שתף באתרים אחרים

הגדרת ל-nav מיקום left: 0 כלומר הוא צמוד לשמאל, תשנה את זה אם אתה רוצה שהוא יהיה מימין.

 

שתף דיון


קישור ישיר להודעה
שתף באתרים אחרים

ברור שאם אתה מנסה להמיר את כל המערכת מימין לשמאל תצטרך לשנות הרבה יותר מזה בשביל שהיא תעבוד טוב ובשלבי הביניים עד שתפתור את כל הבעיות יש לצפות שהיא תהיה קצת שבורה.

 

תתחיל מלהחליף את כל המקומות שכתוב בהם left ל-right ולהפך, אחר כך תצטרך לראות אם יש עוד תיקונים של מיקום לא נכון ובסוף תטפל בכל כיווני האנימציות.  

שתף דיון


קישור ישיר להודעה
שתף באתרים אחרים

הצטרפ/י לדיון

בשלב זה תוכל/י להצטרף לדיון, ולאחר מכן להצטרף לקהילה שלנו. אם כבר יש לך חשבון אצלנו, אנא התחבר/י עכשיו על מנת להגיב תחת שם המשתמש שלך.
לתשומת לבך: התגובה תופיע לגולשים לאחר אישור של צוות הנהלת הפורומים.

אורח
הוסף תגובה

×   התוכן שהודבק הוא עם עיצוב.   הסר עיצוב

  Only 75 emoji are allowed.

×   הקישור שלך הוטמע אוטומטית.   הצג כקישור רגיל

×   התוכן הקודם שלך שוחזר אוטומטית.   נקה הכל

×   You cannot paste images directly. Upload or insert images from URL.


×
  • צור חדש...
Back to top button
Close
Close