اضافات بلوجر كمبيوتر جرافيك كتب الكترونية CSS ادوات سيو اكواد HTML البرمجة مواقع للتصميم
آخر الأخبار

استكشف في مدونة أوعي وشك عالم الابتكار

اكتشف الحلول المتطورة في تطبيقات الأجهزة المحمولة والتكنولوجيا والتعليم وموضوعات بلوجر. كن على اطلاع دائم بمقالات الخبراء والموارد الإبداعية والأدوات القوية لتعزيز مشاريعك الرقمية.

Home
css
svg

إنشاء قائمة مع أيقونة SVG والنص وعنوانين بديلين عند تحويم مؤشر الفأرة (Hover)

إنشاء قائمة (Menu) حيث يتم استبدال نص كل عنصر في القائمة بأيقونة SVG وعنوانين بديلين عند تحويم مؤشر الفأرة (Hover)، بدون استخدام JavaScript.
wesam elngar
القائمة تحتوي على أيقونة ونص SVG
اليوم سأقدم لك شرحًا مفصلاً عن كيفية إنشاء قائمة (Menu) حيث يتم استبدال نص كل عنصر في القائمة بأيقونة svg وعنوانين بديلين عند تحويم مؤشر الفأرة (Hover)، بدون استخدام JavaScript. سأشرح كيفية تحقيق ذلك باستخدام HTML و Css فقط.

الشرح التفصيلي

  1. فكرة العمل

    • لديك قائمة تحتوي على عدة عناصر (مثل: الرئيسية، من نحن، الخدمات، اتصل بنا).

    • كل عنصر في القائمة يحتوي على

      • نص رئيسي: يظهر بشكل افتراضي

      • أيقونة svg: تظهر عند تحويم مؤشر الفأرة على العنصر

      • عنوانين بديلين: يظهران بشكل متناوب (يدوران) عند التحويم

  2. الأدوات المستخدمة

    • HTML : لإنشاء هيكل القائمة

    • Css : لتنسيق القائمة وإضافة تأثيرات التحويم Hover Effects.

    • svg: للأيقونات التي تظهر عند التحويم.

  3. خطوات التنفيذ

    • الخطوة 1: إنشاء هيكل القائمة باستخدام HTML 

       
        <div class="svg-btn">
	<a href="#link">
		<span>Главная</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">Главная</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">Главная</textPath>
				</text>
			</g>
		</svg>
	</a>
	<a href="#link">
		<span>Услуги</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">Наши</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">Услуги</textPath>
				</text>
			</g>
		</svg>
	</a>
	<a href="#link">
		<span>О нас</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">О нас</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">О нас</textPath>
				</text>
			</g>
		</svg>
	</a>
	<a href="#link">
		<span>Контакты</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M160 448c-25.6 0-51.2-22.4-64-32-64-44.8-83.2-60.8-96-70.4V480c0 17.67 14.33 32 32 32h256c17.67 0 32-14.33 32-32V345.6c-12.8 9.6-32 25.6-96 70.4-12.8 9.6-38.4 32-64 32zm128-192H32c-17.67 0-32 14.33-32 32v16c25.6 19.2 22.4 19.2 115.2 86.4 9.6 6.4 28.8 25.6 44.8 25.6s35.2-19.2 44.8-22.4c92.8-67.2 89.6-67.2 115.2-86.4V288c0-17.67-14.33-32-32-32zm256-96H224c-17.67 0-32 14.33-32 32v32h96c33.21 0 60.59 25.42 63.71 57.82l.29-.22V416h192c17.67 0 32-14.33 32-32V192c0-17.67-14.33-32-32-32zm-32 128h-64v-64h64v64zm-352-96c0-35.29 28.71-64 64-64h224V32c0-17.67-14.33-32-32-32H96C78.33 0 64 14.33 64 32v192h96v-32z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">Контакты</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">Контакты</textPath>
				</text>
			</g>
		</svg>
	</a>
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" width="0" height="0">
		<defs>
			<path id="circlePath" d="M 150, 150 m -50, 0 a 50,50 0 0,1 100,0 a 50,50 0 0,1 -100,0" />
		</defs>
	</svg> 
</div>

    • الخطوة 2: جلب كود Css 

      
.svg-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;	
	margin: 20px 0;	
}
.svg-btn a {
    position: relative;
    padding: 20px;
    text-transform: uppercase;
    font-size: 20px;
	text-decoration: none;
	color: #337AB7;
	font-weight: bold;
}
.svg-btn a span:first-of-type {
    transition: 0.4s;
	transform: scale(1);
	opacity: 1;
	display: inline-block;
}
.svg-btn a svg {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    opacity: 0;
    text-transform: uppercase;
	font-size: 18px;
    transition: 0.4s;
    color: #337AB7;
	pointer-events: none;
}
.svg-btn a span svg {
    width: 30px;
	height: 30px;
	fill: #337AB7;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
}
.svg-btn a:hover span {
	transform: scale(0);
}
.svg-btn a:hover span svg {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.svg-btn a:hover svg {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition-delay: 150ms;
    transition: all 300ms ease-in-out;
}
.svg-btn a svg g {
    transform-origin: center;
    animation: rotateSVG 6s linear infinite;
}
@keyframes rotateSVG {
    0% {
        transform: rotate(0deg);
	}
    100% {
        transform: rotate(360deg);
	}
}

شرح الكود

بالطبع! سأشرح لك هذا الكود بالتفصيل. الكود الذي قدمته هو قائمة (Menu) تحتوي على عدة عناصر (أزرار) مع تأثيرات مرئية باستخدام svg و Css . كل عنصر في القائمة يحتوي على:

  1. نص رئيسي: يظهر بشكل افتراضي.

  2. أيقونة svg: تظهر عند تحويم مؤشر الفأرة Hover.

  3. نص دائري: نص يدور حول العنصر عند التحويم.

دعنا نشرح الكود جزءًا جزءًا:

  1. الهيكل العام للقائمة (HTML ):

     
  <div class="svg-btn">
  <a href="#link">
    <span>Главная</span>
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
        <!-- أيقونة SVG -->
        <path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/>
      </svg>
    </span>
    <svg viewBox="0 0 300 300" aria-hidden="true">
      <g>
        <text fill="currentColor">
          <textPath xlink:href="#circlePath">Главная</textPath>
        </text>
        <text fill="currentColor">
          <textPath xlink:href="#circlePath" startOffset="50%">Главная</textPath>
        </text>
      </g>
    </svg>
  </a>
  <!-- تكرار العناصر الأخرى بنفس الهيكل -->
</div>

    شرح الهيكل:

    • <div class="svg-btn">: الحاوية الرئيسية للقائمة.

    • <a href="#link">: كل عنصر في القائمة هو رابط (زر) قابل للنقر.

    • <span>Главная</span>: النص الرئيسي الذي يظهر بشكل افتراضي.

    • <span>: يحتوي على أيقونة SVG تظهر عند التحويم.

    • <svg>: يحتوي على نص دائري يدور حول العنصر عند التحويم.

  2. النص الدائري Circular Text:

    
    <svg viewBox="0 0 300 300" aria-hidden="true">
  <g>
    <text fill="currentColor">
      <textPath xlink:href="#circlePath">Главная</textPath>
    </text>
    <text fill="currentColor">
      <textPath xlink:href="#circlePath" startOffset="50%">Главная</textPath>
    </text>
  </g>
</svg>

    شرح النص الدائري:

    • يتم استخدام <textPath> لإنشاء نص يتبع مسارًا محددًا (مسار دائري في هذه الحالة).

    • xlink:href="#circlePath": يشير إلى المسار الدائري المحدد في <defs>.

    • startOffset="50%": يحدد نقطة بداية النص على المسار الدائري.

  3. تعريف المسار الدائري Circle Path:

    
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" width="0" height="0">
  <defs>
    <path id="circlePath" d="M 150, 150 m -50, 0 a 50,50 0 0,1 100,0 a 50,50 0 0,1 -100,0" />
  </defs>
</svg>

    شرح المسار الدائري:

    • <defs>: يُستخدم لتحديد العناصر التي يمكن إعادة استخدامها.

    • <path id="circlePath">: يُعرّف مسارًا دائريًا باستخدام أوامر svg.

      • M 150, 150: يحدد نقطة البداية (مركز الدائرة).

      • m -50, 0: يحرك المؤشر إلى نقطة البداية للرسم.

      • a 50,50 0 0,1 100,0: يرسم نصف دائرة.

      • a 50,50 0 0,1 -100,0: يكمل الدائرة.

  4. تأثيرات التحويم Hover Effects:

    يتم تحقيق تأثيرات التحويم باستخدام Css . إليك مثال على كيفية تنسيق القائمة:

    
    .svg-btn a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #000;
  padding: 10px;
  transition: all 0.3s ease;
}

.svg-btn a span:first-child {
  display: inline-block;
}

.svg-btn a span:last-child {
  display: none;
}

.svg-btn a:hover span:first-child {
  display: none;
}

.svg-btn a:hover span:last-child {
  display: inline-block;
}

.svg-btn a svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.svg-btn a:hover svg {
  opacity: 1;
}

    شرح التأثيرات:

    • يتم إخفاء الأيقونة والنص الدائري بشكل افتراضي display: none).

    • عند التحويم :hover، يتم إخفاء النص الرئيسي وإظهار الأيقونة والنص الدائري.

    • يتم استخدام opacity لإنشاء تأثير انتقالي سلس.

  5. النتيجة النهائية:

    • عند تحويم مؤشر الفأرة على عنصر القائمة:

      • يختفي النص الرئيسي.

      • تظهر أيقونة svg.

      • يظهر نص دائري يدور حول العنصر.

  6. مثال كامل مع HTML , Css :

     
        <div class="svg-btn">
	<a href="#link">
		<span>Главная</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">Главная</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">Главная</textPath>
				</text>
			</g>
		</svg>
	</a>
	<a href="#link">
		<span>Услуги</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">Наши</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">Услуги</textPath>
				</text>
			</g>
		</svg>
	</a>
	<a href="#link">
		<span>О нас</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">О нас</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">О нас</textPath>
				</text>
			</g>
		</svg>
	</a>
	<a href="#link">
		<span>Контакты</span>
		<span>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M160 448c-25.6 0-51.2-22.4-64-32-64-44.8-83.2-60.8-96-70.4V480c0 17.67 14.33 32 32 32h256c17.67 0 32-14.33 32-32V345.6c-12.8 9.6-32 25.6-96 70.4-12.8 9.6-38.4 32-64 32zm128-192H32c-17.67 0-32 14.33-32 32v16c25.6 19.2 22.4 19.2 115.2 86.4 9.6 6.4 28.8 25.6 44.8 25.6s35.2-19.2 44.8-22.4c92.8-67.2 89.6-67.2 115.2-86.4V288c0-17.67-14.33-32-32-32zm256-96H224c-17.67 0-32 14.33-32 32v32h96c33.21 0 60.59 25.42 63.71 57.82l.29-.22V416h192c17.67 0 32-14.33 32-32V192c0-17.67-14.33-32-32-32zm-32 128h-64v-64h64v64zm-352-96c0-35.29 28.71-64 64-64h224V32c0-17.67-14.33-32-32-32H96C78.33 0 64 14.33 64 32v192h96v-32z"/></svg>
		</span>
		<svg viewBox="0 0 300 300" aria-hidden="true">
			<g>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath">Контакты</textPath>
				</text>
				<text fill="currentColor">
					<textPath xlink:href="#circlePath" startOffset="50%">Контакты</textPath>
				</text>
			</g>
		</svg>
	</a>
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" width="0" height="0">
		<defs>
			<path id="circlePath" d="M 150, 150 m -50, 0 a 50,50 0 0,1 100,0 a 50,50 0 0,1 -100,0" />
		</defs>
	</svg> 
</div>

    
.svg-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;	
	margin: 20px 0;	
}
.svg-btn a {
    position: relative;
    padding: 20px;
    text-transform: uppercase;
    font-size: 20px;
	text-decoration: none;
	color: #337AB7;
	font-weight: bold;
}
.svg-btn a span:first-of-type {
    transition: 0.4s;
	transform: scale(1);
	opacity: 1;
	display: inline-block;
}
.svg-btn a svg {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    opacity: 0;
    text-transform: uppercase;
	font-size: 18px;
    transition: 0.4s;
    color: #337AB7;
	pointer-events: none;
}
.svg-btn a span svg {
    width: 30px;
	height: 30px;
	fill: #337AB7;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
}
.svg-btn a:hover span {
	transform: scale(0);
}
.svg-btn a:hover span svg {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.svg-btn a:hover svg {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition-delay: 150ms;
    transition: all 300ms ease-in-out;
}
.svg-btn a svg g {
    transform-origin: center;
    animation: rotateSVG 6s linear infinite;
}
@keyframes rotateSVG {
    0% {
        transform: rotate(0deg);
	}
    100% {
        transform: rotate(360deg);
	}
}

🌟 انتبه عزيزي أعضاء المجتمع! 🌟
نحن متحمسون لمشاركتك في مناقشاتنا الديناميكية. لضمان بيئة محترمة وشاملة للجميع، نطلب تعاونكم مع الإرشادات التالية:
1. احترام الخصوصية: يرجى عدم مشاركة معلومات حساسة أو شخصية في تعليقاتك.
2. انشر الإيجابية: نحن نتمسك بسياسة عدم التسامح مطلقًا مع خطاب الكراهية أو اللغة المسيئة. دعونا نحافظ على محادثاتنا محترمة وودية.
3. اللغة المفضلة: لا تتردد في التعبير عن نفسك باللغة الإنجليزية أو العربية. ستساعدنا هاتان اللغتان في الحفاظ على مناقشة واضحة ومتماسكة.
4. احترام التنوع: لتعزيز جو شامل، نطلب منك بكل احترام تجنب مناقشة المسائل الدينية في تعليقاتك.
تذكر أن مساهماتك قيمة، ونحن نقدر التزامك بجعل مجتمعنا مكانًا ترحيبيًا للجميع. دعونا نواصل التعلم والنمو معًا من خلال المناقشات البناءة والاحترام المتبادل.
شكرًا لكونك جزءًا من مجتمعنا اوعي وشك! 🌟

Post a Comment