القائمة الرئيسية

الصفحات

3D Navigation Menus


التنقل هو أهم عنصر في تصميم الويب. نظرًا لأن تخطيطات الويب لا تحتوي على أي تمثيل مادي يمكن للمستخدم الالتزام به ، فإن قائمة التنقل المتسقة هي أحد عناصر التصميم القليلة التي تزود المستخدمين ببعض الإحساس بالاتجاه وتوجههم عبر الموقع. يجب أن يكون المستخدمون قادرين على الاعتماد عليها ولهذا السبب لا ينبغي للمصممين العبث بها. UI UX 

لهذا السبب في معظم الحالات تكون الحلول البسيطة والبديهية والتقليدية هي الخيار الأفضل عادةً. ومع ذلك ، هذا لا يعني أنهم بحاجة إلى أن يكونوا مملين. منذ عام مضى ، قدمنا الأساليب الحديثة لتصميم Navigation. دعنا نلقي نظرة على ما هو مختلف الآن ، والاتجاهات التي يمكن للمرء ملاحظتها والأفكار التي يمكنك تطويرها بشكل أكبر في مشاريعك
تقدم هذه المقاله كما رأيت الفيديو تصميم حديث جدا للتنقل في الويب وهو ايضا متجاوب مع جميع اجهزه الهواتف المحمولة 
ومتناسق ايضا مع وجود الايقونات التي تعبر عن الحدث مثلا للتنقل عبر الصور او التنقل عبر انشاء شيء جديد كمثال على ذلك ويكون هذا مفيد جدا لتجربة المستخدم

تعد سهولة الاستخدام هدفًا أساسيًا لأي موقع ويب ، والتنقل القابل للاستخدام هو شيء يحتاجه كل موقع ويب. يحدد المكان الذي يتم توجيه المستخدمين إليه وكيفية تفاعلهم مع موقع الويب. بدون التنقل القابل للاستخدام ، يصبح المحتوى عديم الفائدة. يجب أن تكون القوائم بسيطة بما يكفي لكي يفهمها المستخدم ، 
يعد تصميم التنقل فنًا في حد ذاته ، ويصبح المصممون أفضل فيه من خلال الخبرة. يتعلق الأمر كله باستخدام هندسة المعلومات الجيدة: "فن التعبير عن نموذج أو مفهوم للمعلومات المستخدمة في الأنشطة التي تتطلب تفاصيل واضحة عن الأنظمة المعقدة."


الان سأقدم لك فيديو فيديو توضيحي 3D Rotating Navigation


تتناول هذه المقالة أصغر التفاصيل التي تدخل في إنشاء القطعة المركزية الرئيسية لمنتجك الرقمي - بناء عناصر التنقل. هذه هي أهم مساعدة يمكن أن تقدمها لمستخدميك لأنهم يبحثون باستمرار عن سبب للتخلي عنك.
الشيء الذي يجعل التنقل صعبًا للعمل في تصميم الويب هو أنه يمكن أن يكون متعدد الاستخدامات. يمكن أن يكون التنقل بسيطًا أو معقدًا: بضع صفحات رئيسية أو بنية متعددة المستويات ؛ مجموعة واحدة من المحتوى للمستخدمين الذين قاموا بتسجيل الدخول ومجموعة أخرى للمستخدمين الذين قاموا بتسجيل الخروج ؛ وهلم جرا. نظرًا لأن التنقل يمكن أن يختلف كثيرًا بين مواقع الويب ، فلا توجد إرشادات محددة أو إرشادات لتنظيم التنقل.
كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج (menu css ). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <container>. كما تعلم ، يتم استخدام علامة <container> بشكل كبير لإنشاء التقسيم الاول. ,وذلك من دون bootstrap ثم أنشأت <ul > باسم الفئة ".menu". بعد ذلك ، أنشأت <li> وبعد ذلك انشات "a"  ويكون لكل اب عدة ابناء بداخله وذلك تمهيد لتمرير مؤشر الماوس ليظهر الابناء مع التمرير الجميل اذا احببت قم بذلك بوضع نفس التصميم الذي قمنا به سابقا في التدوينات


لإنشاء هذا البرنامج (شريط التنقل ). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق هذه الرموز التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر.


كما يمكنك عمل نسخ لملف  HTML FILE:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="assets/css/style.css">
<title>3D Rotating Navigation | CodyHouse</title>
</head>
<body>
<header class="cd-header container flex justify-between items-center">
<a href="#0" class="cd-logo">
<svg width="124" height="23" viewBox="0 0 124 23"><title>Go to homepage</title><rect width="70" height="23" fill="#c96aa4"/><rect x="70" width="27" height="23" fill="#9a57bd"/><rect x="97" width="27" height="23" fill="#fff"/></svg>
</a>
<a href="#cd-3d-nav" class="cd-header__nav-trigger" aria-label="Toggle menu">
<span aria-hidden="true"></span>
</a>
</header>
<main class="cd-main">
<!-- all your content here -->
<div class="container max-width-xs">
<div class="text-component text-center margin-top-xxl">
<h1 class="text-xl">3D Rotating Navigation</h1>
</div>
</div>
</main>
<nav class="cd-3d-nav js-cd-3d-nav" id="cd-3d-nav">
<ul class="cd-3d-nav__list">
<li class="cd-3d-nav__item cd-3d-nav__item--selected">
<a href="#0">
<svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><path d="M12,6.6c1.2-0.5,2.6-0.8,4-0.8 c5.6,0,10.2,4.6,10.2,10.2"></path><path d="M5.8,16c0-1.4,0.3-2.8,0.8-4"></path><line x1="13.9" y1="13.9" x2="8.4" y2="8.4"></line> <circle cx="16" cy="16" r="15"></circle><circle cx="16" cy="16" r="3"></circle></svg>
<span>Dashboard</span>
</a>
</li>
<li class="cd-3d-nav__item">
<a href="#0">
<svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><polyline points=" 11,7 11,2 21,2 21,7 "></polyline> <polyline points="12,23 1,23 1,7 31,7 31,23 20,23 "></polyline> <polyline points="30,26 30,30 2,30 2,26 "></polyline><rect x="12" y="20" width="8" height="6"></rect></svg>
<span>Projects</span>
</a>
</li>
<li class="cd-3d-nav__item">
<a href="#0">
<svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><polyline points="14.858,21.142 22,14 31,22"></polyline><polyline points="1,25 10,17 18.501,24.249 "></polyline> <rect x="1" y="3" width="30" height="26"></rect><circle cx="14.5" cy="10.5" r="2.5"></circle></svg>
<span>Images</span>
</a>
</li>
<li class="cd-3d-nav__item">
<a href="#0">
<svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><rect x="2" y="2" width="28" height="28"></rect><line x1="9" y1="18" x2="9" y2="6"></line><line x1="9" y1="26" x2="9" y2="22"></line><line x1="12" y1="22" x2="6" y2="22"></line><line x1="23" y1="18" x2="23" y2="6"></line><line x1="23" y1="26" x2="23" y2="22"></line><line x1="26" y1="22" x2="20" y2="22"></line><line x1="16" y1="26" x2="16" y2="14"></line><line x1="16" y1="10" x2="16" y2="6"></line><line x1="13" y1="10" x2="19" y2="10"></line></svg>
<span>Settings</span>
</a>
</li>
<li class="cd-3d-nav__item">
<a href="#0">
<svg aria-hidden="true" class="icon icon--md"><g stroke="currentColor" stroke-width="2" fill="none"><polyline points="13 6 2 6 2 30 26 30 26 19"></polyline> <polygon points="16 20 10 22 12 16 26 2 30 6 16 20"></polygon><line x1="22" y1="6" x2="26" y2="10"></line></svg>
<span>New</span>
</a>
</li>
</ul>
<span class="cd-3d-nav__marker cd-3d-nav__marker--col-1" aria-hidden="true"></span>
</nav>
<script src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
<script src="assets/js/main.js"></script>
</body>
</html>



هل اعجبك الموضوع :

تعليقات