בלוג

מה כאן עושה "ת'חוויה"? – הדרכה מחליקה

בדיוק עברתי על תוכנה אינטרנטית ללקוח

הוספתי כמה הנפשות

קלילות ולא מורגשות.

לא מורגשות,

נכון

אבל הן אלה שמפקססות את החוויה.

 

תפריט שכיף לעבוד איתו

תגובת אלמנטים לעכבר – תודי שווה לזוז שם

הופעה/העלמות נעימה של פופאפ

תפריט צד ש"מחליק" באלגנטיות

כשכל התוכן מחליק בעקבותיו, בהתאם.

איכשהו דווקא התפריט צד

תפס אותי

כמשהו שיהיה שימושי גם לך

והחלטתי

להוציא על זה הדרכה 😊

על הקטע הזה שכל התוכן שבאתר

מחליק לפי התפריט

ולא, כמו שאני רואה באתרים אחרים –

שהתוכן מוסתר כל פעם כשהתפריט נפתח.

אז קבלי את ההדרכה המלאה:

לפני הכל, חשוב לי לציין:

ההדרכה כאן מפורטת על אלמנטור. אבל למעשה מדובר כאן בקוד CSS + קוד JAVASCRIPT שמתאים לשימוש בכל אתר.

קדימה…

הוסיפי לדף איזור עם 2 עמודות: עמודה ימנית צרה, ועמודה שמאלית רחבה.

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

הגדירי את האיזור הזה ככה שהוא יתפוס רוחב מלא של הדף.

העמודה הימנית – היא תהיה התפריט הצידי ה"מחליק", והעמודה הימנית היא תהיה הדף בעצמו.

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

הגדירי שם ב"מתקדם" -> "CSS מותאם" את הקוד הבא:

				
					selector {
    width: 225px!important
    ;
    -moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;
	right: -225px;
	position: fixed;
}

.menu-active selector {
  right: 0px;
}

אחר כך עמדי באלמנטור על העמודה השמאלית,

הכנסי גם שם ל"מתקדם" -> "CSS מותאם"

והגדירי שם את הקוד CSS הבא:

				
					selector {
    width: 100VW!important;
	right: 0;
	position: relative;
	width: 100VW;
	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	transition: all 300ms;
}
.menu-active selector {
	right: 225px;
	width: calc(100VW - 251px)!important;
}

עכשיו,

מקמי ועצבי איפשהו בעמודה השמאלית (הדף עצמו) כפתור, שתפקידו יהיה לפתוח ולסגור את התפריט.

בכפתור הכנסי ל"מתקדם" -> "CSS ID" ומלאי שם את הערך "toggle-menu".

מתחתיו הוסיפי אלמנט מסוג HTML

ושימי בו את הקוד הבא:

				
					<script>
    jQuery('#toggle-menu').click(function() {
        jQuery('body').toggleClass('menu-active');
    })
</script>

זהו!

שלחי אלי את התוצאה 🙂



המקומות בקורס תכנות לוורדפרס

נתפסים במרץ, ב"ה.


את מרגישה שיש בך נכונות

להשקיע ולהתאמץ

כדי לקפוץ כמה רמות קדימה?

מזמינה אותך לשתף אותי במייל office@appupgo.co.il.

כל הפרטים כל קורס תכנות לוורדפרס – כאן.


כל כך הרבה בנות

לא יכולות לקבל עבודות ריווחיות

ומדשדשות בעבודות עם תמורה לא מספקת.


כל כך הרבה בנות

רוצות לפתח תוצרים ללקוחות

וגם הלקוחות, מחפשים אותן!

בעזרת ה', בסיתא דשמיא

הדרך שלהן תעבור כאן


לבקשת בנות

אני מצרפת כאן כמה צילומי מסך

מפרוייקטים וואו שפיתחנו על וורדפרס

מחכה לך

בקבוצת האלופות,

רבקי

 

 

נ.ב.

כמה את רוצה להצטרף לקבוצה מ 1-10?

למה לא פחות?

כתבי לי.

 

 

 

כששאלו את ויין גרצקי, 

שחקן ההוקי קרח הטוב ביותר בכל הזמנים, 

מה סוד הצטיינותו, 

הוא ענה: 

'השחקנים האחרים רצים למקום שבו הכדור נמצא, 

אני רץ למקום שבו 

הכדור יהיה'

כתיבת תגובה

אולי תאהבי גם:

מתי לנטוע ת'עץ?

קבלי שאלה שנשאלתי הרבה בימים האחרונים בכמה וריאציות. בגלל שהיא כל כך קריטית וחזרה על עצמה שוב ושוב החלטתי לשים אותה על השולחן 🙂

קראי עוד

אמאלה מה רואים כאן!

זוכרת שפעם פעם הייתה לנו קורונה? רעדנו ללכת בלי מסכה כוללללם הזיעו בחוץ בתור ל"אושר עד" והתור לאיקאה בכלל היה חוויה חברתית...

קראי עוד

אמאלה, מי אמר שאפשר בכלל לבצע את זה??

זה קורה לפעמים, קורה לכולנו. לקוח בא ומבקש X Y Z אמאלה, מי אמר שאפשר בכלל לבצע את זה?? הוא רציני, רוצה לשלם. את גם רצינית. את רוצה להיות מאסטרית לעבוד עם הלקוחות הכבדים אלה שמשלמים

קראי עוד